模态中的表单不会使用 jQuery 提交答案

【问题标题】：form inside modal won't submit with jQuery模态中的表单不会使用 jQuery 提交
【发布时间】：2014-11-09 23:52:47
【问题描述】：

我在引导模式中有一个表单，我想通过 Ajax 请求提交该表单。我密切关注this post。出于某种原因，我无法让表单实际提交。这是我的模态的 HTML。

<div id="modal-close" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h3 id="myModalLabel">Edit Introduction</h3>
</div>

<div class="modal-body">
 <form id="modal-form-close" method="post">
  <input type="hidden" name="event_timestamp" value="{{event.timestamp}}">
  <input type="hidden" name="event_desc" value="{{event.desc}}">
  <input type="hidden" name="status"  value="closed">
  <input type="text" name="resolution"  value="">
 </form>
</div>

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

这是我的 JavaScript：

<script>
$(function(){
$('#modal-form-close').on('submit', function(e){
  e.preventDefault();
  $.ajax({
          url: '/events/edit/{{event.event_id}}/script',
          data: $('#modal-form-close').serialize(),
          type: 'POST',
          success: function(data){
              alert('successfully submitted')},
          error: function(data){
              alert('something went wrong')
          }
     });
});
});
</script>

使用这种方式编写的 javascript，当我按下提交表单时，什么也没有发生。但是，如果我将函数更改为 .on('click')，一切都会按预期工作。我错过了什么？

【问题讨论】：

您的表单中的type="submit" 字段在哪里？如果有type ="submit" 的字段，jquery 将自动触发表单提交，或者您必须手动使用click 在您的情况下..这是工作..这有帮助吗？
是否可以使用最后输入的文本提交 ??????????????。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

找到答案here。

我需要将“点击”动作连接回提交按钮。

$('button#submit').on('click', function(e){

并在提交按钮上添加一个 id=submit

<button id="submit" class="btn btn-primary" data-dismiss="modal">Save changes</button>

令人惊讶的是，您可以从堆栈溢出中获取复制粘贴代码的程度。

【讨论】：

惊人的......还是可怕的？
两者，但我想它实际上更可怕：/

【解决方案2】：

尝试在你的按钮中添加这种类型

<button type="submit" class="btn btn-primary" data-dismiss="modal" id="modal-close-submit">Save changes</button>

【讨论】：

【解决方案3】：

我这样做：

给表格一个 ID <form id="submit_modal">
制作一个按钮type="button" 并告诉他点击onClick="document.getElementById('submit_modal').submit();" 时要做什么。所以提交按钮看起来像这样：

<button type="button" class="btn btn-primary" onClick="document.getElementById('submit_modal').submit();">Submit</button>

【讨论】：