[英]Can't prevent form from automatically submitting twice after a click
我第一次提交 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 調用,但是即使單擊了一次提交按鈕,上面的代碼也會在第一次實例中提交兩次,這會導致重復記錄。
最簡單的方法是在提交后使用 jquery 禁用按鈕。
嘗試
$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});
它觸發兩次的原因是標簽中有多個 forms 渲染。 所以下面的代碼用很少的邏輯解決了我的問題
$(document).on('submit', 'form', function(e){
e.preventDefault();
let x = $(this).closest('form').attr('id');
console.log(x);
return false;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.