Question

我有一个包含表单的Bootstrap Modal。 Modal还包含，提交和取消按钮。现在根据我的要求，在提交按钮单击模态，表单正在成功提交但模态未关闭..这是我的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>

怎么做..请帮助我..谢谢..

Answer 1

使用该代码

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

Answer 2

在“关闭”按钮上添加相同的属性：

data-dismiss="modal"

e.g。

<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;
});

Answer 3

提供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>

希望这有帮助。

Answer 4

我使这个代码工作正常但是一旦表单提交模型按钮没有打开模型再说e.preventdefault不是函数..

在提交表格中触发的任何事件上使用以下代码

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

你可以让这段代码更短......

如果有任何机构找到e.preventdefault的解决方案，请告诉我们

Answer 5

您可以使用以下两个选项之一：

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');
});

Answer 6

如果有人不想使用 jQuery，在 Bootsrap 5.0 中，您现在应该使用 data-bs-dismmis 例如:

<button type="submit" class="btn btn-success" data-bs-dismiss="modal">SUBMIT</button>

或

<button type="button" class="btn btn-success" onclick="submitForm()" data-bs-dismiss="modal">SUBMIT</button>

Answer 7

在javascript中添加data-dismiss="modal"或使用$("#modal").modal("hide")都不适合我。当然他们关闭了模态，但也没有发送ajax请求。

相反，我在ajax成功后再次渲染包含模态的部分（我在rails上使用ruby）。我还必须从body标签中删除"modal-open"类。这基本上重置了模态。我认为类似的东西，成功的ajax请求删除和添加模态回调也应该在其他框架中工作。

Answer 8

我也使用rails和ajax，我遇到了同样的问题。只需运行此代码

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

这对我有用，但我也试图在不使用jQuery的情况下修复它。

Answer 9

如果你的模态有一个取消按钮（否则创建一个隐藏的关闭按钮）。您可以在此按钮上模拟单击事件，以便关闭表单。在您的组件中添加 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();

Answer 10

如果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中，因此需要将事件侦听器锚定到文档。

Answer 11

试试此代码

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

Answer 12

我遇到了同样的问题，最终使它与以下代码一起工作：

<%=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>

所选答案对我不起作用。

Answer 13

使用它可以同时提交和关闭模式

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

Answer 14

如果不想使用jQuery，请将按钮键入一个普通按钮，然后添加指向您要执行的功能的点击侦听器，然后将表单作为参数发送。该按钮将如下所示：

<button (click)="yourSubmitFunction(yourForm)" [disabled]="!yourForm.valid" type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>

请记住，如果您使用此方法，请从div表单中删除(ngSubmit)="yourSubmitFunction(yourForm)"。

Answer 15

这对我有用。我在提交按钮中嵌入了一个内联 JavaScript 代码，以在提交时自动单击关闭按钮。我使用关闭按钮的 ID 从 javascript (jQuery) 中引用它。

<button type="submit" class="btn btn-success float-right" onclick="javascript: $('#close-button').click();">Save</button>

关闭Bootstrap模式在表单上提交

15 个答案: