alert() triggers form submission

Question

I am trying to eliminate the "enter event" default value on type=text , which triggers submit on the form. I do so with the following:

var onEnter = function(values){
    $("#"+values['id']).keydown(function(e){
        if (e.which == 13) {
            event.preventDefault();
            var function_to_call = window[values['function']];
            if(typeof function_to_call === 'function'){
                if(values['parameters']!= null){
                    parameters = values['parameters'];
                    var args;

                    if(typeof parameters === 'string')
                        args = parameters.split(',');
                    else
                        args = new Array(parameters);

                    function_to_call.apply(window, args);
                }
                else function_to_call();
            }
            return false;
        }
    });
}

The code that matters for taking away the default event is

event.preventDefault();
return false;

The rest of code just calls a function with parameters or no parameters. The thing is, inside the functions called, there´sa condition that triggers an alert. Here´s the deal:

1. If alert is not triggered , [enter] does not trigger form submission
2. if alert is triggered , form submission is triggered

The function called on every type=text is the same, and here is the alert condition:

......
if(!regex_match(item)){
        alert("Solo son posibles los siguientes caracteres: '.' ',' 'a-z' 'a-Z' '0-9' y ' '");
        return;
 }
 .....

var regex_match = function(text){
    regex = /^[_., 0-9a-záéíóúñ]+$/i;
    return regex.test(text);
}

Things tried:

• " return false; " after alert(...) ;

I am new to javascript, could anyone point out why this could be happening? Thanks in advance!

Answer 1

I'm fairly surprised by that (and expect you'll find the behavior varies from browser to browser), but alert is a funny beast somewhat at odds with the rest of the browser environment, so...

Since you always want to stop the default behavior, I'd recommend either:

1. Don't use alert , which is fairly ugly anyway (use any of the many "modal" dialog plug-ins for jQuery, or just do your own with a styled, absolutely-positioned div ), or

2. Take the alert out of the event handling sequence, like this:

    var onEnter = function (values) { $("#" + values['id']).keydown(function (e) { if (e.which == 13) { setTimeout(finishHandling, 0); return false; } function finishHandling() { var function_to_call = window[values['function']]; if (typeof function_to_call === 'function') { if (values['parameters'] != null) { parameters = values['parameters']; var args; if (typeof parameters === 'string') args = parameters.split(','); else args = new Array(parameters); function_to_call.apply(window, args); } else function_to_call(); } } }); } 

   What this second option does is let the event handler complete before you call alert , by scheduling a callback to finishHandling to occur almost immediately, but after the event handling has been completed. (I also removed the call to event.preventDefault() , because return false; from a jQuery event handler does both event.preventDefault() and event.stopPropagation() . You may have needed it when the alert was there, but you don't without it.)