无法阻止表单在点击后自动提交两次

Question

我第一次提交 from 会触发重复提交，但后续只会发生一次。

我已经使用了 preventDefault() 方法，但在第一次实例中仍然被提交了两次，但随后的只提交了一次。

表格

<?php $form = ActiveForm::begin(['id' => 'verify_form']); ?>

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label">Identity Type <span class="error">*</span></label>
            <?php echo $form->field($identitiesModel, 'type')->dropDownList($identitiesModel->identityTypes(), [
                'prompt' => 'Select an identity',
                'class' => 'form-control',
                'required' => true
            ])->label(false) ?>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label">Identification Number <span class="error">*</span></label>
            <?php echo $form->field($identitiesModel, 'identificationId')->textInput([
                'class' => 'form-control',
                'required' => true
            ])->label(false) ?>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label">Last name <span class="error">*</span></label>
            <?php echo $form->field($identitiesModel, 'lastname')->textInput([
                'class' => 'form-control',
                'placeholder'=> 'Last name',
                'required' => true
            ])->label(false) ?>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label">First name <span class="error">*</span></label>
            <?php echo $form->field($identitiesModel, 'firstname')->textInput([
                'class' => 'form-control',
                'placeholder'=> 'First name',
                'required' => true
            ])->label(false) ?>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label">Date of Birth <span class="error">*</span></label>
            <?php echo $form->field($identitiesModel, 'date_of_birth')->widget(DatePicker::className([
                'options' => [
                    'placeholder' => 'Select date of birth',
                    'class' => 'form-control',
                ],
                'pluginOptions' => [
                    'format' => 'Y-m-d',
                    'todayHighlight' => true,
                ]
            ]))->label(false) ?>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="form-group">
            <button type="submit" class="btn btn-success subBtn">Search</button>
            <button type="reset" class="btn btn-default clearBtn">Clear</button>
        </div>
    </div>
</div>

<?php ActiveForm::end(); ?>


JS Code
$(document).ready(function(){
 $('#verify_form').submit(function(event){
        event.preventDefault()

        $('.otherResult').empty();
        let x = $('#verify_form #verificationform-date_of_birth').val();
        if(x.length == 0){
            swalFunc('info','Oops...','Date of birth must be filled');
            return false;
        } 

        $('#verify_form .subBtn').attr('disabled', true);
        let formValues = $(this).serialize();        
            let link = '".Url::toRoute("api/verification-search")."';
            $.ajax({
                type: 'POST',
                url: link,
                data: formValues,
                beforeSend: function(){           
                   $('.loadImage').css({'display': 'block'}); 
                },
                success:function(data){
                    $('#verify_form .subBtn').removeAttr('disabled');
                    socket.emit('identity', data);
                },
                complete:function(){
                    $('.loadImage').css({'display': 'none'});
                }  
            });
            return false;
    });
})

我希望每次触发提交按钮时都会调用一次 ajax 调用，但是即使单击了一次提交按钮，上面的代码也会在第一次实例中提交两次，这会导致重复记录。

Answer 1

最简单的方法是在提交后使用 jquery 禁用按钮。

尝试

$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});

Answer 2

它触发两次的原因是标签中有多个 forms 渲染。 所以下面的代码用很少的逻辑解决了我的问题

$(document).on('submit', 'form', function(e){
    e.preventDefault();


    let x = $(this).closest('form').attr('id');
    console.log(x);
    return false;
});