[英]Submit Button Not working After an Ajax Call
ajax 调用后提交按钮不起作用; 但是,如果我加载页面它工作正常。 这是正在发生的事情:我确实有一个模式显示有关 email 更改确认的对话框。 如果用户点击确认,则表单提交正常; 但是,如果用户点击 no 和 go 并使用最初保存的 email 地址提交表单,但更新了不同的 forms,则该按钮不会提交任何内容。 我将不得不再次重新加载页面以使其正常工作。 这是上述行为的 JS 代码。
==> 简而言之,我想要做的事情如下:如果客户来并尝试更改他们的 email 地址,模式会弹出一条确认消息(是或否)。 如果他们单击是,则表单提交正常; 但是,如果他们单击“否”并重新输入原始 email,则提交按钮不会提交表单。
$(document).ready(function() {
window.onload = function() {
document.getElementById('confirmEmailChange').onclick = function() {
document.getElementById('updateCustomerInfoFormId').submit();
return false;
};
$('#updateInfoBut').click(function() {
let currentCustomerEmail = $('#currentCustomerEmail').val();
let customerEmail = $('#customerEmail').val();
if (currentCustomerEmail !== customerEmail) {
$('form[name=update_customer]').submit(function(e) {
e.preventDefault();
});
$.ajax({
url: "This is our API URL" + customerEmail,
dataType: 'text',
success: function(json) {
},
statusCode: {
404: function() {
$('#customerInfoModal').modal({
show: true
});
},
200: function() {
$('#emailAlreadyUsedModal').modal({
show: true
});
}
}
});
}
});
}
});
看起来像
$('form[name=update_customer]').submit(function(e) {
e.preventDefault();
});
正在阻止表单通过preventDefault()
调用自行提交。
表单提交的默认操作是提交表单本身,通过阻止您基本上告诉表单提交然后停止提交的默认操作。
如果你看这里,你会发现将回调传递给 submit() 本质上是给它一个处理程序,而不是提交表单。 每次您尝试以其他方式提交表单时,都会调用处理程序。
我已经通过移动e.preventDefault();
解决了这个问题。 在 if 语句 function 内,并在确认模态时手动提交 ajax 调用外的按钮。 以下效果很好:
$(document).ready(function(){
document.getElementById('confirmEmailChange').onclick = function() {
document.getElementById('updateCustomerInfoFormId').submit();
return false;
};
$('#updateInfoBut').on('click', function(e) {
let currentCustomerEmail = $('#currentCustomerEmail').val();
let customerEmail = $('#customerEmail').val();
if(currentCustomerEmail !== customerEmail){
e.preventDefault();
$.ajax({
url:"API LINK GOES HERE" + customerEmail,
dataType: 'text',
success:function(json){
},
statusCode: {
404: function() {
$('#customerInfoModal').modal({show: true});
},
200: function() {
$('#emailAlreadyUsedModal').modal({show: true});
}
}
});
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.