JavaScript code to stop form submission

Question

One way to stop form submission is to return false from your JavaScript function   When the submit button is clicked  a validation function is called  I have a case in form validation  If that condition is met I call a function named returnToPreviousPage     function returnToPreviousPage         window history back        I am using JavaScript and Dojo Toolkit   Rather going back to the previous page  it submits the form  How can I abort this submission and return to the previous page

User · Answer

Use prevent default  Dojo Toolkit  dojo connect form   onsubmit   function evt        evt preventDefault        window history back          jQuery      form   submit function  evt        evt preventDefault        window history back          Vanilla JavaScript  if  element addEventListener        element addEventListener  submit   function evt            evt preventDefault            window history back           true     else       element attachEvent  onsubmit   function evt           evt preventDefault            window history back

User · Answer

Just use a simple button instead of a submit button  And call a JavaScript function to handle form submit    lt input type  button  name  submit  value  submit  onclick  submit form      gt    Function within a script tag   function submit form         if  conditions            document forms  myform   submit              else           returnToPreviousPage              You can also try window history forward -1

User · Answer

Hemant and Vikram s answers didn t quite work for me outright in Chrome   The event preventDefault    script prevented the the page from submitting regardless of passing or failing the validation   Instead  I had to move the event preventDefault    into the if statement as follows       if check if your conditions are not satisfying              event preventDefault        alert  validation failed false        returnToPreviousPage        return false            alert  validations passed        return true          Thanks to Hemant and Vikram for putting me on the right track

User · Answer

Lets say you have a form similar to this   lt form action  membersDeleteAllData html  method  post  gt       lt button type  submit  id  btnLoad  onclick  confirmAction event    gt ERASE ALL DATA lt  button gt   lt  form gt    Here is the javascript for the confirmAction function   lt script type  text javascript  gt      function confirmAction e                var confirmation   confirm  Are you sure about this                if   confirmation                        e preventDefault                 returnToPreviousPage                       return confirmation          lt  script gt    This one works on Firefox  Chrome  Internet Explorer edge   Safari  etc   If that is not the case let me know

User · Answer

I would recommend not using onsubmit and instead attaching an event in the script   var submit   document getElementById  submitButtonId    if  submit addEventListener      submit addEventListener  click   returnToPreviousPage     else     submit attachEvent  onclick   returnToPreviousPage       Then use preventDefault    or returnValue   false for older browsers    function returnToPreviousPage  e      e   e    window event       validation code       if invalid   if  e preventDefault        e preventDefault        else       e returnValue   false

User · Answer

You can use the return value of the function to prevent the form submission   lt form name  myForm  onsubmit  return validateMyForm     gt     and function like   lt script type  text javascript  gt  function validateMyForm       if check if your conditions are not satisfying           alert  validation failed false        returnToPreviousPage        return false         alert  validations passed      return true     lt  script gt    In case of Chrome 27 0 1453 116 m if above code does not work  please set the event handler s parameter s returnValue field to false to get it to work   Thanks Sam for sharing information   EDIT     Thanks to Vikram for his workaround for if validateMyForm   returns false     lt form onsubmit  event preventDefault    validateMyForm     gt    where validateMyForm   is a function that returns false if validation fails  The key point is to use the name event  We cannot use for e g  e preventDefault

User · Answer

The following works as of now  tested in Chrome and Firefox     lt form onsubmit  event preventDefault    validateMyForm     gt    Where validateMyForm   is a function that returns false if validation fails  The key point is to use the name event  We cannot use for e g  e preventDefault

User · Answer

E g if you have submit button on form  inorder to stop its propogation simply write event preventDefault    in the function which is called upon clicking submit button or enter button

User · Answer

Simply do it       lt form gt   lt  -- Your Input Elements -- gt   lt  form gt    and here goes your JQuery    document  on  submit    form   function e       e preventDefault          your code goes here       100  works     return

User · Answer

All your answers gave something to work with   FINALLY  this worked for me   if you dont choose at least one checkbox item  it warns and stays in the same page    lt  DOCTYPE html gt   lt html gt       lt head gt       lt  head gt       lt body gt           lt form name  helloForm  action  HelloWorld  method  GET   onsubmit  valthisform     gt               lt br gt               lt br gt  lt b gt  MY LIKES  lt  b gt               lt br gt              First Name   lt input type  text  name  first name  required gt               lt br   gt              Last Name   lt input type  text  name  last name   required   gt               lt br gt               lt input type  radio  name  modifyValues  value  uppercase  required  required  gt Convert to uppercase  lt br gt               lt input type  radio  name  modifyValues  value  lowercase  required  required  gt Convert to lowercase  lt br gt               lt input type  radio  name  modifyValues  value  asis       required  required  checked  checked  gt Do not convert  lt br gt               lt br gt               lt input type  checkbox  name  c1  value  maths        gt  Maths              lt input type  checkbox  name  c1  value  physics      gt  Physics              lt input type  checkbox  name  c1  value  chemistry    gt  Chemistry              lt br gt                lt button onclick  submit  gt Submit lt  button gt                lt  -- input type  submit  value  submit    -- gt               lt script gt                   lt  ---                 function valthisform                         var checkboxs document getElementsByName  c1                        var okay false                      for var i 0 l checkboxs length i lt l i                              if checkboxs i  checked                                okay true                              break                                                                      if   okay                             alert  Please check a checkbox                            event preventDefault                          else                                                           -- gt               lt  script gt           lt  form gt       lt  body gt   lt  html gt

User · Answer

Base on  Vikram Pudi answer  we can also do like this with pure Javascript   lt form onsubmit  submitForm event   gt       lt input type  text  gt       lt input type  submit  gt   lt  form gt    lt script type  text javascript  gt       function submitForm event           event preventDefault             lt  script gt

User · Answer

Lots of hard ways to do an easy thing    lt form name  foo  onsubmit  return false  gt

[javascript] JavaScript code to stop form submission

Examples related to javascript

Examples related to html

Examples related to forms