ajax 功能在第二次点击后启动答案

【问题标题】：ajax function starts after second clickajax 功能在第二次点击后启动
【发布时间】：2019-01-26 23:12:48
【问题描述】：

我有一个与 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',
                      })
                },
            });
         });
    }
});

【问题讨论】：

为什么在 submitHandler 函数将元素作为参数之一传递时获取表单元素？ $("#myform").validate({ submitHandler: function(form) { form.submit(); } }); jqueryvalidation.org/validate

标签： javascript html ajax forms validation

【解决方案1】：

这两行：

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

            .   .   .

【讨论】：