How to cancel (prevent) form submission in JavaScript

Question

Is it possible to add a cancel button in this javascript so the form will not be submitted? This Javascript is currently working in validating these form fields but if for some reason I entered a wrong information there is no way for me to cancel and prevent the form being submitted.

<form METHOD="POST" ACTION="delformaction.cfm" name="deleteform" onSubmit="return validate(deleteform);">

<script language="JavaScript">

function validate(form)
{

    if (form.Institution.selectedIndex == 0)
    {
      alert("You must select an institution for any necessary future correspondence.");
      return false;
    }
    if (form.Requestors_name.value == "")
    {
      alert("You must enter your name for any necessary future correspondence.");
      return false;
    }

    if (form.EntityFirstName.value == "")
    {
      alert("You must enter the Entity's first name.");
      return false;
    }

  alert("Your form has been successfully submitted!");
//  form.reset();
  return true;
}

</script>


  <input type="submit" validate="submitonce" name="DeleteEntity" value="SUBMIT ONCE" class="SubmitButtons">

Show us the code how you call the validate function. This is probably false — NineBerry, Mar 03 '17 at 19:50
u dont add cancel button to javascript... u add cancel button to your ui and bind some function to some event with javascript. start learning what you are trying to achieve.. may b.. — Gogol, Mar 03 '17 at 19:52
Possible duplicate of [How to prevent form from being submitted?](http://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted) — jonofan, Mar 03 '17 at 20:33

score 0 · Answer 1 · edited May 23 '17 at 12:17

You can use .preventDefault() to cancel the default action. ie. the form submission.

See this StackOverflow question.

<form METHOD="POST" ACTION="delformaction.cfm" name="deleteform" onSubmit="return validate(event, deleteform);">

<script language="JavaScript">

function validate(e, form)
{
    var fail = false
    if (form.Institution.selectedIndex == 0)
    {
      alert("You must select an institution for any necessary future correspondence.");
      fail = true;
    }
    if (form.Requestors_name.value == "")
    {
      alert("You must enter your name for any necessary future correspondence.");
      fail = true;
    }

    if (form.EntityFirstName.value == "")
    {
      alert("You must enter the Entity's first name.");
      fail = true;
    }

    if (fail) {
        e.preventDefault();
        return false;
    }

  alert("Your form has been successfully submitted!");
//  form.reset();
  return true;
}

</script>


  <input type="submit" validate="submitonce" name="DeleteEntity" value="SUBMIT ONCE" class="SubmitButtons">

If the question is a duplicate, just flag it as a duplicate instead of duplicating even more content. — takendarkk, Mar 03 '17 at 20:30
@takendarkk I looked for the duplicate button but didn't find it, thought I didn't have enough rep. But now I see it hidden away under 'flag'. — jonofan, Mar 03 '17 at 20:32
Thank you but it's not working. when I submitted the form I ddid not get any pop up message. Even the alert box is now not showing — user3779216, Mar 06 '17 at 14:33

How to cancel (prevent) form submission in JavaScript

1 Answers1