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.

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.

• javascript
• jquery
• forms

• 1 Don't you have a development/QA environment where you would test the JavaScript first for syntax errors? Syntax errors should never go into production because they can be immediately caught every time. – mellamokb Commented Jun 29, 2012 at 18:11
• Test your sanitation/error checking function on a button that isn't the submit? – TheZ Commented Jun 29, 2012 at 18:12
• Other than js,you can use ajax .$.ajax({ error:function(){ whatever },success:function(your code on success)}).Moreover,you can also use beforesend:function(){which you want to confirm..if not,return false}.Hope this helps you. – vijay Commented Jun 29, 2012 at 18:14

4 Answers 4

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/TR/2011/WD-html5-20110525/the-button-element.html#attr-button-type

Set the action of the form to something that isn't correct, like action="error.html". Then as the final step in the form submit process, dynamically set the action to the correct link.

You can also make the button not submit at all, and submit the form manually:

$('#myForm').submit();

Use event.preventDefault at the beginning of the event and trigger the submit yourself.

$("#search").click(function(event) {
    event.preventDefault();
    // some javascript with syntax error is here
    var foo = "bar";
    alert(foobar); // ERROR
    // if syntax error occurs in this scope, the form won't submit
    $(this).closest("form")[0].submit(); 
});

DEMO

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

on the click function, prevent the default action. Then if the code does pass, then manually call the submit

$('#myForm').submit();