CODEWITHSUNDEEP
jqueryhtmlformsdomsubmit
dajoto
dajoto

Reputation: 460

jQuery submit() works (as expected) in FF/Chrome but not in IE/Opera, any ideas why?

I am using some javascript to check a form field against an array of possible matches. Dependent on match user is them presented with a confirm window and dependent on result form is either submitted or user is returned to the page. This process works as expected in Firefox and Chrome but in IE and Opera an alternative submit is still being triggered. Can anyone suggest how I can fix this?

Script is trimmed of most data for simplicity.

$(function(){
    var check = ["All", "array", "values"];
    $('#Next').click(function(){
        $(this).addClass('hit');
        $('#Cancel').attr('disabled', 'disabled');
    });
    $('#Form').bind('submit', function(){
        if($(this).find('.hit').attr('id')=='Next'){
            $('#Next').removeClass('hit');
            var match = $('input[name="WHAT"]', $('#idBothAddressesTable')).val().trim();
            if(match.length==0){
                var postCode = $('input[name="WHAT2"]', $('#idBothAddressesTable')).val().trim();
            }
            var matched = $.inArray(match, check);
            if(matched != -1){
                var ask = confirm("This is the case, proceed or cancel");
                if(ask==true){
                        $.post('dowhat.php',{flag: 1}, function()){
                        $('#Form').unbind('submit').submit();
                    });
                }
                else{
                    ('#Cancel').removeAttr('disabled');
                    return false;
                }
            }
        }
    });
});

Form actually has two submit values. Other than that is pretty basic, have trimmed away the bulk for simplicity again.

<form action="nextpage.php" method="post" id="Form">
    <input type="text" name="WHAT" />
    <input type="text" name="WHAT2" />
    <input type="submit" name="CANCEL" value="Cancel" id="Cancel" />
    <input type="submit" name="NEXT" value="Next" id="Next" />
</form>

In firefox and chrome this appears to work when someone meets meets the ask==true critera. The $.post goes ahead and the form is submitted as if the "NEXT" submit were clicked.

However in IE and Opera the $.post occurs but the form is submitted as if the the "CANCEL" were clicked.

Can anyone explain this to me, I can't seem to find a solution?

Upvotes: 1

Views: 173

Answers (2)

Sparky
Sparky

Reputation: 98748

I do not recommend two submit buttons on one form. It's valid HTML as per the spec, but IMO, a bad practice.

No matter which button you press, you are doing a submit event without preventing the intended default behavior.

Also, with jQuery you are bind'ing submit to the form, but submit is already bound to the form by default. You can try the following, but I still strongly recommend you re-factor your code to get rid of the second submit button and replace it with something else.

Try preventDefault()...

$('#Form').bind('submit', function(e){ // don't forget the "e"
        e.preventDefault(); // first line

        // rest of your code follows under preventDefault

});

Upvotes: 2

falsarella
falsarella

Reputation: 12447

You have a form with two submit buttons and you are telling the form to be submitted.

The result is undefined: each browser handle it in its own way! So, instead of telling form to submit, I suggest you to call the click event of the submit button you need to call.

Upvotes: 1

Related Questions