IE 9 Clears Form Fields

Question

This is a really strange issue that I cannot seem to solve. On a WordPress site, I have several forms (login, registration, and other) outputted on a site via short codes. When the forms are submitted, their data is processed via an "init" hook that listens for the $_POST data.

Note, the site is running WordPress, but I have deemed this to not be a WordPress issue, which is why I'm posting here.

When the forms are submitted in IE 9, all fields are cleared of the values when clicking submit. For example, let's say there is an input field with a name of "username", and the field's value is set to "johndoe"; when submitting the form through any browser besides IE 9 (include 7 and 8), the data comes in like this:

$_POST['username'] = 'johndoe'

Exactly as expected.

However, when the form is submitted with IE9, it comes out like this:

$_POST['username'] = ''

As far as I can tell, it happens with every form on the site.

The custom login form I've built, for example, looks like this:

<form id="re_login_form" class="re_login_form" action="" method="post">
    <fieldset>
            <label for="re_user_Login"><?php _e('Username', 're'); ?></label>
            <input name="re_user_login" id="re_user_login" class="required" type="text" title="<?php _e('Username', 're'); ?>"/>
    </fieldset> 
    <fieldset>
            <label for="re_user_pass"><?php _e('Password', 're'); ?></label>
            <input name="re_user_pass" id="re_user_pass" class="password required" type="password"/>
    </fieldset>
    <fieldset class="form-action">
            <input type="hidden" name="refalf_redirect" value="<?php echo $redirect; ?>"/>
            <input type="hidden" name="re_login_nonce" value="<?php echo wp_create_nonce('re-login-nonce'); ?>"/>
            <input id="re_login_submit" type="submit" class="button re_submit" value="<?php _e('Log In', 're'); ?>"/>
            <p class="forgot-password"><a href="<?php echo wp_lostpassword_url( get_permalink() ); ?>" title="<?php _e('Lost Password', 're'); ?>"><?php _e('Lost Password?', 're'); ?></a></p>
    </fieldset> 
</form>

One of the things that is extra interesting is that the fields are visibly cleared of their values when clicking submit in IE9. It's also as though the submit button is triggering something in IE9 that clears the fields.

Anyone have any ideas?

Answer 1

You're not alone..

See for instance http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/afda3def-b0be-431d-a9fc-c40dd7cb2fa4

Easiest test is at http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_mail

Answer 2

I just experienced a bit similar case: IE9 posted back a form only partially; some values were cleared upon submit. I tested submitting form with IE9, IE10, IE11, Chrome36, FF31 and all others worked fine except IE9.

So I checked the markup and there was another form nested inside the main form page which actually did not have any input fields or submit buttons it had been created by some automated template/editor software.

After I removed those extra form nodes, IE9 started to submit all fields. I worked with ASP.NET 4.5 MVC4.

Answer 3

I was able to solve this by giving each input field a placeholder attribute. I still don't know why that made it work, but when the placeholder was present, everything worked fine.