javascript - 当我单击不在表单中的按钮时，Jquery Ajax 提交表单

Question

我有这个代码：

$(document).on('submit','#roomsend',function(e) {
   var form = $('#roomsend');
   var data = form.serialize();
   $.post('php/roomlist.php', data, function(response) {
      console.log(response);
      $('#power').replaceWith(response);
   });
   return false;
});

这适用于表单内的提交按钮。但现在我在表单外有一个按钮：

<button class="btn btn-success" id="roomsendbutton"><i class="icon-ok"></i> Save</button>

我必须如何成为代码，当我单击按钮时，所有操作都将起作用并且表单提交？

Answer 1

如果您使用的是 HTML5，则可以使用新的表单属性：

<button form="roomsend" type="submit" class="btn btn-success" id="roomsendbutton"><i class="icon-ok"></i> Save</button>

http://jsfiddle.net/sEHLf/

不过，可能应该查找浏览器对它的支持。

Answer 2

使用.trigger()方法：

$('#roomsendbutton').on('click', function () {
    $('#roomsend').trigger('submit');
});

---

参考：

• .trigger()- jQuery API 文档

Answer 3

只需在你的 jQuery 中做这样的事情..

$('#roomsendbutton').click(function(){
     $(your form name).trigger('submit');

});

Answer 4

$(document).on('click','#roomsendbutton',function(e) {
   var form = $('#roomsend');
   var data = form.serialize();
   $.post('php/roomlist.php', data, function(response) {
      console.log(response);
      $('#power').replaceWith(response);
   });
   return false;
});

只需在按钮上绑定点击事件。