This is pretty bizarre, but according to the MDN docs autocomplete has wide-spread support for TextArea element (given that the listed requirements are met):
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
But it doesn't seem to work, at least not in either Chrome or FireFox.
This is an example of what doesn't work:
<html>
<body>
<form action="index.html" method="post">
<input type="first" name="input" id="a" autocomplete="on"><br> <!-- Works! -->
<textarea name="second" id="b" autocomplete="on"></textarea><br> <!-- Doesn't work!-->
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
So this begs the question: has there been an actual regression in two major browsers, or are the MDN docs wrong? ... or am I missing something entirely different?
Turns out it currently isn't supported from what I can tell: https://www.chromestatus.com/feature/5680387573415936
Related
I'm using ASP.NET web forms and i need to post data to an iframe, the problem is that in web forms I have the main form tag(form1), so i need another form tag(form2), to post data to the iframe that is in the main form1.
Basically i have this:
<form method="post" id="form2" action="http://localhost:58903/WebForm1.aspx" target="webApp">
<input type="hidden" name="ValidationUserName" value="david" />
<input type="hidden" name="ValidationTokenId" value="13123132132" />
<button type="submit">Send info to inner iframe</button>
</form>
<form id="form1" runat="server">
<iframe id="webApp" name="webApp" src="http://localhost:58903/WebForm1.aspx" style="width: 800px; height: 800px;"></iframe>
</form>
With this approach in open a new tab, if i put the iframe outside it works ok, but if i do this the layout is changed and i don't want this.
Is this possible?
If all the forms are in the same domain you should not work with iframes.
What exactly are you trying to get here? didn't realize completely
Done it, it was missing the "name" attribute in the <form> tags.
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.
I have form, which I use for users to login to the site. It works in Chrome, but for some reason not in IE 9.
Here is the form:
<cfform name="loginform" action="login.cfm" method="post">
<div class="span12">
<div class="span2">
User Name:
</div>
<div class="span2">
<cfinput type="text" name="username" required="yes">
</div>
</div>
<div class="span12">
<div class="span2">
Password:
</div>
<div class="span2">
<cfinput type="password" name="password" required="yes">
</div>
</div>
<div class="span12">
<div class="span2">
<cfinput name="submit" class="btn btn-primary" value="login" type="submit">
</div>
</div>
</cfform>
I am normally accessing the variable as #form.username#, but it is empty if being used in IE.
The simplified use here:
<cfif isdefined("FORM.submit")>
username: #form.username#
</cfif>
I can't see anything wrong with your code above when I run it I have the username field available to me in the form scope correctly. What version of Internet Explorer are you using?
To better debug this I would suggest the following:
Look at the source of the first page and see if there is anything
strange there.
Install Fiddler2 (http://www.fiddler2.com/) then use this to see
exactly what is being posted to login.cfm.
Other things to look at:
Are you using a javascript or CF framework that might be interfering with things?
I don't see anything overtly wrong with your code either. Did you try this in Firefox as well? Sometimes you can get better debugging information there. Possibly an actual error message with it. Both IE and Chrome can do a bit too "good" of a job of obscuring errors on the page.
My suggestion would also be to use plain form tags. Don't use cfform tags. There's not much need for them here. They aren't really helping you much. You could do your own validation on those fields and know exactly what it is that you are validating. You could also test your field that way. Simply change that cfinput to an input and see if that field becomes available in your post. That would pretty quickly let you know that there's an issue with your implementation of the CFFORM tags.
And it's getting a little OT, don't forget to trim the input and wrap it in XMLFormat() and add cfqueryparams to your SQL lookups to minimize scripting and injection attacks. You can also use CF's scriptProtect or rewriting URLs in IIS to help. Allowing free-form entry to FORMs or URLs without any validation is VERY dangerous.
I think I have found an interesting problem (at least to me). I have a form that uses a click on a div inside the form to submit. I have used "document.forms.form.submit()" to make the div clickable to submit as suggested here this.form.submit() not working after clicking div element in form (thanks David Hedlund!)
However the form was working fine in chrome, ff. But for some unknown reason, running the form in localhost on chrome is not working now. ff is working fine. What makes the problem interesting is when I uploaded the form to a web-server it works in chrome! Any Idea why this is happening in local machine? I am using Xampp.
Here is the form-
<form name="form" action="login_process.php" method="POST">
<div>
Username: <input style="width:100px;" name="login_client[]" type="text" />
Password: <input style="width:100px;" name="login_client[]" type="password" />
</div>
<div align="right" class="whitearial12" style="position:absolute; font-size:10px; width:360px; height:17px; right:110px; top:35px;">
Forgotten your password, or need to register?
</div>
<!-- this is the div !-->
<div onClick="document.forms.form.submit()" align="center" class="whitearial12" style="cursor: pointer; position:absolute; padding-top:3px; padding-bottom:-3px; width:80px; height:17px; right:20px; top:10px; background-image: url(Images/button_blank.png); background-repeat:no-repeat">
Log In
</div>
</form>
Update: Let me add what I noticed further. This form is included in index.php file from another php file named header.php. I have tried running only the header.php. The form works alright in that case in chrome. But including it in index.php does not work.
I would suggest including jQuery and reworking to resemble this
<form id="MyForm" action="login_process.php" method="post">
<span onclick="javascript:$('#MyForm').submit();">Magical ponies await</span>
</form>
Using jquery can help with cross-browser issues a lot, but if you can't do that, how about
<form id="XX" action="login_process.php" method="post">
<span onclick="javascript:document.getElementById('XX').submit();">AVAST</span>
</form>
I'm new to tumblr and am trying to implement Search in a custom theme. I have:
<form action="/search" method="get" id="search-form">
<input type="text" name="q" class="query" value="" />
<input type="submit" value="Search" class="submit" />
<div class="clear"></div>
</form>
I have about a dozen posts. Whenever I search for anything in any post, Tumblr always returns no search results. I feel like I'm missing something. Am I to implement or set any configuration anywhere else in the theme? What else is needed to implement search in a user's Tumblr theme?
Thanks!
Here's the solution I use. Put this into the <head> of your code:
<script type="text/javascript">
<!--
function handleThis(formElm)
{
window.location="/tagged/"+formElm.number.value+"";
return false;
}
-->
</script>
And place this where you want the search box to appear:
<form onsubmit="return handleThis(this)">
<div class="submit"><input type="submit" value="{lang:Search}" name="Submit"/></div>
<div class="input"><input onfocus="this.value=''" onblur="if(this.value=='') this.value='Search. Then hit enter.';" type="text" value="{lang:Search}. Then hit enter." name="number"/></div>
</form>
Use CSS to style as you wish. This will search your tags only, but unlike the regular Tumblr search it works.
I was getting no results when my blog was password protected. I removed the password protection from Tumblr Dashboard > settings > blog name > password and it started returning results again.