Stop form refreshing page on submit

Question

How would I go about preventing the page from refreshing when pressing the send button without any data in the fields   The validation is setup working fine  all fields go red but then the page is immediately refreshed  My knowledge of JS is relatively basic   In particular I think the processForm   function at the bottom is  bad    HTML   lt form id  prospects form  method  post  gt       lt input id  form name  tabindex  1  class  boxsize  type  text  name  name  placeholder  Full name   maxlength  80  value      gt       lt input id  form email  tabindex  2  class  boxsize  type  text  name  email  placeholder  Email   maxlength  100  value      gt       lt input id  form subject  class  boxsize  type  text  name  subject  placeholder  Subject   maxlength  50  value  FORM  Row for OUBC    gt       lt textarea id  form message  class  boxsize  name  message  placeholder  Message   tabindex  3  rows  6  cols  5  maxlength  500  gt  lt  textarea gt        lt button id  form send  tabindex  5  class  btn  type  submit  onclick  return processForm    gt Send lt  button gt       lt div id  form validation  gt           lt span class  form captcha code  gt  lt  span gt           lt input id  form captcha  class  boxsize  type  text  name  form captcha  placeholder  Enter code  tabindex  4  value      gt       lt  div gt       lt div class  clearfix  gt  lt  div gt   lt  form gt    JS    document  ready function          Add active class to inputs     prospects form  boxsize   focus function       this  addClass  hasText            form validation  boxsize   focus function       this  parent   addClass  hasText           Remove active class from inputs  if empty      prospects form  boxsize   blur function     if   this value             this  removeClass  hasText              form validation  boxsize   blur function     if   this value             this  parent   removeClass  hasText                                    START VALIDATION     prospects form   ready function             DEFINE GLOBAL VARIABLES     var valName       form name            valEmail       form email            valEmailFormat          lt  gt             s           lt  gt             s                        0-9  1 3    0-9  1 3    0-9  1 3    0-9  1 3        a-zA-Z -0-9       a-zA-Z  2                valMsg       form message            valCaptcha       form captcha            valCaptchaCode       form captcha code              Generate captcha     function randomgen             var rannumber                  Iterate through 1 to 9  4 times         for ranNum 1  ranNum lt  4  ranNum     rannumber  Math floor Math random   10  toString                 Apply captcha to element         valCaptchaCode html rannumber             randomgen             CAPTCHA VALIDATION     valCaptcha blur function             function formCaptcha                 if   valCaptcha val      valCaptchaCode html                          Incorrect                 valCaptcha parent   addClass  invalid                    return false                else                      Correct                 valCaptcha parent   removeClass  invalid                    return true                                  formCaptcha                    Remove invalid class from captcha if typing     valCaptcha keypress function             valCaptcha parent   removeClass  invalid                     EMAIL VALIDATION  BLUR      valEmail blur function             function formEmail                 if   valEmailFormat test valEmail val     amp  amp  valEmail val                                 Incorrect                 valEmail addClass  invalid                  else                      Correct                 valEmail removeClass  invalid                                    formEmail                    Remove invalid class from email if typing     valEmail keypress function             valEmail removeClass  invalid                     VALIDATION ON SUBMIT         prospects form   submit function             console log  user hit send button                EMAIL VALIDATION  SUBMIT          function formEmailSubmit                 if   valEmailFormat test valEmail val                          Incorrect                 valEmail addClass  invalid                  else                      Correct                 valEmail removeClass  invalid                                    formEmailSubmit                Validate captcha         function formCaptchaSubmit                 if  valCaptcha val       valCaptchaCode html                          Captcha is correct               else                      Captcha is incorrect                 valCaptcha parent   addClass  invalid                    randomgen                                    formCaptchaSubmit                 If NAME field is empty         function formNameSubmit                 if   valName val                                 Name is empty                 valName addClass  invalid                  else                   valName removeClass  invalid                                    formNameSubmit                 If MESSAGE field is empty         function formMessageSubmit                 if   valMsg val                                 Name is empty                 valMsg addClass  invalid                  else                   valMsg removeClass  invalid                                    formMessageSubmit                 Submit form  if all good          function processForm                 if   formEmailSubmit    amp  amp  formCaptchaSubmit    amp  amp  formNameSubmit    amp  amp  formMessageSubmit                           prospects form   attr  action     clients oubc row-for-oubc-send php                        form send   attr  type    submit                    return true                else if   formEmailSubmit                       valEmail addClass  invalid                    return false                else if    formCaptchaSubmit                       valCaptcha parent   addClass  invalid                    return false                else if    formNameSubmit                       valName addClass  invalid                        return false                    else if    formMessageSubmit                           valMsg addClass  invalid                        return false                    else                       return false                                                             END VALIDATION

User · Answer

The best way to do so with JS is using preventDefault   function  Consider the code below for reference  function loadForm        var loginForm   document querySelector  form      Selecting the form     loginForm addEventListener  submit   login        looking for submit    function login e       e preventDefault      to stop form action i e  submit

User · Answer

You can prevent the form from submitting with      prospects form   submit function e        e preventDefault          Of course  in the function  you can check for empty fields  and if anything doesn t look right  e preventDefault   will stop the submit   Without jQuery   var form   document getElementById  myForm    function handleForm event    event preventDefault       form addEventListener  submit   handleForm

User · Answer

function ajax form selector  obj         var form   document querySelectorAll selector        if obj                 var before   obj before   obj before   function   return true             var  success   obj success   obj success  function   return true             for  var i   0  i  lt  form length  i                           var url   form i  hasAttribute  action     form i  getAttribute  action     window location               var  form   form i                form i  submit   function                                  var xhttp   new XMLHttpRequest                     xhttp open  POST   url  true                    var FD   new FormData  form                        prevent submiting twice                    if  form disable     true                       return this                    form disable   true                   if before       false                       return                   xhttp addEventListener  load   function                                           form disable   false                       return  success JSON parse this response                                          xhttp send FD                                       return form      Didn t check how it works  You can also bind this  so it will work like jquery ajaxForm  use it like   ajax form  form         before  function                 alert  submiting form               if return false form shouldn t be submitted            success function data                console log data            0  submit      it return nodes so you can do something like submit i above example  so far from perfection but it suppose to work  you should add error handling or remove disable condition

User · Answer

In my opinion  most answers are trying to solve the problem asked on your question  but I don t think that s the best approach for your scenario      How would I go about preventing the page from refreshing when pressing the send button without any data in the fields    A  preventDefault   does indeed not refresh the page  But I think that a simple require on the fields you want populated with data  would solve your problem    lt form id  prospects form  method  post  gt       lt input id  form name  tabindex  1  class  boxsize  type  text  name  name  placeholder  Full name   maxlength  80  value    required  gt       lt input id  form email  tabindex  2  class  boxsize  type  text  name  email  placeholder  Email   maxlength  100  value    required  gt       lt input id  form subject  class  boxsize  type  text  name  subject  placeholder  Subject   maxlength  50  value  FORM  Row for OUBC  required  gt       lt textarea id  form message  class  boxsize  name  message  placeholder  Message   tabindex  3  rows  6  cols  5  maxlength  500  gt  lt  textarea gt   lt  form gt    Notice the require tag added at the end of each input  The result will be the same  not refreshing the page without any data in the fields

User · Answer

Just found a very simple yet working solution  by removing  lt form gt  lt  form gt  from the section I wanted to prevent from posting and refreshing     lt select id  youId  name  yourName  gt   lt select gt    lt option value  1 lt  option gt   lt option value  2 lt  option gt   lt option value  3 lt  option gt   lt  select gt   lt input id  formStockVal1  type  number  gt  lt br gt  lt br gt   lt form gt    lt button type  reset  id  stockCancel  gt Cancel lt  button gt   lt button type  reset  id  stockConfirm  gt Add lt  button gt   lt  form gt     Here only Buttons submit as they should

User · Answer

Most people would prevent the form from submitting by calling the event preventDefault   function    Another means is to remove the onclick attribute of the button  and get the code in processForm   out into  submit function     as return false  causes the form to not submit  Also  make the formBlaSubmit   functions return Boolean based on validity  for use in processForm     katsh s answer is the same  just easier to digest     By the way  I m new to stackoverflow  give me guidance please

User · Answer

Sometimes e preventDefault    works then developers are happy but sometimes not work then developers are sad then I found solution why sometimes not works  first code sometimes works      prospects form   submit function e        e preventDefault          second option why not work   This doesn t work because jquery or other javascript library not loading properly you can check it in console that all jquery and javascript files are loaded properly or not   This solves my problem  I hope this will be helpful for you

User · Answer

Replace button type to button    lt button type  button  gt My Cool Button lt  button gt

User · Answer

If you want to use Pure Javascript then the following snippet will be better than anything else   Suppose   HTML    lt  DOCTYPE html gt   lt html gt       lt head gt           lt meta charset  utf-8  gt           lt title gt Form Without Submiting With Pure JS lt  title gt           lt script type  text javascript  gt              window onload   function                                           Just Make sure to return false so that your request will not go the server script                                     document getElementById  simple form   onsubmit   function                           After doing your logic that you want to do                       return false                                           lt  script gt       lt  head gt       lt body gt        lt  body gt   lt  html gt   lt form id  simple form  method  post  gt       lt  -- Your Inputs will go here  -- gt       lt input type  submit  value  Submit Me      gt   lt  form gt    Hope so it works for You

User · Answer

For pure JavaScript use the click method instead     lt div id  loginForm  gt       lt ul class  sign-in-form  gt           lt li gt  lt input type  text  name  username   gt  lt  li gt           lt li gt  lt input type  password  name  password   gt  lt  li gt           lt li gt               lt input type  submit  onclick  loginForm    value  click    gt           lt  li gt       lt  ul gt   lt  div gt    lt script gt  function loginForm         document getElementById  loginForm   click       lt  script gt

User · Answer

I hope this will be the last answer    x000D   x000D      the form   submit function e   x000D    e preventDefault   x000D    alert   this  serialize    x000D       var values     this  serialize   x000D       logic     x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt form id  the form  gt  x000D     Label-A  lt input type  text  name  a required gt  lt br gt  x000D     Label-B  lt input type  text  name  b  required gt  lt br gt  x000D     Label-C  lt input type  password  name  c  required gt  lt br gt  x000D     Label-D  lt input type  number  name  d  required gt  lt br gt  x000D      lt input type  submit  value  Save without refresh  gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

lt form onsubmit  quot myFunction event  quot  gt      Name    lt input type  quot text quot   gt       lt input class  quot submit quot  type  quot submit quot  gt     lt  form gt     lt script gt    function myFunction event       event preventDefault          code here        lt  script gt

User · Answer

Add this onsubmit  return false  code    lt form name  formname  onsubmit  return false  gt    That fixed it for me   It will still run the onClick function you specify

User · Answer

One great way to prevent reloading the page when submitting using a form is by adding return false with your onsubmit attribute     lt form action     onsubmit  yourJsFunction   return false  gt       lt input type  text   gt       lt input type  submit   gt   lt  form gt

User · Answer

