Don't redirect on submitting form

Question

I have a simple HTML based form like shown below, which keeps refreshing the page on click.

<form id="register" action="#" method="POST"> <div class="input-group"> <input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text"> <input type="hidden" name="form" value="register"> <input type="hidden" name="type" value="websiteregistration"> <span class="input-group-append"> <button type="submit" class="btn btn-light" data-name="register" onclick="formSubmit(this)">Go!</button> </span> </div> </form>

And I am trying to stop it from redirecting when pressing the submit button.

(function($) { function formSubmit(e){ e.preventDefault(); //This will prevent the default click action e.stopPropagation(); var frm = $('#'+ $(this).data('name') +''); $.ajax({ type: frm.attr('method'), url: '(url)', data: frm.serialize(), success: function (data) { console.log('Submission was successful.'); console.log(data); }, error: function (data) { console.log('An error occurred.'); console.log(data); } }); return false; } });

I added return false to stop it from redirecting, aswell as PreventDefault, but the page still refreshes when sending the data (The data is being sent btw).

I also tried to do it with $().submit, but with the same results. (I have hidden the url out of security reasons, but the submit in itself works).

The name-data attribute is used because i have several of the same form on the page and like this I can make it reusable

Listen to submit event of the form instead of click of a button. — Teemu
– Teemu, Commented May 16, 2018 at 19:27
remove action attribute from your form tag and then listen to submit event of the form. — Vinod Kolla
– Vinod Kolla, Commented May 16, 2018 at 19:30

awran5 · Accepted Answer · 2018-05-16 19:37:59Z

Use event not this

formSubmit(event)

And remove the unnecessary codes:

function formSubmit(e){ e.preventDefault(); //This will prevent the default click action var frm = $('#'+ $(this).data('name') +''); $.ajax({ type: frm.attr('method'), url: '(url)', data: frm.serialize(), success: function (data) { console.log('Submission was successful.'); console.log(data); }, error: function (data) { console.log('An error occurred.'); console.log(data); } }); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="register" action="#" method="POST">	<div class="input-group">	<input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text">	<input type="hidden" name="form" value="register">	<input type="hidden" name="type" value="websiteregistration">	<span class="input-group-append">	<button type="submit" class="btn btn-light" data-name="register" onclick="formSubmit(event)">Go!</button>	</span>	</div> </form>

Igor Phelype Guimarães · Accepted Answer · 2018-05-16 19:42:57Z

2

Try to delete the type="submit" atribute and change it to type='button' and also change the argument from 'this' to 'event':

<button type="button" class="btn btn-light" data-name="register" onclick="formSubmit(event)">Go!</button>

edited May 16, 2018 at 19:42

answered May 16, 2018 at 19:28

Igor Phelype Guimarães

5563 silver badges16 bronze badges

3 Comments

Ankit Parmar Over a year ago

also, you can remove the e.preventDefault(); and e.stopPropagation(); no need to add these two lines

Igor Phelype Guimarães Over a year ago

try to listen the onsubmit event instead, like 'Teemu' said

fdomn-m Over a year ago

If you remove the type= attribute, it will use the default, which is... wait for ... submit - so you need to specify type='button'

Ankit Parmar · Accepted Answer · 2018-05-16 19:37:08Z

Give the type="button" instead of submit and also, remove the e.preventDefault(); and e.stopPropagation(); no need to add these two lines.

function formSubmit(e){ var frm = $('#'+ $(this).data('name') +''); $.ajax({ type: frm.attr('method'), url: '(url)', data: frm.serialize(), success: function (data) { console.log('Submission was successful.'); console.log(data); }, error: function (data) { console.log('An error occurred.'); console.log(data); } }); return false; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> </head> <body> <form id="register" action="#" method="POST"> <div class="input-group"> <input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text"> <input type="hidden" name="form" value="register"> <input type="hidden" name="type" value="websiteregistration"> <span class="input-group-append"> <button type="button" class="btn btn-light" data-name="register" onclick="formSubmit(this)">Go!</button> </span> </div> </form>	</body>	</html>

Collectives™ on Stack Overflow

Don't redirect on submitting form

3 Answers 3

Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Linked

Related