web-dev-qa-db-ja.com

Ajaxを使ったカスタムフォーム

フォームに問題があります。送信ボタンがクリックされると404エラーが吐出されます。誰かが何か提案があれば私は感謝するでしょう。

フォームのAjax処理テーマの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

まだ404エラーが発生しているので、HTMLフォームを含めています。

<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>





ajaxforms
4
raikkonen

AJAXリクエストを wp-admin/admin-ajax.php に送信しようとする試みは正しいですが、 wp_localize_script（） を使用してjavascriptグローバル変数を作成することをお勧めします。あなたが通常WordPressのサーバーサイドからのみ得ることができるfunctions.phpのあなたのスクリプトにどんなデータも利用可能にするため。

例えば、あなたのJavaScriptコードはfunctions.phpと同じフォルダに置くことができます。

[テーマフォルダ]

- > functions.php

- > js [フォルダ] - > makebooking.js

makebooking.js にあるjqueryは、次のようになります。

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（） でデータを処理して、functions.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');

詳細については、 WordpressでAjaxを使用するための5つのヒント を参照してください。

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

これら2行をmakeBooking関数の上に置きます。

私のために働いた！また、アクションをデータで送信する方法もご覧ください。

$( "#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;

            });
0
Syed Waqar Haider Shamsi

そのようにWordpressでAjaxを使うことはできません。ワードプレスでAjaxを使うことについての多くのチュートリアルがあります。私は最も簡単だと思う - http://natko.com/wordpress-ajax-login-without-a-plugin-the-right-way/

0
Trang
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();
    });

});
0
test