我第一次提交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调用,但是即使单击一次提交按钮,上面的代码也会在第一次执行时提交两次,这会导致记录重复。
答案 0 :(得分:0)
最简单的方法是在提交后仅通过jquery禁用按钮。
尝试
$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});
答案 1 :(得分:0)
之所以触发两次是因为选项卡中有多个表单呈现。所以下面的代码用很少的逻辑解决了我的问题
$(document).on('submit', 'form', function(e){
e.preventDefault();
let x = $(this).closest('form').attr('id');
console.log(x);
return false;
});