Question

我在bootstrap模式中有一个表单，我想通过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（＆＃39;点击＆＃39;），事情就会按预期工作。我错过了什么？

Answer 1

找到答案here。

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

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

将id = submit添加到提交按钮

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

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

Answer 2

尝试在按钮中添加此类型

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

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

在modal中的表单不会使用jQuery提交

3 个答案: