Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
143
rated 0 times [  149] [ 6]  / answers: 1 / hits: 46139  / 10 Years ago, mon, june 16, 2014, 12:00:00

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


More From » forms

 Answers
85

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

[#70548] Saturday, June 14, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
theo

Total Points: 680
Total Questions: 108
Total Answers: 81

Location: Laos
Member since Fri, Sep 11, 2020
4 Years ago
;