jQuery：提交表单之前使用Ajax

Question

I'm having a little trouble figuring out how to do an action when submiting a form, but before it is sent. The thing is that the action tag redirects the user to a different site, and I need AJAX to send an email when I click the submit button. The user should be redirected even if AJAX fails.

I read about $.ajax() but I don't understand how to stop the form submition until jQuery gets a response. Is it done automatically?

On another thread I saw that it's recommended to use an input type "button" instead of submit. I know that this would allow me to manuallydo a $(form).submit(); later, giving me better control, but I still strugle to fully understand the previous part.

I know the answer to this is very simple, and I'm probably running in circles over complicating myself!

Thanks for your help!

Answer 1

To prevent form submission until the ajax request completes, you can disable the async option.

$.ajax({
  url: 'my_url.php',
  async:false,
  .....
});

Answer 2

The recommendation you saw elsewhere is exactly what you need to do.

You need to cancel the submission immediately. (by return false ing or by calling e.preventDefault() ) Then, when you get a reply from the server, you can re-submit the form in your AJAX callback.
(just make sure that you don't do the AJAX request again the second time)

Answer 3

You can use the form's onSubmit attribute.

<form action="./something.php" method="post" onSubmit="someFunction();">

If the function returns true the default action takes place, otherwise the default action is prevented.