[英]Submit Button Not working After an Ajax Call
Submit button does not work after an ajax call; ajax 调用后提交按钮不起作用; however, if I load the page it works fine.
但是,如果我加载页面它工作正常。 This is what is going on: I do have a modal that shows a dialog concerning email change confirmation.
这是正在发生的事情:我确实有一个模式显示有关 email 更改确认的对话框。 If the user clicks confirm, then the form submits fine;
如果用户点击确认,则表单提交正常; however, if the user clicks no and go ahead and submits the form with the originally saved email address, but updates different forms, the button does not submits anything.
但是,如果用户点击 no 和 go 并使用最初保存的 email 地址提交表单,但更新了不同的 forms,则该按钮不会提交任何内容。 I would have to reload the page again to make it work.
我将不得不再次重新加载页面以使其正常工作。 Here is the JS code for the above behavior.
这是上述行为的 JS 代码。
==> In a nutshell, what I am trying to do is as follows: If the customer comes and tries to change their email address, the modal pops up with a confirmation message (Yes or no). ==> 简而言之,我想要做的事情如下:如果客户来并尝试更改他们的 email 地址,模式会弹出一条确认消息(是或否)。 If they click yes then the form submits fine;
如果他们单击是,则表单提交正常; however, if they click no and reenter their original email, the submit button does not submit the form.
但是,如果他们单击“否”并重新输入原始 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
});
}
}
});
}
});
}
});
It looks like看起来像
$('form[name=update_customer]').submit(function(e) {
e.preventDefault();
});
is preventing the form from submit itself via preventDefault()
call.正在阻止表单通过
preventDefault()
调用自行提交。
The default action of a form submit is to submit the form itself, by prevent the default action you basically tells the form to submit then stop it from submitting.表单提交的默认操作是提交表单本身,通过阻止您基本上告诉表单提交然后停止提交的默认操作。
If you look at here , you will find that passing a callback to submit() essentially gives it a handler rather than submit the form.如果你看这里,你会发现将回调传递给 submit() 本质上是给它一个处理程序,而不是提交表单。 And the handler will be called every time when you try to submit the form in other ways.
每次您尝试以其他方式提交表单时,都会调用处理程序。
I have figured this out by moving the e.preventDefault();
我已经通过移动
e.preventDefault();
解决了这个问题。 inside the if statement function, and manually submitting the button outside the ajax call when the modal is confirmed.在 if 语句 function 内,并在确认模态时手动提交 ajax 调用外的按钮。 The following works great:
以下效果很好:
$(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.