如何在表单提交时禁用popup撤消 [英] How to disable popup dismiss while form is submitting

问题描述

我有一个名为 #registerModal 的弹出窗口，其中我有一个表单，当表单提交发生时，我不希望用户关闭弹出窗口直到显示成功消息，表单提交通过AJAX完成。

 < a data-toggle =modaldata-target =＃registerModalclass =register> GET STARTED< / A> 
 
 
将DIV ID = registerModal 类= 模态衰落模态白色 的tabindex =  -  1 的角色= 对话框 咏叹调-labelledby = registerModalLabel > 
< div class =modal-dialogstyle =margin-top：10％;> 
< div class =modal-content> 
< div class =modal-body> 
< div id =register-success-messageclass =alert alert-success fade in> 
 < strong>成功！< / strong>激活邮件已发送。 
< / div> 
< div class =rowid =register-modal-form> 
< div class =col-sm-8 col-sm-offset-2 register-heading> 
< center>注册< / center> 
< / div> 
< form method =POSTaction =/ user-registerid =register-form> 
< div id =status-message>< / div> 
< div class =col-sm-10 col-sm-offset-1 regsiter-form-fields> 
< input type =textclass =form-control register-fieldsid =first_namename =first_nameplaceholder =First Nameautocomplete =off/> 
< span id =first-name-register-error-messageclass =register-error-message>< / span> 
< / div> 
< div class =col-sm-10 col-sm-offset-1 regsiter-form-fields> 
< input type =textclass =form-control register-fieldsid =second_namename =second_nameplaceholder =Last Nameautocomplete =off/> 
 < / div> 
< div class =col-sm-10 col-sm-offset-1 regsiter-form-fields> 
< input type =textclass =form-control register-fieldsid =register_emailname =emailplaceholder =Emailautocomplete =off/> 
< span id =email-register-error-messageclass =register-error-message>< / span> 
< / div> 
< div class =col-sm-10 col-sm-offset-1 regsiter-form-fields> 
< input type =hiddenname =_ tokenvalue ={{csrf_token（）}}> 
< input name =register-submittype =submitid =register-form-submitclass =btn btn-danger pull-left btn-lg register-buttonvalue =CONTINUE /> 
< / div> 
< / form> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> $（）
 $（'form＃register-form'）。on（'submit'，function（event）{
 $ .ajax（{
 type：POST，
 url ：/ user-register，
 data：{'first_name'：first_name，'second_name'：second_name，'e​​mail'：email}，
 $（＃registerModal）。modal（{ （data）{
} 
  

我在提交时包含静态属性，但它不起作用...

解决方案

如何隐藏jquery modal 关闭按钮并在成功事件触发后显示 ajax

$ b $ （'submit'，function（event）{
$ .ajax（{
type：$'$'$'$' POST，
url：/ user-register，
data：{
'first_name'：first_name，
'second_name'：second_name，
'email '：email
}，
$（＃registerModal）。modal（{
背景：静态
}）;
$（。ui-dialog-titlebar-close）。hide（）;
success：function（data）{
$（。ui-dialog-titlebar-close）。show（）;
}
}）;
}）;

I've a popup with id #registerModal in which I've a form, when the form submit is happening I don't want the user to close the popup until a success message is shown, the form submit is done through AJAX.

<a data-toggle="modal" data-target="#registerModal" class="register">GET STARTED</a>


<div id="registerModal" class="modal fade modal-white" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel">
    <div class="modal-dialog" style="margin-top: 10%;">
        <div class="modal-content">
            <div class="modal-body">
              <div id="register-success-message" class="alert alert-success fade in">
                <a href="#" id="register-alert-close" class="close" data-dismiss="modal" aria-label="close" title="close">×</a>
                <strong>Success!</strong> An activation mail has been sent.
              </div>
              <div class="row" id="register-modal-form">
                <div class="col-sm-8 col-sm-offset-2 register-heading">
                  <center> REGISTER </center>
                </div>
                <form method="POST" action="/user-register" id="register-form">
                  <div id="status-message"></div>
                  <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
                      <input type="text" class="form-control register-fields" id="first_name" name="first_name" placeholder="First Name" autocomplete="off" />
                      <span id="first-name-register-error-message" class="register-error-message"></span>
                  </div>
                  <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
                      <input type="text" class="form-control register-fields" id="second_name" name="second_name" placeholder="Last Name" autocomplete="off" />
                      <span id="second-name-register-error-message" class="register-error-message"></span>
                  </div>
                  <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
                      <input type="text" class="form-control register-fields" id="register_email" name="email" placeholder="Email" autocomplete="off" />
                      <span id="email-register-error-message" class="register-error-message"></span>
                  </div>
                  <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
                      <input type="hidden" name="_token" value="{{ csrf_token() }}">
                      <input name="register-submit" type="submit" id="register-form-submit" class="btn btn-danger pull-left btn-lg register-button" value="CONTINUE" />
                  </div>
                </form>
              </div>
            </div>
        </div>
    </div>
</div>
$('form#register-form').on('submit', function(event) {
$.ajax({
  type: "POST",
  url: "/user-register",
  data: {'first_name': first_name, 'second_name': second_name, 'email': email},
    $("#registerModal").modal({"backdrop": "static"});
       success: function(data) {
}

I've included static property on submit, but it is not working...

解决方案

How about hiding the jquery modal close button and showing it after success event fires for ajax

$('form#register-form').on('submit', function(event) {
    $.ajax({
        type: "POST",
        url: "/user-register",
        data: {
            'first_name': first_name,
            'second_name': second_name,
            'email': email
        },
        $("#registerModal").modal({
            "backdrop": "static"
        });
        $(".ui-dialog-titlebar-close").hide();
        success: function(data) {
            $(".ui-dialog-titlebar-close").show();
        }
    });
});

这篇关于如何在表单提交时禁用popup撤消的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！