Jquery Ajax Submit a form when i click a button which not been in the form

Question

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?

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

user400654 · Accepted Answer · 2013-05-24 19:38:15Z

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.net/sEHLf/

Should probably look up browser support for it though.

answered May 24, 2013 at 19:38

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user400654 Over a year ago

If only it were supported more broadly. It appears as though IE10 doesn't support it.

user1823761 · Accepted Answer · 2013-05-24 19:34:40Z

2

Use .trigger() method:

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

References:

.trigger() - jQuery API Documentation

answered May 24, 2013 at 19:34

user1823761

1 Comment

fibi Over a year ago

Sorry but it didn't work. I want also no submit button in the form but only these who is outside the form .

rjg132234 · Accepted Answer · 2013-05-24 19:35:06Z

0

Just do something like this in your jQuery..

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

});

answered May 24, 2013 at 19:35

rjg132234

6403 gold badges10 silver badges21 bronze badges

1 Comment

fibi Over a year ago

Sorry but it didn't work. I want also no submit button in the form but only these who is outside the form .

Maresh · Accepted Answer · 2013-05-24 19:35:14Z

0

$(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.

answered May 24, 2013 at 19:35

Maresh

4,7221 gold badge27 silver badges30 bronze badges

3 Comments

user400654 Over a year ago

But then the form will submit without hitting this handler when the user presses enter on a form input.

Maresh Over a year ago

Well if the button is out of the form, pressing enter won't do anything. And nothing prevents you from binding both event if needed ;)

user400654 Over a year ago

If the button is not in the form, and the input is, pressing enter on the input will submit the form. But yes, you could bind additional events to fix that too.

Collectives™ on Stack Overflow

Jquery Ajax Submit a form when i click a button which not been in the form

4 Answers 4

1 Comment

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related