提出時にブートストラップモーダルウィンドウを表示

Question

ご不便をおかけして申し訳ありません。私はShow Twitter Bootstrap modal on form submitを読んでそこからいくつかのコードをコピー貼り付けましたが、それは助けになりませんでした。

私は私のページに次の動作を実装しようとしている

：

「id_field1」と「id_field2」フィールドが入力された場合、ユーザーがボタンを「提出」押下した場合、その後、フォームが提出され、以下のことがなければなりませんモーダルウィンドウが表示されます：

"[別のページに追加する]または[他のページにリダイレクトしますか？]

他に、単純なアラートが（「id_field1」と「id_field2」フィールドが満たされなければならない）

表示さしかし、私のコードは、現在のフィールドが取り込まれていなかった場合は、モーダルウィンドウをレンダリングし、何を提出していないする必要があります。

HTML

<form method="POST"> 

    <input class="form-control" id="id_field1" name="field1" type="text" required=""> 
    <input class="form-control" id="id_field2" name="field2" type="text" required="">   

    <button type="button" class="btn btn-xl btn-success" data-toggle="modal" data-target="#myModal" id="formsubmit">Add item</button> 
</form> 

<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-sm"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title">Item was successfully added</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Add another?</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Yes</button> 
       <a href="some_url" class="btn btn-primary">No</a> 
      </div> 
     </div> 
    </div> 
</div> 

jQueryの

$(function(){ 
    $("#formsubmit").click(function() { 
     $("form").submit(function(evt){ 

     field1 = $('#id_field1').val(); 
     fiedl2 = $('#id_field2').val(); 

     if((field1 === '') && (field2 === '')){ 
      alert("You must enter tenant's name and phone at least"); 
      evt.preventDefault(); 
     } else { 
      $('#myModal').modal('show'); 
     } 
     }); 
    }); 
}); 

ありがとうございました。

Answer 1

まず、フィールド値を変数に設定する必要があります。

$(function(){ 
$('#formsubmit').click(function() { 
    var1 = $('#id_field1').val(); 
    var2 = $('#id_field2').val(); 
    if((var1 === "") && (var2 === "")) { 
     alert("field1 and field2 must be populated"); 
     return false; 
    } else { 
     $('#myModal').modal('show'); 
    } 
    }); 
}); 

更新されました。