Пользовательская форма с Ajax

23 апр. 2015 г., 18:37:20
Просмотры: 49.9K
Голосов: 4

У меня возникли проблемы с моей формой. При нажатии кнопки отправки выдается ошибка 404. Буду благодарен за любые предложения.

Ajax-обработка формы. Код для JavaScript файла темы.

<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 "Ошибка";
    }
    else {
        echo "Отправка успешна, квитанция отправлена на ваш email адрес.       
        <br> Ваш ID бронирования:<b>ZCA- ".$wpdb->reference . "</b>";

        // Подготовка тела email
        $msg = "Ссылка: ZCA-" . $reference . "\nТип:" . $type . "\nОткуда:" . $from . "\nКуда:" . $to . "\nДата" . $date . "\nВремя:" . $time . "\nИмя:" . $name . "\nНомер:" . $tel . "\nEmail:" . $email . "\nПассажиры:" . $passenger . "\nДополнительно:" . $other;
        mail("taxi@zcarsglobal.com","Бронирование",$msg);
        mail($email,"Zcars Global Бронирование","Спасибо за ваш запрос. Мы постараемся обработать его как можно скорее." . $msg);

    }
    die();
}
add_action('wp_ajax_make_booking', 'makeBooking');
add_action('wp_ajax_nopriv_make_booking', 'makeBooking'); // не особо нужно

Я прилагаю HTML-форму, так как все еще получаю ошибку 404, возможно, проблема здесь?

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

  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="booking" value="booking" checked>
        Бронирование
    </label>
  </div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="quotation" value="quotation">
    Расчет стоимости
  </label>
</div>

  <div class="form-group">
    <label for="from">Откуда *</label>
    <input name="from" id="from" type="text" class="form-control" placeholder="Где вы находитесь?" required>
  </div>
  <div class="form-group">
     <label for="to">Куда *</label>
    <input name="to" id="to" type="text" class="form-control" placeholder="Куда вы направляетесь?" required>
  </div>
  <div class="form-group">
     <label for="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">Время *</label>
    <input name="time" id="time" type="time" class="form-control"  required>
  </div>
  <div class="form-group">
    <label for="name">Имя *</label>
    <input name="name" id="name" type="text" class="form-control" placeholder="Как вас зовут?" required>
  </div>
    <div class="form-group">
    <label for="tel">Номер телефона *</label>
    <input name="tel" id="tel" type="number" class="form-control" placeholder="Ваш номер телефона?" required>
  </div>
  <div class="form-group">
    <label for="email">Email *</label>
    <input name="email" id="email" type="email" class="form-control" placeholder="Ваш email?" required>
  </div>

  <h4>Пассажиры</h4>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios2" id="4orless" value="1to4" checked>
        4 или меньше
    </label>
  </div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios2" id="4to6" value="4to6">
    от 4 до 6
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios2" id="6to8" value="6to8">
    от 6 до 8
  </label>
</div>
<textarea name="other" class="form-control" rows="3">Пожалуйста, напишите здесь любую дополнительную информацию</textarea>
 <input type="hidden" name="action" value="makeBooking"/>
  <input type="submit">
</form>





1
Комментарии

для ajax нет аргумента action, он должен быть частью data.

Milo Milo
23 апр. 2015 г. 19:58:19
Все ответы на вопрос 4
4

Ваша попытка отправлять AJAX-запросы на wp-admin/admin-ajax.php верна, но лучше создать глобальную JavaScript-переменную с помощью wp_localize_script(), чтобы сделать доступными для вашего скрипта в functions.php данные, которые обычно можно получить только на серверной стороне WordPress.

Например, ваш JavaScript-код может находиться в той же папке, что и functions.php, следующим образом:

[Папка темы]

-->functions.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() добавьте следующий код в начало вашего functions.php:

// Подключаем JavaScript-файл, который отправляет AJAX-запрос
wp_enqueue_script( 'make-booking-ajax','js/makebooking.js', array( 'jquery' ) );

// Объявляем URL к файлу, который обрабатывает AJAX-запрос (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 советами по использованию Ajax в WordPress

23 апр. 2015 г. 21:21:12
Комментарии

Привет, спасибо за твой замечательный ответ! Теперь я получаю не 404 ошибку, а пустую страницу после отправки. Один раз я даже получил весь HTML страницы внутри блока #feedback.

raikkonen raikkonen
23 апр. 2015 г. 22:52:19

В твоем PHP коде отсутствует XHR-ответ. После отправки письма попробуй добавить echo "Спасибо за бронирование" и замени die() на exit;. Кстати, ты нигде не определил переменную $reference в своем коде. И наконец, проверь файл php_error.log для получения деталей.

CeganB CeganB
24 апр. 2015 г. 10:25:56

Разве echo перед отправкой письма не достаточно? Спасибо за заметку про $reference, исправил это. Хм, php_error.log не показывает никаких ошибок за последние несколько дней. Это загадка.

raikkonen raikkonen
25 апр. 2015 г. 01:03:26

привет, почему ты вызываешь MBAjax.BookingForm, такого члена нет. это просто переменная.

pcarvalho pcarvalho
1 июл. 2016 г. 00:17:39
0
add_action('wp_ajax_make_booking', 'makeBooking');
add_action('wp_ajax_nopriv_make_booking', 'makeBooking'); // необязательно

Поместите эти две строки выше функции makeBooking.

У меня сработало! Также посмотрите, как я отправляю действие в data!

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

            });
11 июл. 2018 г. 19:37:32
0

Вы не можете использовать Ajax в WordPress таким образом. Существует множество руководств по использованию Ajax в WordPress. Я считаю, что самое простое решение можно найти здесь: http://natko.com/wordpress-ajax-login-without-a-plugin-the-right-way/

23 апр. 2015 г. 20:13:27
1
jQuery(document).ready(function($) {

 // Выполнение AJAX-авторизации при отправке формы
    $('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', // вызывает 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();
    });

});
14 авг. 2019 г. 10:59:21
Комментарии

Можете добавить объяснение, почему это может решить проблему?

nmr nmr
14 авг. 2019 г. 13:10:06