Question

I have never done this before so I apologize if I don’t describe my issue good enough or don’t use all the right syntax.

What I have on my website is an email form. The user can type in a message, along with their name and some other data. Once they finish filling out the form they can submit it and it goes to my email and all is well. Because the form has JavaScript in it, I automatically had it hidden with CSS and then made it visible through JavaScript. That way if the user has their JavaScript turned off the form won’t appear.

And it works great. And I thought it displayed great too. I checked it across all my local testing browsers (Chrome 21, FF 14, IE 9, Opera 12 and Safari 5) as well as through Adobe Browser lab for IE 8, 7 and 6. In all of them it looked fantastic. I even checked it on my Android phone and my girlfriend’s Blackberry. It looked fine.

Until I tested it on my mom’s computer with IE 8. Although in Adobe Browserlab it says the form displays, in a real test the form doesn’t show up.

You can test it for yourself here.

The issue is with the form id, “emailForm”. My Form has the markup like so:

    <form id="emailForm" method="POST" action="../javascript/email_form.php" onSubmit="return validateForm();">
        <label id="emailSubjectLabel">Email Subject*:</label><input class="form" title="Email Subject" type="text" name="subject" id="emailSubject"><br>
        <label id="nameLabel">Your Name*:</label><input class="form" title="Your Name" type="text" name="name" id="yourName"><br>
        <label id="emailLabel">Your Email:</label><input class="form" title="Your Email Address" type="text" name="email" id="yourEmail"><br>
        <label id="messageLabel">Your Message*:</label>
        <textarea class="form" title="Write Something..." name="message" id="message" cols="40" rows="5"></textarea>
        <input class="button" type="submit" value="Submit">
        <p class="error">* required.</p>
    </form> 

My CSS has a whole bunch of code, but it has this in regards to making the form invisible:

    #emailForm, #javaText {
        display: none;  
    }

(note: #javaText is some text on the screen that also is hidden unless the user has JavaScript installed. It also doesn’t work in IE 8. Just for simplicity I’m not mentioning it.)

And the JavaScript looks like this:

    document.getElementById("emailForm").style.display = "block";
    document.getElementById("javaText").style.display = "inline";

    function validateForm() {
    //function that validates the form
    }

I’ve placed the JavaScript at the bottom of the page, hoping it would help. I’ve tried changing the style of the content right on the main HTML page, I’ve checked my mother’s JavaScript and it is enabled. I just don’t know why it isn’t working.

If somebody could tell me what I’m doing wrong, I’d be very thankful. This has been giving me a headache for a week now.

(And yes, I’ve told her IE sucks and she should go with Chrome, but the reason she doesn’t is a whole different story…)

Thanks for your help. I can’t wait to hear what the solution is!

Answer 1

IE8 is not loading your form_validation.js file and that’s why it isn’t running your initialization code in that file.

You need to change the type on your script tag to type="text/javascript" or remove the type entirely. You have type="application/javascript" which is not correct.

After further exploration, see Why doesn't IE8 recognize type="application/javascript" in a script tag? for more discussion.