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="pany" name="pany">
</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>

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="pany" name="pany">
</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>

• javascript
• jquery
• html
• ajax

Share Improve this question Follow edited Feb 14, 2018 at 8:31 Vadim Kotov 8,28488 gold badges5050 silver badges6363 bronze badges asked Feb 14, 2018 at 8:30 geogrowgeogrow 51522 gold badges1111 silver badges2828 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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

$('#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="pany" name="pany">
</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>