停止表单提交，直到在 ajax 中打开模态

我正在从表单和提交按钮上获取数据，如果数据无效，则返回false，如果数据有效，则通过ajax在其成功方法中发送电子邮件，显示已发送或不发送的模式，我希望window.location.href在模态被隐藏后更改表单提交，甚至在显示模态之前，所以我使用event.preventdefault阻止它提交，但现在有两个问题

浏览器在模态打开之前会陷入困境
在模式窗口之后，位置未更改。

这是我的提交按钮代码

<input type="submit"  class="button btn btn-primary" onclick ="return 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 中删除async:false,以阻止浏览器等待 ajax 完成

使用以下事件在模式关闭时重定向

$('#myModal').on('hidden.bs.modal', function () {
   window.location.href = "desired-page.php"
})

您可以在模态中创建按钮，并在该按钮单击事件中，首先隐藏模态并调用 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...
    })

相关内容

最新更新

热门标签：