javascript - Jquery Ajax Submit a form when i click a button which not been in the form - Stack Overflow

admin管理员组

文章数量:1394986

I have this code:

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

This works with a Submit button inside the form. But now I have a button outside the form:

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

How must I must be the code, that when i clicked the button the button all actions will be work and the form submits?

I have this code:

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

This works with a Submit button inside the form. But now I have a button outside the form:

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

How must I must be the code, that when i clicked the button the button all actions will be work and the form submits?

• javascript
• ajax
• forms
• jquery

Share Improve this question Follow asked May 24, 2013 at 19:32 fibifibi 14911 gold badge77 silver badges1313 bronze badges 1

• $(document).on('click','#roomsendbutton',function(e){..}) solves your problem i guess – Sri Tirupathi Raju Commented May 24, 2013 at 19:35

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

If you're using HTML5, you can use the new form attribute:

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

http://jsfiddle/sEHLf/

Should probably look up browser support for it though.

Use .trigger() method:

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

---

References:

• .trigger() - jQuery API Documentation

Just do something like this in your jQuery..

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

});

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

Just bind the click event on the button.

本文标签： javascriptJquery Ajax Submit a form when i click a button which not been in the formStack Overflow