Question

I have the form like below

<form id="myform" class="form-horizontal" class="collapse in">
    <fieldset>
        <!-- form fields are here -->
        <div class="form-actions">
          <button class="btn btn-inverse" id="search" name="search" data-loading-text="Searching...">Search</button>
        </div>
    </fieldset>    
</form>

And I use the following code to act once button is pressed:

$("#search").click(function() {
    try {
        // some javascript with syntax error is here
    } finally {
        return false; // don't submit form automatically
    }
});

But if my javascript contains syntax errors, then the form is submitted regardless of try .. finally. How can I fix that? The form should be never submitted automatically.

Answer 1

Set the button type to “button”.

button: The button has no default behavior. It can have client-side
scripts associated with the element’s events, which are triggered when
the events occur.

<button type="button"...>Search</button>

The form won’t submit at all if that is the case until you tell it to explicitly submit via Javascript.

See HTML5 specs for this simple solution. http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#attr-button-type