停止提交表单,直到在 ajax 中打开模式
Posted
技术标签:
【中文标题】停止提交表单,直到在 ajax 中打开模式【英文标题】:Stop form from submitting until modal is open in ajax 【发布时间】:2018-04-14 12:56:56 【问题描述】:如果数据 ios 无效,我正在从表单和提交按钮上获取数据,它返回 false,如果数据有效,我正在通过 ajax 在其成功方法中发送电子邮件,正在显示发送或不发送的模式我想要 window.location .href 将在模态隐藏后更改,因为表单在显示甚至模态之前提交,所以我使用 event.preventdefault 来阻止它提交,但现在有两个问题
浏览器一直卡住,直到模式打开
模态 window.location 未更改后。
这是我提交按钮的代码
<input type="submit" class="button btn btn-primary" onclick ="return SendEmail();" />
这里是 SendEmail()
function SendEmail()
if (!CheckContactUsFormValidation())
return false;
else
var l_strEmail = document.getElementById('txtEmail').value;
var l_strComents = document.getElementById('txtComments').value;
var l_strEventLocation = document.getElementById('txtEventLocation').value;
var l_strStartDate = document.getElementById('txtStartDate').value;
var l_strOrganization = document.getElementById('txtOrganization').value;
var l_strPhone = document.getElementById('txtPhone').value;
var l_strLastName = document.getElementById('txtLastName').value;
var l_strFirstName = document.getElementById('txtFirstName').value;
var rent = document.getElementById("inlineRadio1").value;
var lease = document.getElementById("inlineRadio2").value;
if (rent.checked == true)
var l_strCheck = 'rent';
else
if (lease.checked == true)
var l_strCheck = 'lease';
var l_strTitle = "Contact Us";
var l_strContents = 'Hi, ' + l_strFirstName + ' ' + l_strLastName + '\n';
l_strContents += 'he is mail for requesting product on ' + l_strCheck + ' and start date is ' + l_strStartDate + ' for organization ' + l_strOrganization + '\n';
l_strContents += 'his cell #' + l_strPhone + ' and his coments are as follows \n';
l_strContents += l_strComents + '\n' + 'You can contact him on email: ' + l_strEmail;
l_strContents += 'End here!';
var l_strtoEmail = 'abc@yahoo.com';
SendEmailWithCustomTitle(l_strtoEmail, l_strContents, l_strTitle);
return true;
function CheckContactUsFormValidation()
var m_boolValidator = true;
if (!CheckRequiredFieldValidation('FirstName', 'Enter first name'))
m_boolValidator = false;
if (!CheckRequiredFieldValidation('LastName', 'Enter last name'))
m_boolValidator = false;
if (!CheckRequiredFieldValidation('Organization', 'Enter Organization'))
m_boolValidator = false;
if (!CheckRequiredFieldValidation('Email', 'Enter Email'))
m_boolValidator = false;
else
if (!CheckEmailValidation('Email', 'Enter valid email address'))
m_boolValidator = false;
if (!CheckRequiredFieldValidation('Phone', 'Enter phone#'))
m_boolValidator = false;
if (!CheckRequiredFieldValidation('StartDate', 'Enter start date'))
m_boolValidator = false;
return m_boolValidator;
这里是在 SendEmail() 中调用的 ajax 函数
function SendEmailWithCustomTitle(txtEmail, txtContents, l_strTitle)
event.preventDefault();
$.ajax(
async:false,
type: "POST",
url: "PTServiceRoutines.aspx/AjaxSendEmail",
data: "'p_strEmail':'" + txtEmail + "','p_strTitle':'" + l_strTitle + "','p_strContents':'" + txtContents + "'",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successAjaxSendEmailWithCustomTitleHandler,
failure: failureAjaxSendEmailWithCustomTitleHandler,
error: errorAjaxSendEmailWithCustomTitleHandler
);
return false;
function successAjaxSendEmailWithCustomTitleHandler(data)
ShowAlert(data.d);
//ShowAlert is method used to open modal showing data.a
;
function failureAjaxSendEmailWithCustomTitleHandler(data)
;
function errorAjaxSendEmailWithCustomTitleHandler(data, status)
;
我已经尝试过 event.preventdefault,event.soppropogation 但我找不到任何简单的方法从 ajax 成功函数 SendEmail 调用返回 true。
【问题讨论】:
恭喜你获得最大的函数名称徽章 :))) 您将邮件服务器暴露在一些严重的电子邮件流量中 ajax完成后打开modal的modal代码在哪里? modal 正在从 showalert 方法打开 @madalinivascu 在下面查看我的答案 【参考方案1】:从您的 ajax 中删除 async:false,
以阻止浏览器等待 ajax 完成
模态关闭时使用以下事件重定向
$('#myModal').on('hidden.bs.modal', function ()
window.location.href = "desired-page.php"
)
【讨论】:
第二部分想在模态关闭时使用 window.location.href 而我没有模态 ID。 模态框的关闭按钮需要点击事件【参考方案2】:您可以在模态中创建一个按钮,然后在该按钮单击事件中,首先隐藏模态并调用 ajax 调用。 window.location.href
在 html 表单中不起作用。要使window.location.href
工作,您可以将提交按钮移出表单。
要成功打开模态,请遵循以下两种方法之一。
.done(function()
$("#yourmodal").modal();
);
或者
success: function(data)
$("#yourmodal").modal();
要停止 ajax 调用,直到模态隐藏使用以下。将您的 ajax 调用放在一个函数中,例如“submitForm()”。在下面调用它。
$('#yourmodal').on('hidden.bs.modal', function (e)
// do something...
)
【讨论】:
modal is being open ajax success 意思是说我需要在success方法里面打开modal 编辑了帖子试试可能对你有帮助 modal 已经被 showalert(data.a) 打开;我需要停止表单,直到模式打开并且在该浏览器期间应该不会卡住。以上是关于停止提交表单,直到在 ajax 中打开模式的主要内容,如果未能解决你的问题,请参考以下文章