Firefox Form submit issue with jQuery

Question

I am using the following script to submit a form with jQuery, however Firefox has generated a crash error report, please let me know what am I doing wrong.

function teamValidation(){
    var cat_id = $('#cat_id').val();    

    if(cat_id == "0"){
        alert("Category is invalid...");    
        return false;
    }else{
        $('#addForm').submit(); 
        return false;
    }
}

<form action="<?php echo SITE_URL; ?>adminteams/saveDetail/" 
 name="addForm" id="addForm" onsubmit="return teamValidation();">
 <input type="hidden" name="cat_id" id="cat_id" value="1"/>
</form>

Firefox error report

It is working fine in other browsers.

Answer 1

The problem is your form is submitting multiple times.You can achieve your goal using any of the following ways:
HTML:

<form action="<?php echo SITE_URL; ?>adminteams/saveDetail/" name="addForm" id="addForm">
 <input type="hidden" name="cat_id" id="cat_id" value="1"/>
</form>

JAVASCRIPT:

$('#addForm').submit(function(){
    var cat_id = $('#cat_id').val();    

    if(cat_id == "0"){
        alert("Category is invalid...");    
        return false;
    }else{
        return true;
    }
});

Another Way:
HTML:

<form action="<?php echo SITE_URL; ?>adminteams/saveDetail/" name="addForm" id="addForm" onsubmit="return teamValidation();">
     <input type="hidden" name="cat_id" id="cat_id" value="1"/>
    </form>

JAVASCRIPT:

function teamValidation(){
    var cat_id = $('#cat_id').val();    

    if(cat_id == "0"){
        alert("Category is invalid...");    
        return false;
    }else{
       return true;
    }
}

Answer 2

You have an infinite loop of submitting, then preventing the submission of, your form when the value of the cat_id text box is not 0. Remove the else block, since it serves no actual purpose.

To go into more detail:

function teamValidation(){
    var cat_id = $('#cat_id').val();    

    if(cat_id == "0"){
        alert("Category is invalid...");    
        return false;
    }else{
        $('#addForm').submit(); // this submits the form again - does NOT proceed with this submission of the form
        return false; // returning false will prevent the submission from being completed
    }
}

<form action="<?php echo SITE_URL; ?>adminteams/saveDetail/" 
 name="addForm" id="addForm" onsubmit="return teamValidation();">
 <input type="hidden" name="cat_id" id="cat_id" value="1"/>
</form>

When you submit the form, teamValidation() gets called. If the validation passes (the else block code is executed), you submit the form again which causes teamValidation() to be called yet again, then return false which will prevent this current submission from completing. Firefox is likely crashing because it finds itself in a loop where it's constantly submitting a form, which is never allowed to complete; the fact the browser is pretty awful in terms of memory usage probably doesn't help either.