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

submit form with button outside form using ajax

user1832
1#
user1832 Published in May 23, 2018, 8:12 pm

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>

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO