How to prevent form from being submitted

Question

I have a form that has a submit button in it somewhere   However  I would like to somehow  catch  the submit event and prevent it from occurring   Is there some way I can do this   I can t modify the submit button  because it s part of a custom control

User · Answer

To follow unobtrusive JavaScript programming conventions, and depending on how quickly the DOM will load, it may be a good idea to use the following:

<form onsubmit="return false;"></form>

Then wire up events using the onload or DOM ready if you're using a library.

_x000D_

$(function() {_x000D_
    var $form = $('#my-form');_x000D_
    $form.removeAttr('onsubmit');_x000D_
    $form.submit(function(ev) {_x000D_
        // quick validation example..._x000D_
        $form.children('input[type="text"]').each(function(){_x000D_
            if($(this).val().length == 0) {_x000D_
                alert('You are missing a field');_x000D_
                ev.preventDefault();_x000D_
            }_x000D_
        });_x000D_
    });_x000D_
});

_x000D_

label {_x000D_
    display: block;_x000D_
}_x000D_
_x000D_
#my-form > input[type="text"] {_x000D_
    background: cyan;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">_x000D_
    <label>Your first name</label>_x000D_
    <input type="text" name="first-name"/>_x000D_
    <label>Your last name</label>_x000D_
    <input type="text" name="last-name" /> <br />_x000D_
    <input type="submit" />_x000D_
</form>

_x000D_

Also, I would always use the action attribute as some people may have some plugin like NoScript running which would then break the validation. If you're using the action attribute, at the very least your user will get redirected by the server based on the backend validation. If you're using something like window.location, on the other hand, things will be bad.

User · Answer

Attach an event listener to the form using  addEventListener   and then call the  preventDefault   method on event    x000D   x000D  const element   document querySelector  form    x000D  element addEventListener  submit   event   gt    x000D    event preventDefault    x000D       actual logic  e g  validate the form x000D    console log  Form submission cancelled     x000D      x000D   lt form gt  x000D     lt button type  submit  gt Submit lt  button gt  x000D   lt  form gt  x000D   x000D   x000D    I think it s a better solution than defining a submit event handler inline with the onsubmit attribute because it separates webpage logic and structure  It s much easier to maintain a project where logic is separated from HTML  See  Unobtrusive JavaScript   Using the  onsubmit property of the form DOM object is not a good idea because it prevents you from attaching multiple submit callbacks to one element  See addEventListener vs onclick

User · Answer

You can add eventListner to the form  that preventDefault   and convert form data to JSON as below    x000D   x000D  const formToJSON   elements   gt     reduce call elements   data  element    gt    x000D    data element name    element value  x000D    return data  x000D   x000D          x000D   x000D  const handleFormSubmit   event   gt    x000D      event preventDefault    x000D      const data   formToJSON form elements   x000D      console log data   x000D        const odata   JSON stringify data  null         x000D    const jdata   JSON stringify data   x000D      console log jdata   x000D   x000D       async      gt    x000D        const rawResponse   await fetch        x000D          method   POST   x000D          headers    x000D             Accept    application json   x000D             Content-Type    application json  x000D             x000D          body  jdata x000D            x000D        const content   await rawResponse json    x000D   x000D        console log content   x000D            x000D     x000D   x000D  const form   document forms  myForm     x000D  form addEventListener  submit   handleFormSubmit   x000D   lt form id  myForm  action     method  post  accept-charset  utf-8  gt  x000D       lt label gt Checkbox  x000D           lt input type  checkbox  name  checkbox  value  on  gt  x000D       lt  label gt  lt br   gt  lt br   gt  x000D   x000D       lt label gt Number  x000D           lt input name  number  type  number  value  123    gt  x000D       lt  label gt  lt br   gt  lt br   gt  x000D   x000D       lt label gt Password  x000D           lt input name  password  type  password    gt  x000D       lt  label gt  x000D       lt br   gt  lt br   gt  x000D   x000D       lt label for  radio  gt Type  x000D           lt label for  a  gt A x000D               lt input type  radio  name  radio  id  a  value  a    gt  x000D           lt  label gt  x000D           lt label for  b  gt B x000D               lt input type  radio  name  radio  id  b  value  b  checked   gt  x000D           lt  label gt  x000D           lt label for  c  gt C x000D               lt input type  radio  name  radio  id  c  value  c    gt  x000D           lt  label gt  x000D       lt  label gt  x000D       lt br   gt  lt br   gt  x000D   x000D       lt label gt Textarea  x000D           lt textarea name  text area  rows  10  cols  50  gt Write something here  lt  textarea gt  x000D       lt  label gt  x000D       lt br   gt  lt br   gt  x000D   x000D       lt label gt Select  x000D           lt select name  select  gt  x000D               lt option value  a  gt Value A lt  option gt  x000D               lt option value  b  selected gt Value B lt  option gt  x000D               lt option value  c  gt Value C lt  option gt  x000D           lt  select gt  x000D       lt  label gt  x000D       lt br   gt  lt br   gt  x000D   x000D       lt label gt Submit  x000D           lt input type  submit  value  Login  gt  x000D       lt  label gt  x000D       lt br   gt  lt br   gt  x000D   x000D   x000D   lt  form gt  x000D   x000D   x000D

User · Answer

You can use inline event onsubmit like this   lt form onsubmit  alert  stop submit    return false    gt    Or   lt script gt     function toSubmit          alert  I will not submit          return false        lt  script gt    lt form onsubmit  return toSubmit      gt    Demo  Now  this may be not a good idea when making big projects  You may need to use Event Listeners   Please read more about Inline Events vs Event Listeners  addEventListener and IE s attachEvent  here  For I can not explain it more than Chris Baker did       Both are correct  but none of them are  best  per se  and there may be   a reason the developer chose to use both approaches

User · Answer

Unlike the other answers  return false is only part of the answer  Consider the scenario in which a JS error occurs prior to the return statement     html   lt form onsubmit  return mySubmitFunction event   gt         lt  form gt    script  function mySubmitFunction       someBug     return false      returning false here won t be executed and the form will be submitted either way  You should also call preventDefault to prevent the default form action for Ajax form submissions   function mySubmitFunction e      e preventDefault      someBug      return false      In this case  even with the bug the form won t submit   Alternatively  a try   catch block could be used   function mySubmit e       e preventDefault       try      someBug        catch  e       throw new Error e message         return false

User · Answer

The following works as of now  tested in chrome and firefox     lt form onsubmit  event preventDefault    return 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

Here my answer     lt form onsubmit  event preventDefault   searchOrder event    gt       lt  form gt   lt script gt  const searchOrder   e   gt        e preventDefault        const name   e target name value      renderSearching         return false     lt  script gt    I add event preventDefault    on onsubmit and it works

User · Answer

For prevent form from submittion you only need to do this    lt form onsubmit  event preventDefault    gt             lt  form gt    By using above code this will prevent your form submittion

User · Answer

var form   document getElementById  idOfForm    form onsubmit   function       return false

User · Answer

Try this one     HTML Code   lt form class  submit  gt       lt input type  text  name  text1   gt       lt input type  text  name  text2   gt       lt input type  submit  name  Submit  value  submit   gt   lt  form gt    jQuery Code    function            submit   on  submit   function event           event preventDefault            alert  Form Submission stopped                   or    function            submit   on  submit   function event          event preventDefault           event stopPropagation           alert  Form Submission prevented   stopped

[javascript] How to prevent form from being submitted?

Examples related to javascript

Examples related to html

Examples related to forms