Prevent form redirect OR refresh on submit

Question

I ve searched through a bunch of pages  but can t find my problem  so I had to make a post   I have a form that has a submit button  and when submitted I want it to NOT refresh OR redirect  I just want jQuery to perform a function   Here s the form    lt form id  contactForm  gt       lt fieldset gt           lt label for  Name  gt Name lt  label gt           lt input id  contactName  type  text    gt       lt  fieldset gt        lt fieldset gt           lt label for  Email  gt Email lt  label gt           lt input id  contactEmail  type  text    gt       lt  fieldset gt        lt fieldset class  noHeight  gt           lt textarea id  contactMessage  cols  20  gt  lt  textarea gt           lt input id  contactSend  class  submit  type  submit  onclick  sendContactForm      gt       lt  fieldset gt   lt  form gt           lt small id  messageSent  gt Your message has been sent  lt  small gt    And here is the jQuery   function sendContactForm            messageSent   slideDown  slow        setTimeout      messageSent   slideUp       contactForm   slideUp  slow     2000       I ve tried with and without an action element on the form  but don t know what I m doing wrong  What has annoyed me more is that I have an example that does it perfectly  Example Page  If you want to see my problem live  goto stormink net  my site  and check out the sidebar where it says  Send me and email  and  RSS Subscription   Both are forms that I m trying to get this to work on

User · Answer

It looks like you re missing a return false

User · Answer

In the opening tag of your form  set an action attribute like so    lt form id  contactForm  action     gt

User · Answer

An alternative solution would be to not use form tag and handle click event on submit button through jquery  This way there wont be any page refresh but at the same time there is a downside that  enter  button for submission wont work and also on mobiles you wont get a go button  a style in some mobiles   So stick to use of form tag and use the accepted answer

User · Answer

Just handle the form submission on the submit event  and return false       contactForm   submit function       sendContactForm     return false        You don t need any more the onclick event on the submit button    lt input class  submit  type  submit  value  Send    gt

User · Answer

Here   function submitClick e         e preventDefault             messageSent   slideDown  slow         setTimeout      messageSent   slideUp             contactForm   slideUp  slow     2000        document  ready function             contactSend   click submitClick         Instead of using the onClick event  you ll use bind an  click  event handler using jQuery to the submit button  or whatever button   which will take submitClick as a callback  We pass the event to the callback to call preventDefault  which is what will prevent the click from submitting the form

User · Answer

If you want to see the default browser errors being displayed  for example  those triggered by HTML attributes  showing up before any client-code JS treatment     lt input name  o  required  required  aria-required  true  type  text  gt    You should use the submit event instead of the click event  In this case a popup will be automatically displayed requesting  Please fill out this field   Even with preventDefault      form   on  submit   function event       event preventDefault       my form treatment this  event          - gt  this will show up a  Please fill out this field  pop-up before my form treatment   As someone mentioned previously  return false would stop propagation  i e  if there are more handlers attached to the form submission  they would not be executed   but  in this case  the action triggered by the browser will always execute first  Even with a return false at the end   So if you want to get rid of these default pop-ups  use the click event on the submit button      form input type submit    on  click   function event       event preventDefault       my form treatment this  event          - gt  this will NOT show any popups related to HTML attributes

[javascript] Prevent form redirect OR refresh on submit?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to forms