Функция AJAX запускается после второго клика - PullRequest
Новая
       7

Функция AJAX запускается после второго клика

0 голосов
/ 27 января 2019

У меня есть форма, связанная с запросом ajax. Я использую плагин проверки jquery для проверки формы. Поэтому, когда я нажимаю кнопку «Отправить», вызов ajax не работает. После повторного нажатия кнопки «Отправить» все работает. Почему это происходит?

Вот моя форма 

<form action="" id="anyQuestion" class="form-row">
    @csrf
    <input type="hidden" name="slug" value="{{$page->slug}}">
    <div class="form-group col-12">
        <input type="text" name="name" placeholder="name" class="form-control">
    </div>
    <div class="form-group col-6">
        <input type="text" name="email" placeholder="mail" class="form-control">
    </div>
    <div class="form-group col-6">
        <input type="text" name="phone" placeholder="phone" class="form-control">
    </div>
    <button class="submit-button mb-4 mt-2 w-100">submit</button>
</form>

И моя функция Ajax с проверкой 

    $('#anyQuestion').validate({
    rules: {
        name: {
            required: true
        },
        email: {
            required: true,
            email: true
        },
        phone: {
            required: true,
             minlength: 10
        }
    },
    submitHandler: function () {
        var anyQuestionForm = $('#anyQuestion');
        anyQuestionForm.submit(function (e) {
            // e.preventDefault();
            $.ajax({
                type: 'post',
                url: '/xhr/anyquestion',
                data: anyQuestionForm.serialize(),
                success: function (data) {
                    if( data == 'ok' ){
                       Swal.fire({
                           position: 'top-end',
                           type: 'success',
                           showConfirmButton: false
                         })
                       console.log(data);
                       document.getElementById("anyQuestion").reset();
                    }
                },
                error: function (data) {
                    Swal.fire({
                        type: 'error',
                      })
                },
            });
         });
    }
});

1 Ответ

0 голосов
/ 27 января 2019

Эти две строки: 

    var anyQuestionForm = $('#anyQuestion');
    anyQuestionForm.submit(function (e) {

находятся в вашем обработчике отправки, но именно они настраивают обработку отправки в первую очередь.Итак, похоже, что ваш первый щелчок по кнопке вызывает submitHandler, который затем настраивает обработчик события отправки формы, чтобы другой щелчок отправлял запрос AJAX.

Они должны быть в функции document.ready():

$(function(){
    var anyQuestionForm = $('#anyQuestion');
    anyQuestionForm.submit(function (e) { . . .
});

Или, так как ваш обратный вызов submit уже находится внутри вашего submitHandler, вам может даже не понадобиться обратный вызов submit, и просто используйте: 

submitHandler: function () {
        $.ajax({
            type: 'post',
            url: '/xhr/anyquestion',
            data: anyQuestionForm.serialize(),
            success: function (data) {
                if( data == 'ok' ){
                   Swal.fire({
                       position: 'top-end',
                       type: 'success',
                       showConfirmButton: false
                     })
                   console.log(data);
                   document.getElementById("anyQuestion").reset();
                }
            },

            .   .   .
...