Form Submit Execute JavaScript Best Practice

Form Submit Execute JavaScript Best Practice?

Use the onsubmit event to execute JavaScript code when the form is submitted. You can then return false or call the passed event's preventDefault method to disable the form submission.

For example:

<script>
function doSomething() {
    alert('Form submitted!');
    return false;
}
</script>

<form onsubmit="return doSomething();" class="my-form">
    <input type="submit" value="Submit">
</form>

This works, but it's best not to litter your HTML with JavaScript, just as you shouldn't write lots of inline CSS rules. Many Javascript frameworks facilitate this separation of concerns. In jQuery you bind an event using JavaScript code like so:

<script>
$('.my-form').on('submit', function () {
    alert('Form submitted!');
    return false;
});
</script>

<form class="my-form">
    <input type="submit" value="Submit">
</form>

Best practices for submitting the form on every input change

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(function(){  $( ".target" ).on('change',function(e) {    console.log(e.target.value)  });});</script></head><body><form>  <input class="target" type="text">  <select class="target">    <option value="option1" selected="selected">Option 1</option>    <option value="option2">Option 2</option>  </select></form></body></html>

prevent form submission (javascript)

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

Make form run a javascript function?

You could use jQuery, and use the .submit() function.
You can give the form an id and then attach the submit function to it.

Example:

<form id="execute"....

</form>

<script type="javascript">
$("#execute").submit(function(){
 alert("i've submitted this form");
});
</script>

make sure you have included the jquery js file.

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

Form Submit Execute JavaScript Best Practice