CODEWITHSUNDEEP
javascripthtmlforms
Muhammad Imran Tariq
Muhammad Imran Tariq

Reputation: 23352

JavaScript code to stop form submission

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?

Upvotes: 298

Views: 847635

Answers (17)

jpierson
jpierson

Reputation: 17384

As of the introduction of the dialog option for the <form> elements action attribute, it's possible to prevent the action without any use of JavaScript.

<form method="dialog">
  <input name="param1" />
  <button type="submit">
      Submit
  </button>
</form>

Try setting method to post or get and notice that the form does attempt to do the default or specified action but with dialog it does not.

Normally the dialog method is used in combination with the <dialog> element so that if the form is nested under the dialog that it is closed when the form is submitted. It turns out that an added benefit of the dialog method appears that be that whether your form is in a dialog element however that it does not do the action.

Upvotes: 0

Hemant Metalia
Hemant Metalia

Reputation: 30678

There are many ways to achieve it.

one can be using preventDefault() and validateForm()

<form onsubmit="event.preventDefault(); validateMyForm();">

Here validateMyForm() will returns false if validation gets failed.

You can also use the return value of the function to prevent the form submission

<form name="myForm" onsubmit="return validateMyForm();">

and function like

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

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.

Upvotes: 411

Humayoun Alamgir
Humayoun Alamgir

Reputation: 165

Use preventDefault to stop form submission.

<form onSubmit="submitForm(event)">
    <input name="field" />
    <input type="submit" value="Submit" />
</form>
<script>
    const submitForm = (event) => {
        event.preventDefault();
        // ... do something
        return false;
    }
</script>

Upvotes: 0

Portgas D. Ace
Portgas D. Ace

Reputation: 35

Most simple and short code

<form onsubmit="return false">

For better cross-browser compatibility and maintainability, you can use JavaScript to attach an event listener to the form element and prevent the default form submission behavior

<form id="myForm">
  <!-- Form fields and elements -->
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    // Additional logic or actions
  });
</script>

Upvotes: 3

Brandon Wegner
Brandon Wegner

Reputation: 76

Even though it seems obvious it should be noted that you will also have to then submit your form if the validation is good to go if you block submitting with prevent default. I provided a complete example below of validating doc type and then submitting if its the right doc type.

<h2>Document Upload</h2>
<script>
var CanContinue = false;

function validateMyForm()
{
if(CanContinue == false)
  { 
    alert("You must upload a PDF, PNG, or JPG of your document.");


return false;

  }
  document.getElementById("myForm").submit();

  return true;
}

function getFileNameWithExt(event) {

  if (!event || !event.target || !event.target.files || event.target.files.length === 0) {
return;
  }

  const name = event.target.files[0].name;
  const lastDot = name.lastIndexOf('.');

  const fileName = name.substring(0, lastDot);
  const ext = (name.substring(lastDot + 1)).toUpperCase();
    if (ext =="JPG") {
    extension.value = "image/jpeg";
    CanContinue = true;

} else if (ext =="JPEG") {
  extension.value = "image/jpeg";
  CanContinue = true;

} else if (ext =="PNG") {
  extension.value = "image/png";
  CanContinue = true;

} else if (ext =="PDF") {
  extension.value = "application/pdf";
  CanContinue = true;

} else {
  alert("You must upload a PDF, PNG, or JPG of your document.");
  CanContinue = false;
}

  outputfile.value = fileName;


}

</script>


                <form method="post" id="myForm" action="/wheregoing" enctype="multipart/form-data" onsubmit="event.preventDefault(); validateMyForm();">
                
                Please upload a JPG, PNG, or PDF of the front of the document.
                <input id='inputfile' type="file" name="dafile" onChange='getFileNameWithExt(event)' required>
               
             <input id='extension' type='hidden' name='ContentType' value="">
                <input type="submit">
                </form>

Upvotes: 1

Viacheslav Panev
Viacheslav Panev

Reputation: 119

Disabling submit button also can help to prevent form submission.

<input style="display:none" type="submit" disabled>

Upvotes: 1

Linh
Linh

Reputation: 60999

Base on @Vikram Pudi answer, we can also do like this with pure Javascript

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

    function submitForm(event){
        event.preventDefault();


    }
</script>

Upvotes: 35

Dev Matee
Dev Matee

Reputation: 5947

Simply do it....

<form>
<!-- Your Input Elements -->
</form>

and here goes your JQuery

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});

Upvotes: 3

Isaac Abramowitz
Isaac Abramowitz

Reputation: 540

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;
  }
}

Upvotes: 6

Danial
Danial

Reputation: 1604

Lots of hard ways to do an easy thing:

<form name="foo" onsubmit="return false">

Upvotes: 13

Dheeraj Nalawade
Dheeraj Nalawade

Reputation: 404

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.

Upvotes: 2

Jesperai
Jesperai

Reputation: 31

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.

Upvotes: 1

Gdba
Gdba

Reputation: 91

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)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>

Upvotes: 9

Mauricio Gracia Gutierrez
Mauricio Gracia Gutierrez

Reputation: 10862

Lets say you have a form similar to this

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

Here is the javascript for the confirmAction function

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

This one works on Firefox, Chrome, Internet Explorer(edge), Safari, etc.

If that is not the case let me know

Upvotes: 2

Vikram Pudi
Vikram Pudi

Reputation: 1185

The following works as of now (tested in Chrome and Firefox):

<form onsubmit="event.preventDefault(); validateMyForm();">

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().

Upvotes: 61

dku.rajkumar
dku.rajkumar

Reputation: 18578

Just use a simple button instead of a submit button. And call a JavaScript function to handle form submit:

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

Function within a script tag:

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

You can also try window.history.forward(-1);

Upvotes: 21

Greg Guida
Greg Guida

Reputation: 7512

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();
    });
}

Upvotes: 161

Related Questions