送信フォーム上のモーダルブートストラップを開く

Question

ユーザーがフォームを検証したらどのようにモーダルを開くことができますか？ S'inscrire

<div class="modal fade" id="registration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
      <h3 class="modal-title">Merci !</h3> 
      </div> 
     </div> 
     </div> 
    </div> 

フォームが検証されたときにあなたの関数ににこれを追加することができ

Answer 1

をあなたはそれを開くために、モーダルidまたはclassを使用することができますボタン。

//trigger when form is submitted 
$("#submit-button").submit(function(e){ 
    $('#registration').modal('show'); 
    return false; 
}); 

$('#registration').modal('show');がモーダルに表示され、return false;がにページを停止しますデータを投稿するためのフォームを防ぐ： は、その後、あなたがこのjQueryのコードを書くことができますが、このHTML

<form id="submit-button"> 
    //form components 
</form> 

を考えてみましょうリロード。それとも、あなたもこの

$(document).ready(function() { 
    $('#submit-button').on('submit', function(e){ 
     $('#registration').modal('show'); 
     e.preventDefault(); 
    }); 
}); 

e.preventDefault();を行うことができますページのリロードからページを停止します。

Answer 2

：

$('#registration').modal({ 
     show: 'false', 
     backdrop: 'static', 
     keyboard: false 
    }); 

• キーボード虚偽の手段を使用すると、モーダルウォンを逃れる押したとき't が消えました。
• バックグラウンドを静的に設定するとは、ユーザーが マウスをモーダル外にクリックした場合です。モーダルは終了しません。

EDIT

if ($("form button").valid()) { 
     $('#registration').modal({ 
      show: 'false', 
      backdrop: 'static', 
      keyboard: false 
      }); 
}; 

Answer 3

あなたが検証成功でこれを追加することができます。ユーザーが提出する上でクリックしたときに

$("#registration").modal('show');

Answer 4

Ajaxソリューションを使用して、ページを更新せずにフォームを送信します。

リクエストの結果に基づいてモーダルレスポンスを更新することさえできます。

$("#ajaxform").submit(function(e) { 
 

 
    var url = "path/to/your/script.php"; // the script where you handle the form input. 
 

 
    $.ajax({ 
 
    type: "POST", 
 
    url: url, 
 
    data: $("#ajaxform").serialize(), // serializes the form's elements. 
 
    success: function(data) 
 
    { 
 
    //if request successful 
 
    $(".modal-title").text('Request successful'); 
 
    $('#registration').modal('show'); 
 
    }, 
 
    error: function(data) 
 
    { 
 
     //if request unsuccessful 
 
     $(".modal-title").text('Request failed'); 
 
     $('#registration').modal('show'); 
 
    } 
 
    }).done(function() { 
 
    //finally, reinitialise modal text back to default 'merci' 
 
    $(".modal-title").text('merci'); 
 
    }); 
 

 
    e.preventDefault(); // avoid to execute the actual submit of the form. 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST" class="form-group"> 
 
    First Name: <input type="text" name="fname" value="" class="form-control"/> <br/> Last Name: <input type="text" name="lname" value="" class="form-control"/> <br/> Email : <input type="text" name="email" value="" class="form-control"/> <br/> 
 
    <button type="submit" class="btn btn-default">submit</button> 
 
</form> 
 

 
<div class="modal fade" id="registration" tabindex="1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <h3 class="modal-title">Merci !</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>