Why does asp.net mvc form submits itself on button clicks when javascript function error?

Question

hi guys, i'm new to the asp.net mvc, and while working on this, i used very basic asp.net mvc stuff like beginform, etc.

i used a lot of jquery codes this round for client side validation, ajax data retrieval, and other gui works.

and i used a combinations of html inputs buttons, etc and the asp.net mvc type of controls. what i noticed is that whenever i click on a button control, which sometimes are tied to either jquery oclick events, when there's a javascript error, the page will just go on and submit.

why is this happening and what am i missing here?

my bad for the dumb questions.. thanks

Updates

After poking around, i think i might have found out why... could it be because i put some jquery event handlers inside another function and didn't return false?

function eventHandling() {
    //initialize controls
    $(".dobPicker").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '-100:+0'
    });

    $("a#hrefCountry").fancybox({
        'titlePosition': 'inside',
        'width': '75%',
        'height': '75%'
    });

    //Event handlers part
    $("#imgbtnClear").click(function() {
        clearForm("#frmProductRegistration");
        return false; // like this guy weren't there initially <-- ??
    });

And if this was the root cause, why? care to share :)

Answer 1

its seems here, that when you trigger the imgbtnClear, and from what you say, the ClearForm fails, then its return, with out the false, so the input button that you place the clear, submit the form !, because never gets the return false.

Maybe if you do that...

$("#imgbtnClear").click(function() {
        try{
          clearForm("#frmProductRegistration");
        }catch(e){}

        return false; // like this guy weren't there initially <-- ??
    });

Answer 2

If a javascript exception occurs within the clearForm() function, then execution will halt and your script will never "return false", which is necessary to prevent the form from posting.

To ensure that your script will always "return false" you can wrap the clearForm() function in a try/finally block:

try {
    clearForm("#frmProductRegistration");
}
catch(e){} //so it works in IE
finally {
    return false;
}

Answer 3

The form will not submit only if you return false from a function attached to it's onclick event, but you are not returning that because of the exception, so it will be submitted anyway.

What are you returning? I guess that undefined, but I'm not sure. You could use firebug to debug this.