IE 9 Clears Form Fields - forms

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"><?php _e('Lost Password?', 're'); ?></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?

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.

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

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.

Related

Submit button for my contact form is not submitting and redirecting

I'm working on my second website and throughout creating this one and my first the people here on StackOverflow have been an amazing help.
I can just browse and find almost anything I wan't to know.
99% of problems I've had, I fixed with answers I've read on here.
So first of thank you all so much!
This is the first time I'm posting something because I'm not able to find the specific answer for my code.
There are people one here with the same problems but when I look at their code I'm just lost.
I know html a fair bit by now. It's the php that I'm clueless about.
I'm not looking for something fancy, I'm just trying to create a simple contact form.
So here is my question and code, I hope some of you are able to help me.
I used an PHP code from a youtube tutorial and it's deadeasy (as said before: first time PHP) yet I can't get it to work. Although I'm doing everything the same as the man in the clip. He shows his is working so I'm extremely curious as to way mine is not?
My form does not 'send' and after clicking the submit button I don't get the 'thank you' line.
here is the html:
<form method="post" action="contactform" name="contactform" id="contactform">
<ol>
<li>
<label for="voornaam">Voornaam</label>
<input type="text" name="voornaam" />
</li>
<li>
<label for="achternaam">Achternaam</label>
<input type="text" name="achternaam" />
</li>
<li>
<label for="telefoon">Telefoon Nummer</label>
<input type="text" name="telefoon" />
</li>
<li>
<label for="email">E-mail Adres</label>
<input type="text" name="email" />
</li>
<li>
<label for="bericht">Type hier je bericht</label>
<textarea name="bericht"></textarea>
</li>
<li>
<input name="submit" type="submit" value="submit" />
<input name="reset" type="reset" value="reset" />
</li>
</ol>
</form>
and the PHP:
<?php
$voornaam = $_POST ['voornaam'];
$achternaam = $_POST ['achternaam'];
$telefoon = $_POST ['telefoon'];
$email = $_POST ['email'];
$bericht = $_POST ['bericht'];
$to = "felicevancuyk#gmail.com";
$subject = "dkl groep bericht";
mail ($to, $subject, $bericht, "From " . $voornaam . $achternaam . $telefoon};
echo "Bedankt. We nemen zo snel mogelijk contact met u op.";
?>
It could be that your action is not set correctly:
<form method="post" action="contactform" name="contactform" id="contactform">
This action tag is the URL that the form is sent to. In the above example you gave, it doesn't appear to be a file name. You want it to be something like this:
<form method="post" action="http://mysite.com/process-form.php" name="contactform" id="contactform">
Also note that in your example PHP code you are emailing responses to the form without cleaning those responses. Someone could send malicious code to your server if you don't clean the data first.
Something like:
$cleaned_voornaam = preg_replace("/[^ 0-9a-zA-Z]/", "_", $_POST['voornaam']);
Good luck!
You have to just change your action attribute of first line of code to the page where you want to process your form. It may be the same page but it is recommend to be on another page. Here is an example to submit the form in the same page:
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="contactform" id="contactform">
Don't forget if you are submitting on the same page as like the above example then your page should be in .php extension otherwise it will not work.
Another case for submit not submitting is that html is malformed.
Just happened that my code was inserting a php error in the middle of my html form.
fixed the error, the submit is working again.
In my case, no js involved at all

Why does my form not upload files in Internet Explorer 9?

