Home submit form with button outside form using ajax
Reply: 3

submit form with button outside form using ajax

geogrow
1#
geogrow Published in 2018-02-14 08:30:01Z

I try to post a form using ajax the current code does not really work. When I press the save button the form get submitted n + 1 times. i.e After refreshing the page it submit once, next time I submit two form get submitted, third time... etc.

I have spend a lot of time researching this already (2 days) and I have not found a questions quite similar to what I am asking.

I am on a steep learning curve here so I hope someone can point out to me what I am doing wrong.

I think I might have mixed something up. The steps up to submit is.

  1. Form values is being filled in.
  2. A button is pressed to show a modal to confirm to submit the form (The submit button is actually inside this modal and not inside the form itself).
  3. Form is submitted.

$('#confirmYes').click(function() {
  $('#confirm-object').modal('hide'); // close confirm modal
  $('#newForm').submit(function (e) {
    e.preventDefault();
    let formData = $(this).serialize();
    
    $.post({
      type: 'POST',
      url: '/api/pois/',
      data: formData
    })
<form id="newForm">
  <input type="text" id="name" name="name">
  <input type="text" id="company" name="company">
</form>
    
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  <button type="submit" class="btn btn-success" form="newForm" id="confirmYes">Save</button>
</div>

Rory McCrossan
2#
Rory McCrossan Reply to 2018-02-14 08:33:42Z

The issue is because you are creating a new submit event handler in every click. From the description of what you want to do, you instead need to create a single submit handler when the page loads, and trigger it when the button is clicked. Something like this:

$('#newForm').submit(function(e) { // handle the submit event
  e.preventDefault();
  let formData = $(this).serialize();

  $.post({
    type: 'POST',
    url: '/api/pois/',
    data: formData
  })
})

$('#confirmYes').click(function() {
  $('#confirm-object').modal('hide');
  $('#newForm').submit(); // trigger the submit event
});
Zenoo
3#
Zenoo Reply to 2018-02-14 08:32:23Z

Simply remove the $('#newForm').submit(function (e) {}); :

.submit(function (e) {}) is creating an event handler for the submit event of your form, it's not submitting it.

$('#confirmYes').click(function() {
  $('#confirm-object').modal('hide'); // close confirm modal

  let formData = $('#newForm').serialize();

  $.post({
    type: 'POST',
    url: '/api/pois/',
    data: formData
  });
});
Om Agrawal
4#
Om Agrawal Reply to 2018-02-14 08:47:51Z

$('#confirmYes').click(function() {

  let formData = $('#newForm').serialize();
  $.post({
  type: 'POST',
  url: '/api/pois/',
  data: formData
});
);
<form id="newForm">
  <input type="text" id="name" name="name">
  <input type="text" id="company" name="company">
</form>
    
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  <button type="button" class="btn btn-success" id="confirmYes">Save</button>
</div>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.301766 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO