I have a form with a text input:

<form name="form1">
    <cfinput type="text" name="text1" id="text1" onChange="someFunc();">
</form>

I only want it to submit in certain cases. (I run some error-checking first)

<script>
function someFunc() {
    if (1==2) {
    document.form1.submit();
} else {
            alert("Not submitting");
    }
</script>

The problem is: even though the alert is triggering fine, somehow, the form is still submitting (There are no other submit statements aside from the one!).

Many thanks if anyone can shed some light on this . . .

I have a form with a text input:

<form name="form1">
    <cfinput type="text" name="text1" id="text1" onChange="someFunc();">
</form>

I only want it to submit in certain cases. (I run some error-checking first)

<script>
function someFunc() {
    if (1==2) {
    document.form1.submit();
} else {
            alert("Not submitting");
    }
</script>

The problem is: even though the alert is triggering fine, somehow, the form is still submitting (There are no other submit statements aside from the one!).

Many thanks if anyone can shed some light on this . . .

• javascript
• forms
• submit

• 1 Digital Chris's suggestion will work, but it's not "best practice". Look at jQuery's event.preventDafault() method if you go this route and have your script submit the form when validation returns true. But I still suggest looking at my answer below. – Chris Tierney Commented Jun 16, 2014 at 17:06
• Many thanks for your helpful suggestions. 1. I can't see Digital Chris' response. 2. I tried using preventDefault() but it didn't work. 3. Why is the "Default" for the text input set to submitting the form? The OnChange() attribute (the only action attribute specified) is pointing to my someFunc() function, which doesn't call document.form1.submit(), so WHERE IN THE WORLD is the code getting the idea that the form should submit? Many thanks in advance for clarifying! – SlimJim Commented Jun 16, 2014 at 18:53

3 Answers 3

There's a fundamental flaw with this approach. You are currently telling the form that when text1 changes, then call someFunc(). If true, use JavaScript to submit the form. If false, go on about your business. If you hit enter in the text input, the form still submits. If there is a submit button that gets clicked, the form still submits.

The basic way to approach this is like so:

<form name="form1" onsubmit="return someFunc()">
    <input type="text" name="text1" id="text1">
</form>

When the from is submitted, call someFunc(). This function must return either true or false. If it returns true, the form submits. If false, the form does nothing.

Now your JavaScript needs a slight alteration:

<script>
function someFunc() {
    if (1==2) {
        return true;
    } else {
        alert("Not submitting");
        return false;
    }
}
</script>

You can still have other functions called when a field is changed, but they still won't manage the form's final submission. In fact, someFunc() could call the other functions to do a final check before returning true or false to the onsubmit event.

EDIT: Documentation on implicit form submission.

EDIT 2:

This code:

$(document).ready(function(){ 
    $("#text1").on('change', function(event){ 
        event.preventDefault(); 
    }); 
});

is stopping the default processing for the change event associated with that element. If you want to affect the submit event, then you'd do this:

$(document).ready(function(){ 
    $("#form1").submit(function(event){ 
        event.preventDefault(); 
    }); 
});

Which would allow you to do something like this:

$(document).ready(function(){ 
    $("#form1").submit(function(event){ 
        if ( $('#text1').val() !== "foo" ) {
            alert("Error");
            event.preventDefault(); 
        }
    }); 
});

 var form = document.getElementById("Your Form ID");

 form.addEventListener("submit", function (e) {
      if ("Your Desired Conditions.") {
          e.preventDefault();
      }
 });

use the following code it will work perfectly fine

<form onsubmit="return false;" >