Twitter Bootstrap Modal Form Submit

Question

私は最近、Java/jbossを使用してtwitterのブートストラップを手伝ってきました。私はModalインターフェイスからフォームを送信しようとしていましたが、フォームには隠しフィールドだけが含まれています。ディスプレイ等は重要ではない。

フォームがモーダル自体の外部にある、と私はこれは私がHTML5フォーム= "form_listを使用しようとすると、フォームにモーダル自分自身を追加しようとしました

ことが可能になる方法を見つけ出すことはできません"さらにフォームをモーダルボディに追加し、いくつかのjqueryを使用して送信を強制しますが、何も動作しないようです。

以下は、私が必要としていたものを補強しようとしたサンプルモーダルです。 jquery関数の呼び出しを試みます。

<div class='modal small hide fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> 
     <div class='modal-header'> 
      <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button> 
      <h3 id='myModalLabel'>Delete Confirmation</h3> 
     </div> 
     <div class='modal-body'> 
      <p class='error-text'>Are you sure you want to delete the user?</p> 
     </div>"); 
     <div class='modal-footer'> 
     <button class='btn btn-danger' data-dismiss='modal' aria-hidden='true'>Cancel</button> 
     <button class='btn btn-success' data-dismiss='modal'>Ok</button> 
     </div> 
    </div> 

Answer 1

提出後にモーダルを終了しますか？内部のフォームでも外部でも、フォームを送信するためにjQuery ajaxを使用できるはずです。ここで

モーダル内部形式と例です。

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <form id="myForm" method="post"> 
      <input type="hidden" value="hello" id="myField"> 
      <button id="myFormSubmit" type="submit">Submit</button> 
     </form> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

とjQueryのAJAXフォームフィールドを取得し、それを提出する..

Bootplyの作業

$('#myFormSubmit').click(function(e){ 
     e.preventDefault(); 
     alert($('#myField').val()); 
     /* 
     $.post('http://path/to/post', 
     $('#myForm').serialize(), 
     function(data, status, xhr){ 
      // do something here with response; 
     }); 
     */ 
}); 

：http://bootply.com/59864

Answer 2

この回答は遅れていますが、とにかく誰かを助けることを期待して投稿しています。あなたのように、ブートストラップモーダルの外にあるフォームを送信するのも難しかったし、現在のページの一部だけでなく、新しいページをロードしたかったので、私はajaxを使いたくなかった。多くの試行錯誤の後、ここで私のために働いたjQueryのです：

$(function() { 
    $('body').on('click', '.odom-submit', function (e) { 
     $(this.form).submit(); 
     $('#myModal').modal('hide'); 
    }); 
}); 

<div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary odom-submit">Save changes</button> 
</div> 

お知らせのクラスに加えオドム-提出私はモーダルフッターにこれをしなかった、この作品を作るために。あなたはもちろん、あなたの特定の状況に合った名前をつけることができます。

Answer 3

古いものですが、モーダルをどのように使用するかの完全な例が読者に役立つかもしれません。

私は（working example jsfiddle）以下のようにします：

$('button.btn.btn-success').click(function(event) 
{ 

event.preventDefault(); 

$.post('getpostcodescript.php', $('form').serialize(), function(data, status, xhr) 
    { 
     // do something here with response; 
     console.info(data); 
     console.info(status); 
     console.info(xhr); 
    }) 
    .done(function() { 
     // do something here if done ; 
     alert("saved"); 
    }) 
    .fail(function() { 
     // do something here if there is an error ; 
     alert("error"); 
    }) 
    .always(function() { 
     // maybe the good state to close the modal 
     alert("finished"); 
     // Set a timeout to hide the element again 
     setTimeout(function(){ 
      $("#myModal").hide(); 
     }, 3000); 
    }); 
}); 

をモーダルで簡単に対処するために、私はより速く、ブートストラップ3つのモーダルの基本使用上に行くことを許可eModalを、使用することをお勧めします。

Answer 4

フォームに送信ボタンを隠し、モーダルボタンをクリックしたときにトリガすることで、何らかの方法で不正行為をすることもできます。