Javascript 表单提交时关闭引导模式

我有一个引导模式对话框，其中包含一个表单。模式对话框包含提交和取消按钮。现在在

submit

按钮上单击表单已成功提交，但模式对话框未关闭。这是我的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>

拯救
接近

---

有人知道怎么做吗？

给id提交按钮

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

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

保存
$（'#btnSave'）。单击（函数（）{
$（'StudentModal'）.modal（'hide'）；
});

你还忘了关闭最后一个分区

</div>

---

希望这有帮助。

添加与关闭按钮相同的属性：

data-dismiss="modal"

e、 g

---

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

1） 将数据添加到提交按钮，即

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

使用该代码

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

---

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

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

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

您可以使此代码更简短

---

如果有人找到了e.preventdefault的解决方案，请告诉我们，既不要添加

data dismission=“modal”

，也不要使用

$（“#modal”）。javascript中的modal（“hide”）

对我很有效。当然他们关闭了模式，但是ajax请求也没有发送

---

相反，在ajax成功后，我再次呈现了包含modals的部分内容（我使用的是RubyonRails）。我还必须从body标记中删除

“modal open”

类。这基本上重置了模态。我认为类似的情况是，在成功的ajax请求删除并添加回modals时进行回调也可以在其他框架中工作。

如果您的modal有一个取消按钮（否则创建一个隐藏的关闭按钮）。您可以在此按钮上模拟单击事件，以便关闭表单。 i在组件中添加一个视图子对象

export class HelloComponent implements OnInit {

@ViewChild('fileInput') fileInput:ElementRef;

在关闭按钮中添加文件输入

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

---

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

尝试以下代码

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

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

---

我也在使用rails和ajax，我也遇到了同样的问题。只要运行这个代码

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

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

---

这对我来说很有效，但我也尝试在不使用jQuery的情况下修复它

我也遇到了同样的问题，并最终通过以下代码实现：

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

#此处输入的表单字段
函数提交表单（）{
document.getElementById（'friend_email_form'）.submit（）；
}

---

所选答案对我无效。

使用此选项可同时提交和关闭模式

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

---

如果不想使用jQuery，请将按钮类型设置为普通按钮，并添加指向要执行的函数的单击侦听器，然后将表单作为参数发送进来。按钮如下所示：

保存更改

---

如果使用此方法，请记住从表单div中删除：

（ngSubmit）=“yourSubmitFunction（yourForm）”

。

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

保存

如果任何人不希望使用jQuery，在Bootsrap 5.0中，您现在应该使用数据管理信息系统，例如：

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

提交

或

提交

@Lara点击事件中会出现吗？不会，点击事件也不会太大..相关html iposted@Lara我贴了另一个答案，试试看，哪一个？css选择器是否正确？答案中的任何一个建议都肯定有效。这确实会关闭模式对话框，但在我的情况下，不会触发要提交的模式中的内部表单。只需在按钮上添加数据取消将不会提交它。添加数据取消将导致模式在提交之前关闭，并阻止提交。所以这并不能解决问题。这里给出的jQuery与公认的答案相同-如果你阅读了所有的评论-但是这更容易复制。如果按钮类型是

'button'

，那么你可以

submit（）

，然后

data dismission

。这几乎是正确的，但不要从事件处理程序函数返回false，因为这与在事件对象上调用

preventDefault（）

和

stopPropagation（）

相同。调用

preventDefault（）

将停止提交，这不是此处所需的结果。这也是为什么数据删除ATTILB不起作用的原因。Bootstrap模式JS添加的事件也在事件上调用了EngultDebug（），而该按钮应该是表单的ID，而不是按钮（见上面的注释）——如果使用按钮上的事件，使用点击事件。也考虑调用<代码>。代码>而不是“切换”，否则，如果您的表单也可以在模式不可见的情况下提交，则在触发提交事件时将显示模式。答案现在在您的评论视图中更新。。如果缺少什么，请与我分享。。Thanks@othp你能按你建议的方式编辑代码吗？因为它现在似乎没有包括你所有的评论，我也不知道自己该怎么做，请不要发布。如果问题是重复的，那么标记为重复关闭它们。。。最好说“在JQuery中”在提交时添加数据确实会关闭模式，但它会阻止将对象保存到数据库中。我尝试过，我搜索过，但您的概念是唯一的，最适合我

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

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

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