web-dev-qa-db-ja.com

閉じるBootstrapモーダルオンフォーム送信

Formを含むBootstrapモーダルがあります。モーダルには、送信、送信ボタンも含まれています。今、私の要件に従って、モーダルの送信ボタンクリックで、フォームは正常に送信されていますが、モーダルは閉じられていません。ここに私のHTMLがあります。

<div class="modal fade" id="StudentModal" tabindex="-1" role="dialog" aria-labelledby="StudentModalLabel" aria-hidden="true" data-backdrop="static">
   <div class="modal-dialog">
      <div class="modal-content">
         <form action="~/GetStudent" class="form-horizontal" role="form" method="post" id="frmStudent">
            <div class="modal-footer">
               <div class="pull-right">
                  <button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Save</button>
                  <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
               </div>
            </div>
         </form>
      </div>
   </div>

それを行う方法..私を助けてください..ありがとう..

javascriptjqueryhtmlformstwitter-bootstrap
29
Lara

そのコードを使用する

 $('#button').submit(function(e) {
    e.preventDefault();
    // Coding
    $('#IDModal').modal('toggle'); //or  $('#IDModal').modal('hide');
    return false;
});
22
Muhammad Fahad

[閉じる]ボタンと同じ属性を追加します。

data-dismiss="modal"

例えば.

<button type="submit" class="btn btn-success" data-dismiss="modal"><i class="glyphicon glyphicon-ok"></i> Save</button>

必要に応じてjQueryを使用することもできます。

$('#frmStudent').submit(function() {

    // submission stuff

    $('#StudentModal').modal('hide');
    return false;
});
14
martincarlin87

送信ボタンにIDを与える

<button id="btnSave" type="submit" class="btn btn-success"><i class="glyphicon glyphicon-trash"></i> Save</button>

$('#btnSave').click(function() {
   $('#StudentModal').modal('hide');
});

また、最後のdivを閉じるのを忘れました。

</div>

お役に立てれば。

10
Kandarp

私はこのコードをうまく動作させますが、フォーム送信モデルボタンを一度開いてモデルを再度開くと、e.preventdefaultは機能ではないと言います..

送信フォームで発生するイベントで以下のコードを使用します

                $('.modal').removeClass('in');
                $('.modal').attr("aria-hidden","true");
                $('.modal').css("display", "none");
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');

このコードをもっと短くすることができます。

e.preventdefaultの解決策が見つかった場合はお知らせください

4
Abhi

次の2つのオプションのいずれかを使用できます。

1）送信ボタンにデータ破棄を追加します。

<button type="submit" class="btn btn-success" data-dismiss="modal"><i class="glyphicon glyphicon-ok"></i> Save</button>

2）JSのように

$('#frmStudent').submit(function() {
    $('#StudentModal').modal('hide');
});
3
Mō Iđɍɨɇƶ

私はRailsとajaxも使用していますが、同じ問題がありました。このコードを実行するだけです

 $('#modalName').modal('hide');

それは私のために働いたが、jQueryを使用せずにそれを修正しようとしています。

1
Hindreen

Javascriptでdata-dismiss="modal"を追加することも$("#modal").modal("hide")を使用することもうまくいかなかった。確実にモーダルを閉じましたが、ajaxリクエストも送信されません。

代わりに、ajaxが成功した後、モーダルを含むパーシャルを再度レンダリングしました（RailsでRubyを使用しています）。また、bodyタグから"modal-open"クラスも削除する必要がありました。これは基本的にモーダルをリセットします。モーダルを削除して追加するためのajaxリクエストが成功したときのコールバックが、他のフレームワークでも機能するはずであると思います。

1
EJ2015

AJAXフォーム送信の結果がモーダルの終了前にモーダルのスコープ外のHTMLに影響する場合、リストされた回答は機能しません。私の場合、結果はグレー表示（フェード）画面で、ページの更新を確認できましたが、ページ要素のいずれとも対話できませんでした。

私の解決策：

$(document).on("click", "#send-email-submit-button", function(e){
    $('#send-new-email-modal').modal('hide')
});

 $(document).on("submit", "#send-email-form", function(e){
    e.preventDefault();
    var querystring = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "sendEmailMessage",
        data : querystring,
        success : function(response) {
            $('#send-new-email-modal').on('hidden.bs.modal', function () {
                $('#contacts-render-target').html(response);
            }
    });
    return false;
});

注：私のモーダルフォームは、既にAJAXを介してレンダリングされた親div内にあったため、イベントリスナーをドキュメントに固定する必要があります。

0
Devon Luongo

モーダルにキャンセルボタンがある場合（そうでない場合は、非表示の閉じるボタンを作成します）。このボタンのクリックイベントをシミュレートして、フォームを閉じることができます。コンポーネントにViewChildを追加します

export class HelloComponent implements OnInit {

@ViewChild('fileInput') fileInput:ElementRef;

閉じるボタンに＃fileInputを追加します

<button class="btn btn-danger" #fileInput id="delete-node" name="button" data-dismiss="modal" type="submit">Cancelar</button>

プログラムでモーダルを閉じたい場合、閉じるボタンでクリックイベントをトリガーします。

this.fileInput.nativeElement.click();
0
Fernando Siqueira

このコードを試してください

$('#frmStudent').on('submit', function() {
  $(#StudentModal).on('hide.bs.modal', function (e) {
    e.preventDefault();
  })
});
0
nnattawat

これを使用して、モーダルを同時に送信して閉じる

$('#form-submit').on('click', function(e){
    e.preventDefault();
    $('#con-close-modal').modal('toggle'); //or  $('#IDModal').modal('hide');
    $('#date-form').submit();
});
0
utkarsh2k2

私は同じ問題を抱えていて、最終的にこのコードで動作するようになりました：

<%=form_with id: :friend_email_form, url: friend_emails_create_path do |f|%>

                      # form fields entered here

<div class="actions">
    <%= f.submit "Send Email", class: 'btn btn-primary', "onclick":"submit_form();", "data-dismiss":"modal"%>
</div>

 <script>
    function submit_form() {
      document.getElementById('friend_email_form').submit();
    }
</script>

選択した答えは私にはうまくいきませんでした。

0
tomb