フォーム提出時に複数のブートストラップモーダルが開くのを防ぐ方法

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

あなたが開始するために1つのdocument.readyの下であなたのjavascriptを置くことになるでしょう、私はエラーと成功の変数に、彼らが引き出している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'); } 
    });