views:

16

answers:

1

i have a simple little form

<form id="loginform"> <input id="myinput" type="text" /> <input name="submit" value="go" type="submit" /></form>

in a very not secure way i want it to go to different urls depending on the input value.

here is my simple little jquery script that i am sure could be written more succinctly. (feel free to help)

$(document).ready(function() {
jQuery.noConflict();
var apple = 'http://www.apple.com';
var microsoft = 'http://www.microsoft.com';

    jQuery('#loginform').submit(function() {
    var pass = jQuery('#myinput').val();

if (pass=='apple') {
var currentloc=apple;
} else if (pass=='microsoft') {
var currentloc=microsoft;
}
else {
var currentloc ='http://www.mysite.com/sorry'; 
}
        window.open(currentloc, 'formpopup', 'width=800,height=600,resizeable=1,scrollbars=1');
    });
});

this works when i run it on ffcurrent macintosh, but not when i run it in ie7. then the popup window is the same as the window we are coming from.

+1  A: 

I think the main problem is that you declared currentloc as a local variable three times.

In JavaScript it's all about scope, and every time you declared currentloc with the key word var you were basically saying that "I want this variable to exist within this if (or else if) statement and not outside it." Later on when you used window.open and you passed in currentloc, you were actually instantiating a new global variable since all other instances of currentloc had been lost.

Global variables are automatically created when you don't declare them with var (I think technically they are global properties of the global object, but I'm not 100% on that). In any case, it is considered a best practice to explicitly declare your variables and limit them to the minimum scope needed for your application.

Here is your modified code. I hope it works (tested IE8 quirks mode, and Firefox)

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" ></script>
    <script>
    $(document).ready(function() {
        jQuery.noConflict();
        var apple = 'http://www.apple.com';
        var microsoft = 'http://www.microsoft.com';
        var currentloc; 

        jQuery('#loginform').submit(function() 
        {
            var pass = jQuery('#myinput').val();

            if (pass=='apple') 
            {
                currentloc=apple;
            } 
            else if (pass=='microsoft') 
            {
                currentloc=microsoft;
            }
            else 
            {
                currentloc ='http://www.mysite.com/sorry'; 
            }
            window.open(currentloc, 'formpopup', 'width=800,height=600,resizeable=1,scrollbars=1');
        });
    });
    </script>
</head>
<body>
    <form id="loginform"> 
        <input id="myinput" type="text" /> 
        <input name="submit" value="go" type="submit" />
    </form>
</body>
</html>
Brandon Boone
thanks for the thorough explanation, i always get a little lost with the global local thing...
liz