prevent form submission (javascript)

by

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

More Related Contents:

  1. JavaScript post request like a form submit
  2. jQuery AJAX submit form
  3. JavaScript Form Submit – Confirm or Cancel Submission Dialog Box
  4. Want HTML form submit to do nothing
  5. Dynamically create and submit form
  6. Property ‘submit’ of object # is not a function
  7. HTML form with two submit buttons and two “target” attributes
  8. Avoid Angular2 to systematically submit form on button click
  9. Change value of input and submit form in JavaScript
  10. Submit form on Enter key with javascript
  11. React – clearing an input value after form submit
  12. Is there a better jQuery solution to this.form.submit();?
  13. Form submit button will not submit when name of button is “submit” [duplicate]
  14. Best way to track onchange as-you-type in input type=”text”?
  15. How to reset a form using jQuery with .reset() method
  16. How to build query string with Javascript
  17. Drop-down box dependent on the option selected in another drop-down box
  18. Javascript to Select Multiple options [closed]
  19. Regex for Umlaut
  20. Required attribute Not working with File input in Angular Js
  21. Getting an option text/value with JavaScript
  22. How to use JavaScript to change the form action [duplicate]
  23. Javascript – Stop form submit depending on ajax response [duplicate]
  24. Check if input is number or letter javascript
  25. jQuery see if any or no checkboxes are selected
  26. Get content of span
  27. Submit pdf form fields to a HTTP POST request
  28. form with no action and where enter does not reload page
  29. Angularjs – simple form submit
  30. copying the value of a form’s file input field to another form’s input field

Leave a Comment