Welcome to episode 32,342,343 of "Why does Internet Explorer Suck So Much?"...
I've seen lots of reports that IE9 does a crappy job uploading files. Apparently it has lots of caveats about when it will or won't work (If someone has a definitive list I'd love to see it). However, most of the problems/solutions I see have found are related to javascript, usually the jQuery form plugin or something similar.
My form is not submitted via AJAX and the the file input field is not hidden or obscured with css. Yet, I get several support tickets per day from users on IE9 trying to submit the form and "nothing happens" (=the form submits. No errors, but the file is not uploaded.) I haven't gotten a single complaint with a different browser, and IE8 even seems to work (as well as it ever does).
Here's the top of my form. Am I missing something?
<form action="http://mysite.dev/account-settings/?open=resume" method="post" class="wpjb-form" enctype="multipart/form-data">
<input type="hidden" name="resume_form" value="resume_form" />
<fieldset class="wpjb-fieldset-default">
<input id="firstname" name="firstname" type="hidden" class="regular-text " value="John" />
<input id="lastname" name="lastname" type="hidden" class="regular-text " value="Henry" />
<input id="email" name="email" type="hidden" class="regular-text " value="john.henry#johnhenry.com" />
<div class="wpjb-element-input-checkbox wpjb-element-name-is_active">
<label class="wpjb-label">Show resume? </label>
<div class="wpjb-field">
<label for="is_active_1"><input type="checkbox" class="" name="is_active" id="is_active_1" value="1" checked="checked" /> Yes <small style="display:inline;">(Uncheck to hide your resume)</small></label>
</div>
</div>
<div class="wpjb-element-input-select-one wpjb-element-name-file">
<label class="wpjb-label">Upload a <i>new</i> resume file</label>
<div class="wpjb-field">
<input style="line-height:1em;" id="file" name="file" type="file" class="regular-text " />
<small class="wpjb-hint">Accepted file types: doc, docx, odf, pdf, rtf</small>
</div>
</div>
</fieldset>
...
It goes on like this with a couple more <fieldset>s then ends like this:
....
<p class="submit">
<input type="submit" name="Submit" id="wpjb_submit" value="Save Changes" />
</p>
</form>
Update
I'm happy for everyone who has never experienced this problem but it's not just me:
http://answers.microsoft.com/en-us/ie/forum/ie9-windows_vista/cannot-upload-files-using-internet-explorer-9/5724d921-ae71-e011-8dfc-68b599b31bf5
Update2
I'm seeing a lot of suggestions to add a meta tag to force the user agent to IE8...
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I don't want to do this because although I do support IE8, many of the elements on my site render differently in IE8 vs. IE9. This would create a rather sloppy user experience as any IE users would experience I temporary "time warp" back to IE8 on that specific page.
I was able to fix this nightmare of a problem by wrapping a jQuery form submit in a setTimeout:
$('#complete_profile input[type="submit"]').click(function(){
setTimeout(function() {
$('#complete_profile form').submit();
}, 0);
});
This may cause duplicate submission when the form DOES submit, however, so be careful.
As Graham does, I think that this might more be a server issue - also I have never had issues with fileuploads in IE9 (or newer) - I guess you don't want to post the code of the PHP Script that handles the upload?
if any data is not being sent, You could check the post data by your hidden input on your server side script. For example if you're using php it would be something like
<? if($_POST['resume_form']=='resume_form'){
//Do something
} ?>
Or you could also use meta compatible tags for IE to render the page like IE8
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I suggest setting the X-UA-Compatible meta tag value and seeing whether that makes any difference.
See this question for possible values: What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
It may also be that the page is triggering a non-standards mode in IE9. I suggest opening the page in IE9, opening the developer tools, and seeing which browser/document modes are selected. That may give you a clue. Note that the "enctype" form attribute was not supported prior to IE8, so if the browser is using an older doc mode, that attribute is not being recognized.
OK I'd rather leave a comment not an answer but I don't have the points for that yet!
Are the users in quirks mode? Most IE users are unaware of the quirks mode and may have accidentally clicked it when trying to refresh the page (instead of pressing F5). If it is intermittent this could be the reason why.
following on from above.. On the server side how are you checking for empty fields? I'm more on the lines of JS here where you often look for "", null and undefined I'm just thinking that perhaps the quirks mode is sending some fuzzy data that your server side error checking is missing because you aren't looking for it and hence reports all is OK.

HTML form uploading file

I have been developing an application that allows a user to upload files to the server. I had working forms until recently, when suddenly they stopped working.
All the forms that do not work any more are the forms that have the enctype='multipart/form-data'. But the other forms that do not have this works perfectly. I've checked the spelling, and I checked everything.
It generates undefined indexes which really annoys me because it worked before. How can I resolve this?
<form method="post" enctype="multipart/form-data" action="uploadfile.php">
<input type="file" name="memofile"><br>
<input type="submit" name="submit" value="Test">
</form>

PHPSESSID appears in form arbitrarily

I have a login form written in PHP and each time I start the browser and go to the respective page, the first field of the form is this:
<input type="hidden" name="PHPSESSID" value="session_id_code" />
If I close the window, but I don't restart the browser, this doesn't happen. Any idea what's happening and why?
Thanks!
Form's code:
<?php
if (condition) {
?>
<form method="post" action="">
<dl>
<dt>Email:</dt>
<dd><input type="text" name="useremail" /></dd>
<dt>Password:</dt>
<dd>
<input type="password" name="userpass" /></dd>
<dt class="dt-buttons"><input type="submit" name="button_login" value="Login" class="button" /></dt>
</dl>
<input type="hidden" name="formkey" id="formkey" value="224ca00155w2fcda8906e1e40af03a71" />
</form>
<?php
}
?>
The form is simple HTML and is not dynamically generated.
EDIT2:
As I was saying, when I access the page for the first time after I started the browser, this thing happens. If I refresh the page afterwards, the hidden field doesn't show up.
Is it possible to have something to do with the SSL certificate? And if yes, why some pages/forms behave like this and some don't?
Sounds like you've got trans_sid enabled (transparent session id). Using trans_sid can be a security issue, especially if your site links to external content, or you allow link sharing - it lets a user's session ID leak out as part of the URL, meaning the session is highly vulnerable to hijacking.

Checking multiple forms for submission on the same page in coldfusion

Hello again stackoverflow...
Once again I have a troublesome problem. I have a page where I am using jQuery tabs to divide up three update forms. (Two really, one is a cfgrid so it doesn't really count.) Basically, when you submit the first form tab it is fine. However, if you submit the last form, it submits and refreshes the page but nothing was updated.
I've determined it has something to do with identifying which form is being submitted.
Note: These forms are being submitted to same page they are on so I am using this method:
<cfif isdefined("form.submit")>
//database stuff etc
</cfif>
I am submitting the forms by doing this at the end:
<input type="submit" name="submit" id="button" value="Save Changes" onclick = "form.submit()" />
After determining it had something to with identifying which form is being submitted, I changed the button to be:
<input type="submit" name="submit" id="button" value="Save Changes" onclick = "document.forms["form3"].submit()" />
I'm not sure if this is the most efficient way to do this...and I'm not sure how to specific that form3 is being submitted in the coldfusion part...I tried:
<cfif isdefined("form3.submit")>
but this doesn't work. It does not follow through the code.
Note: I'm using coldfusion 8. Also, using CFAJAX tags are limited because our ITS department didn't set up coldfusion correctly on the server...and they don't believe me. Thus I'm kind forced to do it in this ...weird way. It only support cfgrid for some weird reason...
ColdFusion (nor any server-side language) does not know what ID your forms might have - it only knows what you submitted via input (and select/textarea/etc) fields, and puts it in the form scope.
To do what you want, you need to have forms somthing along the lines of:
<form>
....
<input type="submit" name="submit1" value="Save Changes"/>
</form>
<form>
....
<input type="submit" name="submit3" value="Save Changes"/>
</form>
Then on the CF side you check which form it is with:
<cfif StructKeyExists(Form,'Submit1')>
...
</cfif>
or
<cfif StructKeyExists(Form,'Submit3')>
...
</cfif>
Hah, I figured it out! You have to make the submit names different on each form.
<input type="submit" name="submitDoc" id="button" value="Save Changes" onclick = "document.forms["form3"].submit()" />
I just changed the submit name to submitDoc
<cfif isdefined("form.submitDoc")>
Works!