Custom Form with Ajax

时间:2015-04-23 作者:raikkonen

我的表格有问题。单击submit按钮时,会弹出404错误。如果有人有任何建议,我将不胜感激。

表单的Ajax处理。进入theme的js。

<script type="text/javascript">
    jQuery(\'#BookingForm\').submit(ajaxSubmit);

    function ajaxSubmit(){
        var BookingForm = jQuery(this).serialize();
        jQuery.ajax({
            action : \'make_booking\',
            type   : "POST",
            url    : "/wp-admin/admin-ajax.php",
            data   : BookingForm,
            success: function(data){
                jQuery("#feedback").html(data);
            }
        });
        return false;
    }
</script>
PHP进入functions.php

function makeBooking(){
    global $wpdb;

    $type   = $_POST["optionsRadios"];
    $to     = $_POST["to"];
    $from   = $_POST["from"];
    $date   = $_POST["date"];
    $time   = $_POST["time"];
    $name   = $_POST["name"];
    $tel    = $_POST["tel"];
    $email  = $_POST["email"];
    $passenger = $_POST["optionsRadios2"];
    $other  = $_POST["other"];

    if( $wpdb->insert(\'Booking\',
      array(
        \'type\'=>$type,
        \'from1\'=>$from,
        \'to1\'=>$to,
        \'date\'=>$date,
        \'time\'=>$time,
        \'name\'=>$name,
        \'tel\'=>$tel,
        \'email\'=>$email,
        \'passenger\'=>$passenger,
        \'other\'=>$other
      )
    ) === FALSE ) {
        echo "Error";
    }
    else {
        echo "Submission successful, an email receipt has been sent to your email address.       
        <br> Your Booking ID is:<b>ZCA- ".$wpdb->reference . "</b>";

        //Prepare email body
        $msg = "Reference: ZCA-" . $reference . "\\nType:" . $type . "\\nFrom:" . $from .     "\\nTo:" . $to . "\\nDate" . $date . "\\nTime:" . $time . "\\nName:" . $name . "\\nNumber:" .     $tel . "\\nEmail:" . $email . "\\nPassengers:" . $passenger . "\\nOther:" . $other;
        mail("[email protected]","Booking",$msg);
        mail($email,"Zcars Global Booking","Thank you for your enquiry. We aim to deal with your request straight away." . $msg);

    }
    die();
}
add_action(\'wp_ajax_make_booking\', \'makeBooking\');
add_action(\'wp_ajax_nopriv_make_booking\', \'makeBooking\'); // not really needed
我包括了HTML表单,因为我仍然收到404错误,可能是这里有什么?

<form method="post" id="BookingForm">

  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="booking" value="booking" checked>
        Booking
    </label>
  </div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="quotation" value="quotation">
    Quotation
  </label>
</div>

  <div class="form-group">
    <label for="from">From *</label>
    <input name="from" id="from" type="text" class="form-control" placeholder="Where are you?" required>
  </div>
  <div class="form-group">
     <label for="to">Going to *</label>
    <input name="to" id="to" type="text" class="form-control" placeholder="Where are you going to?" required>
  </div>
  <div class="form-group">
     <label for="date">Date *</label>
    <input name="date" id="date" type="date" class="form-control"  required min="<?php echo date("dd-mm-yyyy"); ?>">
  </div>
    <div class="form-group">
     <label for="time">Time *</label>
    <input name="time" id="time" type="time" class="form-control"  required>
  </div>
  <div class="form-group">
    <label for="name">Name *</label>
    <input name="name" id="name" type="text" class="form-control" placeholder="What is your name?" required>
  </div>
    <div class="form-group">
    <label for="tel">Telephone Number *</label>
    <input name="tel" id="tel" type="number" class="form-control" placeholder="What is your number?" required>
  </div>
  <div class="form-group">
    <label for="email">Email *</label>
    <input name="email" id="email" type="email" class="form-control" placeholder="What is your email?" required>
  </div>

  <h4>Passengers</h4>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios2" id="4orless" value="1to4" checked>
        4 or Less
    </label>
  </div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios2" id="4to6" value="4to6">
    4 to 6
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios2" id="6to8" value="6to8">
    6 to 8
  </label>
</div>
<textarea name="other" class="form-control" rows="3">Please write here anything else we need to know</textarea>
 <input type="hidden" name="action" value="makeBooking"/>
  <input type="submit">
</form>




4 个回复
SO网友:CeganB

您尝试将AJAX请求发送到wp admin/admin AJAX。php是正确的,但最好使用wp_localize_script() 使脚本在函数中可用的任何数据。通常只能从WordPress的服务器端获取的php。

例如,javascript代码可以与函数位于同一文件夹中。php本身:

[主题文件夹]

-->功能。php

-->js[文件夹]-->makebooking。js公司

你的jquery在makebooking中。js应如下所示:

jQuery(document).ready(function(event) {

 jQuery(\'#BookingForm\').submit(ajaxSubmit);

 function ajaxSubmit() {
    var BookingForm = jQuery(this).serialize();
    jQuery.ajax({
      action:  \'make_booking\',
      type:    "POST",
      url:     MBAjax.admin_url,
      data:    BookingForm,
      success: function(data) {
         jQuery("#feedback").html(data);
      }
    });
    return false;
  }
});
使用makeBooking()处理数据,在函数顶部添加以下内容。php:

// embed the javascript file that makes the AJAX request
wp_enqueue_script( \'make-booking-ajax\',\'js/makebooking.js\', array( \'jquery\' ) );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( \'make-booking-ajax\', \'MBAjax\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );

add_action(\'wp_ajax_make_booking\', \'makeBooking\');
有关更多参考,请查看5 Tips for using Ajax in Wordpress

SO网友:Syed Waqar Haider

add_action(\'wp_ajax_make_booking\', \'makeBooking\');
add_action(\'wp_ajax_nopriv_make_booking\', \'makeBooking\'); // not really needed

Put these two lines above the makeBooking function.

为我工作!另外,请参见我如何在数据中发送操作!

$( "#signupFormTag" ).submit(function( event ) {

              event.preventDefault();

                var signupForm = jQuery(this).serialize();
                jQuery.ajax({
                    // action : \'signup_paragon\',
                    type   : "POST",
                    url    : "/paragaon-3/wp-admin/admin-ajax.php",
                    data   : {
                        from: signupForm,
                        action: \'signup_paragon\'
                    },
                    success: function(data){
                        console.log(data);
                        //jQuery("#feedback").html(data);
                    }
                });
                // return false;

            });

SO网友:Trang

你不能那样在Wordpress上使用Ajax。有很多关于在wordpress上使用Ajax的教程。我认为最简单的是http://natko.com/wordpress-ajax-login-without-a-plugin-the-right-way/

SO网友:test
jQuery(document).ready(function($) {

 // Perform AJAX login on form submit
    $(\'form#login\').on(\'submit\', function(e){
        $(\'form#login p.status\').show().text(ajax_login_object.loadingmessage);
        $.ajax({
            type: \'POST\',
            dataType: \'json\',
            url: ajax_login_object.ajaxurl,
            data: { 
                \'action\': \'ajaxlogin\', //calls wp_ajax_nopriv_ajaxlogin
                \'username\': $(\'form#login #username\').val(), 
                \'password\': $(\'form#login #password\').val(), 
                \'security\': $(\'form#login #security\').val() },
            success: function(data){
                $(\'form#login p.status\').text(data.message);
                if (data.loggedin == true){
                    document.location.href = ajax_login_object.redirecturl;
                }
            }
        });
        e.preventDefault();
    });

});
结束