提问者:小点点

在ajax中打开模式之前停止提交表单


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

>

  • 浏览器在模态打开之前一直处于稳定状态

    模态 window.location 后没有改变。

    这是我的提交按钮代码

    <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.prpreventdefault、event.soppropagation,但我找不到任何简单的方法从ajax成功函数SendEmail调用返回true。


  • 共2个答案

    匿名用户

    从 ajax 中删除 async:false,以阻止浏览器等待 ajax 完成

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

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

    匿名用户

    你可以在模式下创建一个按钮,在按钮点击事件中,首先隐藏模式和ajax调用。和< code > window . location . href 在html表单中不起作用。要使< code > window . location . href 工作,您可以将提交按钮移出表单。

    要成功打开模式,请遵循以下两种方法之一。

    .done(function() {
      $("#yourmodal").modal();
    });
    

    或者

    success: function(data) {
            $("#yourmodal").modal();
        }
    

    要在模态隐藏之前停止ajax调用,请使用以下命令。将ajax调用放在函数中,例如“submitForm()”。在下面称之为。

     $('#yourmodal').on('hidden.bs.modal', function (e) {
          // do something...
        })