This problem becomes more complex when you give the user 2 possibilities to submit the form    by clicking on an ad hoc button by hitting Enter key   In such a case you will need a function which detects the pressed key in which you will submit the form if Enter key was hit   And now comes the problem with IE  in any case version 11  Remark    This issue does not exist with Chrome nor with FireFox     When you click the submit button the form is submitted once  fine  When you hit Enter the form is submitted twice     and your servlet will be executed twice  If you don t have PRG  post redirect get  architecture serverside the result might be unexpected    Even though the solution looks trivial  it tooks me many hours to solve this problem  so I hope it might be usefull for other folks   This solution has been successfully tested  among others  on IE  v 11 0 9600 18426   FF  v 40 03   amp  Chrome  v 53 02785 143 m 64 bit   The source code HTML  amp  js are in the snippet  The principle is described there  Warning      You can t test it in the snippet because the post action is not   defined and hitting Enter key might interfer with stackoverflow    If you faced this issue  then just copy paste js code to your environment and adapt it to your context    x000D   x000D     x000D     inForm points to the form x000D      x000D  var inForm   document getElementById  idGetUserFrm    x000D     x000D     IE submits the form twice x000D     To avoid this the boolean isSumbitted is  x000D      1  initialized to false when the form is displayed 4 the first time x000D     Remark  it is not the same event as  body load  x000D      x000D  var isSumbitted   false  x000D   x000D  function checkEnter e    x000D    if  e  amp  amp  e keyCode    13    x000D      inForm submit    x000D         x000D          2  set to true after the form submission was invoked x000D           x000D      isSumbitted   true  x000D      x000D    x000D  function onSubmit      x000D    if  isSumbitted    x000D         x000D        3  reset to false after the form submission executed x000D         x000D      isSumbitted   false  x000D      return false  x000D      x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body gt  x000D   x000D   lt form id  idGetUserFrm  method  post  action  servletOrSomePhp  onsubmit  return onSubmit    gt  x000D     First name  lt br gt  x000D      lt input type  text  name  firstname  value  Mickey  gt  x000D      lt input type  submit  value  Submit  gt  x000D   lt  form gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Just Put return like this    x000D   x000D  function validate   x000D    x000D   x000D    var username document getElementById  username   value  x000D     x000D     if username      x000D       x000D    return false   x000D       x000D     if username length lt 5 amp  amp username length lt 15  x000D       x000D      alert  Length should between 5 to 15 characters    x000D      return false  x000D       x000D      x000D     return true  x000D    x000D  body  x000D   padding  0px  x000D   margin 0px  x000D    x000D   x000D  input  x000D   display  block  x000D   margin-bottom 10px  x000D   height 25px  x000D   width 200px  x000D    x000D   x000D  input type  submit    x000D   margin auto  x000D    x000D   x000D  label  x000D   display block  x000D   margin-bottom 10px  x000D    x000D   x000D  form  x000D    width 500px  x000D    height 500px  x000D    border 1px solid green  x000D    padding 10px  x000D    margin auto  x000D    top 0  x000D    bottom 0  x000D    left 0  x000D    right 0  x000D    position absolute    x000D    x000D   x000D   labels  x000D   width  35   x000D   box-sizing border-box  x000D   display  inline-block  x000D    x000D   x000D   inputs  x000D   width  63   x000D   box-sizing border-box  x000D   padding 10px  x000D   display  inline-block  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D    lt meta charset  UTF-8  gt  x000D    lt title gt FORM VALIDATION lt  title gt  x000D    lt link rel  stylesheet  type  text css  href  style css  gt  x000D   x000D    lt script type  text javascript  src  script js  gt  lt  script gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D    lt form action     gt  x000D     lt div class  labels  gt  x000D      lt label gt Name lt  label gt  x000D      lt label gt Email lt  label gt  x000D     lt  div gt  x000D   x000D     lt div class  inputs  gt  x000D      lt input type  text  name  username  id  username  required gt  x000D      lt input type  text  name  email  id  email  required gt  x000D     lt  div gt  x000D     x000D     lt input type  submit  value  submit  onclick  return validate     gt  x000D    lt  form gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Return true and false from validate    function as per requirement

User · Answer

In pure Javascript  use  e preventDefault    e preventDefault   is used in jquery but works in javascript   document querySelector   buttonclick   addEventListener  click    function e        some code    e preventDefault

User · Answer

Personally I like to validate the form on submit and if there are errors  just return false      form   submit function          var error      if       input   val               error   true            if  error             alert  there are errors            return false              http   jsfiddle net dfyXY

User · Answer

You can use this code for form submission without a page refresh  I have done this in my project     function              myFormName   on  submit  function  e                     ajax                   type   post                   url   myPageName php                   data      myFormName   serialize                    success  function                       alert  Email has been sent                                                   e preventDefault

User · Answer

lt FORM NAME frm1     gt  Name   lt input type textbox name txtName id txtName gt   lt BR gt   lt input type button value  quot Submit quot  onclick Validate   gt      lt Script gt      function Validate              Msg    quot  quot      Check fields         if frm1 txtName value fails this                Msg     quot  n    The Name Field is improper quot               Do the same for the rest of the form          if Msg     quot  quot                 frm1 submit             else               alert  quot Your form has errors n quot    Msg                   lt  SCRIPT gt

User · Answer

The best solution is onsubmit call any function whatever you want and return false after it   onsubmit  xxx xxx    return false

User · Answer

Just use  javascript   in your action attribute of form if you are not using action

User · Answer

buttonID   click function  e              e preventDefault               some logic here

[javascript] Stop form refreshing page on submit

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to forms