如何在表单提交时停止多个bootstrap模式打开

Question

我有一个包含多个表单的页面，它们在模态窗口中打开供用户填写。

问题是，当用户提交表单（成功或错误）时，所有其他模态窗口都会打开，而不仅仅是正在填写的窗口。

提交页面重新加载，所以我有jQuery脚本打开模式以显示错误或成功消息。

我试图给每个模态一个特定的ID，但是当表单提交时.modal（'show'）;似乎导致所有模态都打开。

我该如何解决这个问题？关于修复问题和清理我的Jquery代码的任何建议都将非常感激。

这是我的标记：

    <!-- Course Details -->
    <div>

    <!-- Heading -->
    <h2>An introduction to physiotherapy for the geriatric patient</h2>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#an-introduction-to-physiotherapy-for-the-geriatric-patient">
      Register Interest
    </button>

    <!-- Modal -->
    <div class="modal fade" id="an-introduction-to-physiotherapy-for-the-geriatric-patient" tabindex="-1" role="dialog" aria-labelledby="an-introduction-to-physiotherapy-for-the-geriatric-patientLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header br-lblue">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="an-introduction-to-physiotherapy-for-the-geriatric-patient">"An introduction to physiotherapy for the geriatric patient" Booking Form</h4>
          </div>
          <div class="modal-body" id="form_an-introduction-to-physiotherapy-for-the-geriatric-patient">
            <form id="form3_cpd_course_signup" action="/continued-professional-development/" method="post">
                <div class="form-group">
                    <input id="form3_name" name="name" class="form-control" placeholder="First Name" type="text" required="required" />
                </div>
                <div class="form-group">
                    <input id="form3_email" name="email" class="form-control" placeholder="Type your email" type="email" required="required" />
                </div>
              <div class="modal-footer">
                <input id="form3_submit" name="submit" class="btn btn-danger pull-left" value="Send" type="submit" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- End Modal -->
</div>

<!-- Course Details -->
<div>

    <!-- Heading -->
    <h2>Tissue Repair with Professor Tim Watson</h2>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#an-introduction-to-physiotherapy-for-the-geriatric-patient">
      Register Interest
    </button>

    <!-- Modal -->
    <div class="modal fade" id="tissue-repair-with-professor-tim-watson" tabindex="-1" role="dialog" aria-labelledby="tissue-repair-with-professor-tim-watsonLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header br-lblue">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="tissue-repair-with-professor-tim-watson">"Tissue Repair with Professor Tim Watson" Booking Form</h4>
          </div>
          <div class="modal-body" id="form_tissue-repair-with-professor-tim-watson">
            <form id="form3_cpd_course_signup" action="/continued-professional-development/" method="post">
                <div class="form-group">
                    <input id="form3_name" name="name" class="form-control" placeholder="First Name" type="text" required="required" />
                </div>
                <div class="form-group">
                    <input id="form3_email" name="email" class="form-control" placeholder="Type your email" type="email" required="required" />
                </div>
              <div class="modal-footer">
                <input id="form3_submit" name="submit" class="btn btn-danger pull-left" value="Send" type="submit" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- End Modal -->
</div>

以下是页面底部的脚本：

<script>
    $(document).ready(function(){
        $('form#form_an-introduction-to-physiotherapy-for-the-geriatric-patient .required').attr('required', 'required');  

        var error = $('#an-introduction-to-physiotherapy-for-the-geriatric-patient .error').html(); 
        var success = $('#an-introduction-to-physiotherapy-for-the-geriatric-patient .success').html();  

        if (error != null) { 
            $('#an-introduction-to-physiotherapy-for-the-geriatric-patientLabel').empty().text('Error Sending Registration'); 
        }

        if (success != null) {
            $('#an-introduction-to-physiotherapy-for-the-geriatric-patientLabel').empty().text('Registration Delivered');
        } 

        if ((error != null) || (success != null)) { $('#an-introduction-to-physiotherapy-for-the-geriatric-patient').modal('show'); } 
    });
</script>
<script>
    $(document).ready(function(){
        $('form#form_tissue-repair-with-professor-tim-watson .required').attr('required', 'required');  

        var error = $('#tissue-repair-with-professor-tim-watson .error').html(); 
        var success = $('#tissue-repair-with-professor-tim-watson .success').html();  

        if (error != null) { 
            $('#tissue-repair-with-professor-tim-watsonLabel').empty().text('Error Sending Registration'); 
        }

        if (success != null) {
            $('#tissue-repair-with-professor-tim-watsonLabel').empty().text('Registration Delivered');
        } 

        if ((error != null) || (success != null)) { $('#tissue-repair-with-professor-tim-watson').modal('show'); } 
    });
</script>

Answer 1

你需要将你的javascript放在一个document.ready开始，然后我根据他们从哪个dom元素命名错误和成功变量。这应该对你有帮助。

  $(document).ready(function(){
    var error = $('#an-introduction-to-physiotherapy-for-the-geriatric-patient .error').html(); 
    var success = $('#an-introduction-to-physiotherapy-for-the-geriatric-patient .success').html();  
    var tissueError = $('#tissue-repair-with-professor-tim-watson .error').html(); 
    var tissueSuccess = $('#tissue-repair-with-professor-tim-watson .success').html();  

    if (error != null) { 
        $('#an-introduction-to-physiotherapy-for-the-geriatric-patientLabel').empty().text('Error Sending Registration'); 
    }

    if (success != null) {
        $('#an-introduction-to-physiotherapy-for-the-geriatric-patientLabel').empty().text('Registration Delivered');
    } 

    if ((error != null) || (success != null)) { $('#an-introduction-to-physiotherapy-for-the-geriatric-patient').modal('show'); } 

    $('form#form_tissue-repair-with-professor-tim-watson .required').attr('required', 'required');  


    if (tissueError != null) { 
        $('#tissue-repair-with-professor-tim-watsonLabel').empty().text('Error Sending Registration'); 
    }

    if (tissueSuccess != null) {
        $('#tissue-repair-with-professor-tim-watsonLabel').empty().text('Registration Delivered');
    } 

    if ((tissueError != null) || (tissueSuccess != null)) { $('#tissue-repair-with-professor-tim-watson').modal('show'); } 
  });