My Optin form doesn't work in Internet Explorer, but works fine in Firefox.

Question

I have the following code for my optin form:

<script language="JavaScript">
function checkSub() {
    if (document.signup.email.value.indexOf('@', 0) == -1) {
        alert("Please fill in your valid Email address.\nYour email should be in the following format: [email protected]");
        document.signup.email.focus();
        return false
    }

    else if (!document.signup.terms.checked) {
        alert("You must read and agree to the terms");
        document.signup.terms.focus();
        return false
    }

    else {
        switch (document.signup.extra1.value) {
        case "Platinum":
            answer = confirm("By clicking OK you confirm that you have\nalready entered  
                     the World Cup Giveaway\nas a Platinum upgrade contributor.\n\nIf you have 
                     not yet entered the giveaway\nclick Cancel.\n\nYou can enter using the 
                     link at the\nbottom of the page.\n\nIf you have already entered the 
                     giveaway\nusing a link other than my invitation link\nyou are not 
                     eligible for this offer.");
            if (!answer) {
                return false
            }
            break;
        case "Gold":
            answer = confirm("By clicking OK you confirm that you have\nalready entered  
                    the World Cup Giveaway\nas a Gold upgrade contributor.\n\nIf you have not 
                    yet entered the giveaway\nclick Cancel.\n\nYou can enter using the link
                    at the\nbottom of the page.  \n\nIf you have already entered the
                    giveaway\nusing a link other than my invitation link\nyou are not eligible 
                    for this offer.");
            if (!answer) {
                return false
            }
            break;


        default:
            alert("You must sign up as a contributor to the \nWorld Cup Giveaway to take 
                advantage of \nthis offer.\n\nPlease click the link at the bottom of this 
                \npage or at the blog post mentioned below \nto sign up.\n\nIf you have 
                already signed up using \nthis link, please select the upgrade level\nyou 
                chose on signup or select \"Free\" if \nyou signed up as a free 
                contributor.\n\nIf you have already entered the giveaway\nusing a link other 
                than my invitation link\nyou are not eligible for this offer.\n\nNote:  This 
                page may not function properly\nif viewed in languages other than English.");
            return false
        }
    }
}
</script>

And the HTML

<form action="http://ebizac.com/ar/optin.php" method="post" name="signup"
onsubmit="return checkSub()">
    <input type=hidden name="action" value="addlead">
    <input type=hidden name="member" value="2315">
    <input type=hidden name="auto" value="7584">
    <input type=hidden name="thankyou" value="http://plr.forinternetnewbies.com/Offer1"&gt;
    <input type=hidden name="resubsetting" value="Y">
    <input type=hidden name="resubredirect" value="">
    <input type=hidden name="invalid_redirect" value="">
    <div style="padding:0 0 0 10px;">
        <table border=0 cellspacing=0 cellpadding=2>
            <tr>
                <td class="label">
                    <font size="2" face="arial, verdana">
                        Name:
                    </font>
                </td>
                <td>
                    <input type=text size=20 name="fname">
                </td>
            </tr>
            <tr>
                <td class="label" width="150">
                    <font size="2" face="arial, verdana">
                        Email address:
                    </font>
                    </span>
                </td>
                <td>
                    <input type=text size=20 name="email">
                </td>
            </tr>
            <tr>
                <td class="label">
                    <font size="2" face="arial, verdana">
                        Upgrade Level:
                    </font>
                </td>
                <td>
                    <select size=1 name="extra1">
                        <option>
                            Haven't Joined Yet
                        </option>
                        <option>
                            Platinum
                        </option>
                        <option>
                            Gold
                        </option>
                        <option>
                            Silver
                        </option>
                        <option>
                            Free
                        </option>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td align=center>
                    <input type="checkbox" name="terms" value="agree">
                    I agree to the terms as described on the
                    <a href="http://short9.com/blog0522-sp" target="_blank">blog post</a>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td align=center>
                    <input type="submit" value="Contribute Now">
                </td>
            </tr>
        </table>
    </div>
</form>

Everything does what I expect in Firefox, but in Internet Explorer the switch statement always goes to the default case. I tested with an extra alert(signup.extra1.value) in the default case and it shows an empty string.

What could be the problem here?

Answer 1

Don't know if it's the cause (can't test it now), but you may want to try correcting your <script> element:

<script type="text/javascript" charset="utf-8">

Answer 2

I don't know what the problem is exactly, but when IE is giving JavaScript issues, I use the debugger built into it. (IE8) I would put

debugger;

right before your switch and use the Watch window to find the value of

document.signup.extra1.value

and all of its pieces.

Answer 3

Your option tags needs to have "value" attributes. You should check against those.

<option value="1">Gold</option>
<option value="2">Platinum</option>

Then in your script:

switch(document.form_name.select_name.value) {
   case '1': alert("Gold"); break;
   case '2': alert("Platinum"); break;
}

Answer 4

You are most likely having the same issue as in http://stackoverflow.com/questions/2907612/javascript-returns-nan-in-ie-ff-ok/2907752#2907752

First of all, replace the language="JavaScript" with type="text/javascript". The first one was deprecated a loong time ago.

Secondly, do not access form elements in that way as it is very fragile You might have better luck with accessing the forms elements using

• give the elements id's and use document.getElementById("foo")
• document.forms.signup.elements.extra1

Both these are better approaches than what you are doing now.