web-dev-qa-db-fra.com

Formulaire personnalisé avec Ajax

J'ai des problèmes avec ma forme. Lorsque le bouton d'envoi est cliqué, une erreur 404 est générée. Si quelqu'un a des suggestions, je vous en serais reconnaissant.

Traitement Ajax du formulaire. Entrer dans le thème de 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 entrant dans 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

J'inclus le formulaire HTML car je reçois toujours l'erreur 404, c'est peut-être quelque chose ici?

<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

Votre tentative d’envoi de vos demandes AJAX à wp-admin/admin-ajax.php est correcte, mais il sera préférable de créer une variable globale javascript avec wp_localize_script () pour rendre toutes les données disponibles à votre script dans functions.php que vous ne pouvez normalement obtenir que du côté serveur de WordPress.

Par exemple, votre code javascript peut être dans le même dossier que functions.php en tant que tel:

[Dossier Thème]

-> functions.php

-> js [dossier] -> makebooking.js

Votre jquery dans makebooking.js devrait ressembler à ceci:

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;
  }
});

Avec makeBooking () traitant les données, ajoutez ce qui suit au sommet de votre 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');

Pour plus de références, consultez 5 conseils pour utiliser Ajax dans Wordpress

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

Placez ces deux lignes au-dessus de la fonction makeBooking.

Travaillé pour moi! Aussi, voyez comment j'envoie l'action en données!

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

Vous ne pouvez pas utiliser Ajax sur Wordpress de cette façon. Il existe de nombreux tutoriels sur l’utilisation d’Ajax sur wordpress. Je pense que le plus simple est http://natko.com/wordpress-ajax-login-without-a-plugin-the-right-way/

0
Trang