Submit HTML form using javascript but send it through ajax

Question

Is it possible to submit a form using form.submit() and making the submission go through ajax instead of redirecting the url?

Here's what I have:

var form = document.form

form.onsubmit = function() {
  var params = {
    type: "POST",
    url: form.action
  }
  $.ajax(params).then(function(resp) {
     // handle response
  })
}
form.submit()

However the submission does not hit the callback and instead redirects the browser to the form.action url. How can I avoid the redirection and submit via ajax?

Why do you need to call form.submit() if you want to handle it manually? — Jeto
– Jeto, Commented Apr 9, 2019 at 19:19
did you try onsubmit="return false" ? on form tag properties — errorau
– errorau, Commented Apr 9, 2019 at 19:21
@Jeto i'm writing an extension and for some reason the site i'm writing it for won't accept it and returns an empty response without hitting form.submit() — user2954587
– user2954587, Commented Apr 9, 2019 at 19:33
You want to execute ajax request on form action and at the end submit the form too? Why? — Marios Nikolaou
– Marios Nikolaou, Commented Apr 9, 2019 at 20:36

Jeto · Accepted Answer · 2019-04-09 19:32:51Z

Just don't call form.submit() and execute your code directly:

var form = document.getElementById('form');

var params = {
  type: 'GET',
  url: form.action
}
$.ajax(params).then(function (resp) {
  console.log('ajax call successful');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" action="https://jsonplaceholder.typicode.com/todos/1">
</form>

If you already have a form.onsubmit handler and absolutely need to use it, just call it (looks a bit ugly, but does the job):

var form = document.getElementById('form');

form.onsubmit = function () {
  var params = {
    type: 'GET',
    url: form.action
  }
  $.ajax(params).then(function (resp) {
    console.log('ajax call successful');
  });
};

form.onsubmit();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" action="https://jsonplaceholder.typicode.com/todos/1">
</form>

Note: changed the verbs to GET for the purpose of these samples.

user8979341 · Accepted Answer · 2019-04-09 19:22:24Z

0

You need to return false at the end of your function.

return: false

Otherwise, it will submit the form to the specified URL in the action.

answered Apr 9, 2019 at 19:22

user8979341

Comments

charlietfl · Accepted Answer · 2019-04-09 19:35:36Z

0

While calling native submit() will bypass event listeners, since you are already using jQuery you could use jQuery submit listener and prevent it when event is triggered programatically

$(form).on('submit',function(e) {
  e.preventDefault()
  var params = {
    type: "POST",
    data: $(this).serialize(),
    url: this.action
  }
  $.ajax(params).then(function(resp) {
     // handle response
  })

// trigger jQuery submit
}).submit()

answered Apr 9, 2019 at 19:35

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Submit HTML form using javascript but send it through ajax

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related