What triggers an HTML form to submit?

The calendar code isn't calling submit() somewhere?

3) As a workaround in case I don't manage to figure this out, is there a way to simply totally disable submitting the form (and then reenable it in an event handler attached to the submit key)?

Unfortunately, I'm not totally sure if it's reliable that the click handler will be called before the form submit event.

( function () {

  var prevent_submit = true;

  $( "form" ).on( 'submit', function ( event ) {

    if ( prevent_submit ) {

      event.preventDefault();

    }

  } );


  $( "input[type='submit']" ).on( 'click', function ( event ) {

    prevent_submit = false;

  } );

} )();

or

$( "form" ).attr( { action : "#", method : "post" } );

$( "input[type='submit']" ).on( 'click', function ( event ) {

  event.target.form.action = "...";

} );

Sorry to answer my own question, but none of the given answers was complete, even though I've learnt from them and from the comments! Thanks for everyone who participated!

So:

1+2) Buttons defined by the <button> element cause submits (as if they had type="submit" set. At least in some browsers). If one wants a button not to cause a submit one should use <button type="button">, or the good old <input type="button" />.

3) (Unnecessary for me now, but it was part of the question.) There are many ways to prevent a form from submitting. Three of them are:

  • to handle the onsubmit event, preventing the submit (by return false; or - preferably! - by e.preventDefault();) in case a flag is not set; set the flag when handling the event(s) that should actually submit the form

  • to handle the onsubmit event and prevent the submit as above if the element that triggered the event is not (one of) the element(s) we want to cause a submit

  • to set the form action to non-action, i.e. action="#", and to have the handler for the event that should actually submit the form set the action to the proper address


The calendar can submit your form in its JavaScript source code by calling form's submit() method using jQuery or plain JavaScript.

Here is an example how to disable the form submit and allow it only in case of pressing the button.

<form id="form">
    <input type="text" />
    <input type="button" name="submit-button" value="Submit"/>
</form>​
<script type="text/javascript">
    var form = document.getElementById('form'),
        button = form['submit-button'];
    form.onsubmit = function(e) {
        return !!form.getAttribute('data-allow-submit');
    };
    button.onclick = function() {
        form.setAttribute('data-allow-submit', 1);
        form.submit();
    };
</script>

Demo