javascript - Ajax 调用后提交按钮不起作用
问题描述
ajax 调用后提交按钮不起作用;但是,如果我加载页面它工作正常。这就是正在发生的事情:我确实有一个模式,显示有关电子邮件更改确认的对话框。如果用户点击确认,则表单提交正常;但是,如果用户单击“否”并继续使用最初保存的电子邮件地址提交表单,但更新了不同的表单,则该按钮不会提交任何内容。我将不得不再次重新加载页面以使其正常工作。这是上述行为的 JS 代码。
==> 简而言之,我想要做的事情如下:如果客户来并尝试更改他们的电子邮件地址,则模式会弹出一条确认消息(是或否)。如果他们单击是,则表单提交正常;但是,如果他们单击“否”并重新输入原始电子邮件,则提交按钮不会提交表单。
$(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() 本质上是为其提供了一个处理程序,而不是提交表单。每次您尝试以其他方式提交表单时,都会调用处理程序。
推荐阅读
- r - 使因子水平变量名称和因子水平行数据可变数据
- .htaccess - 当 url 只有扩展名而没有页面名称时,从禁止页面重定向到 404 页面
- botframework - 如何将提示值从主对话框传递给调度程序?
- javascript - 如果在本机反应中未选中所有复选框,如何禁用按钮
- android - 如何修复仅在调试构建变体上发生的 Dynatrace“以非零退出值 5 完成”
- angular - Angular7 - 带有 ng-container 的 mat-tab-group 使滚动无法在移动设备上运行
- r - 发布到 Web 时闪亮主面板出错
- maven - maven 按 groupid、artifactid 和 version 下载所有工件
- flutter - 如何比较两张图像并突出新图像中的差异?
- javascript - 窗户。onload=function() 只在没有缓存 DOM 的情况下工作