Passing variable in IE works but not in FF?

[Pbear74]

Here is what I'm trying to do:
I have an input textbox that takes a number 1 -5, User inputs a number.
Clicks a button that calls a function that takes that number and displays a popup div that corresponds to that number.
The popup that I am using is called ColorBox, it's similar to lightbox.

It works in IE but not FF, here is the code, any ideas?

Javascript

function showDiv() {
        var num = document.getElementById("input").value;
	    //1 = birthday, 2 = birth announcement, 3 = bridal shower
	    // 4=wedding, 5=baby shower
	    if (num == "1") {
            div = "#divBirthday"; 
            
            $(document).ready(function() {
                //Examples of how to assign the ColorBox event to elements
            $(".inline").colorbox({ width: "50%", inline: true, href: "#divBirthday" });

                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function() {
                    $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
                    return false;
                });
            });
	    }
	    else if (num == "2") {
	        div = "#divBirthAnnouncement";
	        $(document).ready(function() {
	            //Examples of how to assign the ColorBox event to elements
	        $(".inline").colorbox({ width: "50%", inline: true, href: "#divBirthAnnouncement" });

	            //Example of preserving a JavaScript event for inline calls.
	            $("#click").click(function() {
	                $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
	                return false;
	            });
	        });
	    }
}

HTML

 <input type="text" id="input" />
    <br>

    <input 
        name="btnColorbox" 
        id="btnColorbox" 
        type="submit" 
        value="Show Div" 
        class="inline" 
        onclick="showDiv();" />	

[thraddash]

Try changing the name "input" to something else, Im guessing FF doesnt like it.
Also change the input of type "submit" to "button" unless you want to send the data elsewhere via a form.

Eg.

<input type="text" id="input1" />
    <br />

    <input 
        name="btnColorbox" 
        id="btnColorbox" 
        type="button" 
        value="Show Div" 
        class="inline" 
        onclick="showDiv();" />

[Pbear74]

thanks for reply thraddash but that didnt work.
It's getting through the js code in FF, I know this because I put an alert box after the if statements and the alert appears but the hidden div does not.

any other ideas?

[Kor]

You code is not native javascript, I presume you are using a Framework (JQuery, Prototype, MooTools...). You must tell us which is the framework, otherwise it is impossible to follow your code.

[Pbear74]

It is JQuery.

One thing I tried that seemed to work was if I had a value already entered into the textbox and i called the showDiv() function from the body's onload it popup as it should.
However, I would rather not put the function call in the body's onload event. It appears that FF wants that value set at load time instead of on the button's click event.