prevent form submission (javascript)

Question

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

Answer 1

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