web-dev-qa-db-ja.com

Twitter Bootstrap Modal Form Submit

私は最近、Java/jbossを使用してTwitterブートストラップをいじくり回し、モーダルインターフェイスからフォームを送信しようとしました。フォームには非表示フィールドのみが含まれ、表示などは重要ではありません。

フォームはモーダル自体の外部にあり、これがどのように可能かはわかりません

モーダル自体をフォームに追加し、HTML5 form = "form_list"を使用して、フォームをモーダル本文に追加し、jqueryを使用して送信を強制しようとしましたが、何も動作していないようです

以下は、私が必要なものに拡張しようとしたモーダルのサンプルで、OKボタンは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>
jqueryformstwitter-bootstrapmodal-dialogsubmit
16
user1890266

2018年に更新

送信後にモーダルを閉じますか？フォームがモーダルの内部にあるか外部にあるかにかかわらず、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はフォームフィールドを取得して送信します。

$('#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;
         });
      */
});

ブートストラップ3の例

ブートストラップ4の例

27
Zim

この回答は遅れていますが、とにかく誰かに役立つことを願って投稿しています。あなたのように、私はbootstrap modalの外にあるフォームを送信することも困難でした。また、現在のページ。多くの試行錯誤の後、ここに私のために働いた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>

Odom-submitのクラスへの追加に注意してください。もちろん、特定の状況に合った名前を付けることができます。

17
rjacobsen0

古いですが、読者がモーダルの使用方法の完全な例を持っていると便利かもしれません。

私は次のようにします（ 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);
    });
});

モーダルを簡単に処理するために、 eModal を使用することをお勧めします。これにより、bootstrap 3モーダルの基本使用でより高速に移動できます。

2
Mike

シンプル

<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" onclick="event.preventDefault();document.getElementById('your-form').submit();">Save changes</button>
1
Jonh bert

フォームの送信ボタンを非表示にして、モーダルボタンをクリックしたときにトリガーすることにより、何らかの方法でチートを行うこともできます。

0
Robin P