admin管理员组

文章数量:1292182

Closed. This question is off-topic. It is not currently accepting answers.

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 7 years ago.

Improve this question

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="[email protected]">
  </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.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: ".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. This question is off-topic. It is not currently accepting answers.

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 7 years ago.

Improve this question

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="[email protected]">
  </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.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/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?

Share Improve this question asked May 3, 2017 at 3:25 AmranAmran 1151 gold badge2 silver badges5 bronze badges 4
  • I think you have added your own jQuery code for CF7. Am, I right? – BlueSuiter Commented May 3, 2017 at 5:39
  • do you mean the jQuery library? I did not add the jquery – Amran Commented May 3, 2017 at 6:23
  • No not library, are you using your own code for mail submission.. – BlueSuiter Commented May 3, 2017 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 Commented May 3, 2017 at 7:28
Add a comment  | 

1 Answer 1

Reset to default 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();
}

?>

Update: initForm is no longer present since CF7 5.4

Thank You @Chris Pink

本文标签: jqueryContact Form 7Submit Form not working After Ajax Request