0

I am using Contact Form 7 with ajax jquery. The first part is for user to insert vehicle number and email.

If success, it will load contact form 7 via ajax. When I click on submit, it will redirect to a new page and will output 0. I had made a research on google and found out the wpcf7-submit function.

I tried to make an alert function and it response as expected. How do I want to use it with contact form 7 and email the form details if no error on the form?

Coding

form.php

<?php
get_header(); 
// Include all the theme functions    
?>

<form name="season-form" class="form-horizontal" method="post" action="">
  <div class="form-group form-group-lg">
    <label for="carNo" id="label-cust"> Vehicle Registration No</label>
    <input type="text" class="form-control" name="vehicle_no" id="vehicle_no" placeholder="BHK1991">
  </div>
  <div class="form-group form-group-lg">
    <label for="email" id="email">Email</label>
    <input type="email" class="form-control" name="email" id="email" placeholder="myMail@example.com">
  </div>
  <button type="submit" class="btn btn-primary" id="submit_payment">Make Payment</button>
</form>
<div id="result"></div>

<?php get_footer(); ?>

function.php

function _myConfirmHandler()
{
    if(isset($_POST['vehicle_no']))
    {
        $vehicle_no = $_POST['vehicle_no'];
        $email = $_POST['email'];

        echo do_shortcode('[cfdb-table form="season parking form_copy" show="your-name,mail,your-platno,your-location" filter="your-platno=' . $vehicle_no . '" headers="your-name=Name,mail=Email,your-platno=Registration No.,your-location=Parking Location"]');

        // Display the Form 
        echo do_shortcode('[contact-form-7 id="6959" title="Payment season Form_Post"]');
    }

    wp_die();
}

add_action('wp_ajax_confirmRequest', '_myConfirmHandler');
add_action('wp_ajax_nopriv_confirmRequest', '_myConfirmHandler');

jquery.js

jQuery(document).ready(function($) {
    $('#submit_payment').click(function(e){
        e.preventDefault();
        var str = $("form[name=season-form]").serialize();
        //alert(str);
        $.ajax({
            type: "POST",
            url: '//www.ktmparking.com.my/wp-admin/admin-ajax.php',
            data: str + '&action=confirmRequest' 
        }).done(function(data){
            $("#result").html(data);

            $(".cal").datepicker({
            showOn: "button",
            dateFormat: "dd-mm-yy",
                buttonImage: "http://theonlytutorials.com/demo/x_office_calendar.png",
                buttonImageOnly: true,
                showAnim: 'slideDown',
                duration: 'fast',
                showButtonPanel: true
            });

            $('.wpcf7-submit').click(function(e) {
                e.preventDefault();
                alert('Submit button press!');
            }); 

        });
    });    
});

Do I have to rewrite the post method on the form and email the details if success?

closed as off-topic by Mark Kaplun, cjbj, Dave Romsey, Howdy_McGee May 10 '17 at 4:58

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • I think you have added your own jQuery code for CF7. Am, I right? – BlueSuiter May 3 '17 at 5:39
  • do you mean the jQuery library? I did not add the jquery – Amran May 3 '17 at 6:23
  • No not library, are you using your own code for mail submission.. – BlueSuiter May 3 '17 at 7:12
  • Nope. For jQuery, I just use the code above. For the mail submission, I want to use the function provided by Contact Form 7. From the previous code that you made, are you able to submit the form? – Amran May 3 '17 at 7:28
0

You have been loading CF-7 form using ajax by that means required scripts for that form never executed for that. And, because of that thing your form not working as it was expected to be.

You have to re-initiate the scripts of CF-7 for the particular form. Here, is the updated PHP code.

Now, your ajax will be:

<?php

function _myConfirmHandler()
{
    if(isset($_POST['vehicle_no']))
    {
        $vehicle_no = $_POST['vehicle_no'];
        $email = $_POST['email'];

        echo do_shortcode('[cfdb-table form="season parking form_copy" show="your-name,mail,your-platno,your-location" filter="your-platno=' . $vehicle_no . '" headers="your-name=Name,mail=Email,your-platno=Registration No.,your-location=Parking Location"]');

        // Display the Form 
        echo do_shortcode('[contact-form-7 id="6959" title="Payment season Form_Post"]');
    ?>
     <script>
        jQuery('.wpcf7 > form').initForm();
        var urL = jQuery('.wpcf7 > form').attr('action').split('#');
        jQuery('.wpcf7 > form').attr('action', "#" + urL[1]);
    </script>
    <?php
    }

    wp_die();
}

?>
  • Thanks for the help. I'm not in front of my desk now. Will give the update later. May I know what does the script do? – Amran May 3 '17 at 10:07
  • It will initiate the CF7 script on your form. You were loading form using ajax because of which it was not initiated on particular form. I will wait for your reply. Happy Coding :) – BlueSuiter May 3 '17 at 10:09
  • Will do. Where can I get the details or documentation on that? – Amran May 3 '17 at 10:22
  • You want documentation of what? – BlueSuiter May 3 '17 at 10:22
  • 1
    @mroncetwice answer has been updated as per your comment, I hope it will work now without any error. Thanks for the update. :) – BlueSuiter Jan 17 '18 at 4:24

Not the answer you're looking for? Browse other questions tagged or ask your own question.