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

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

4 Answers 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.