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，则可以使用新的form属性：

<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;
});

只需在按钮上绑定click事件。