形式内部模态赢得't使用jQuery提交

form inside modal won't submit with jQuery

本文关键字：使用 jQuery 提交 内部 模态      更新时间：2023-09-26

我在引导模式中有一个表单，我想通过Ajax请求提交它。我一直在密切关注这篇文章。由于某种原因，我无法实际提交表格。这是我的模态的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'），事情就会如预期的那样工作。我错过了什么？

在这里找到了答案。

我需要将"点击"操作连接回提交按钮。

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

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

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

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

尝试在按钮中添加此类型

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

我这样做：

  1. 给表单一个ID <form id="submit_modal">
  2. 制作一个按钮type="button"，并告诉他单击onClick="document.getElementById('submit_modal').submit();"时要做什么。因此，提交按钮将如下所示：

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

相关文章：