In my asp page there is one textbox name "ProductName"
if i write any thing in that textbox and refresh that page , textbox is not clear in firefox. But i open this same page in Internet explore and write any thing in textbox and refresh the page, my textbox comes clear
why textbox not comes clear in FireFox?
This is the html code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<input type="text" id="ProductName" name="ProductName" style="width:235; height:20" value="">
</body>
</html>
This is a feature of Firefox (one I'm quite fond of). There's nothing you can do about it on the server-side.
EDIT:
The longer version: There is something you can do about, but it's very messy. Basically, the way Firefox implements this is it refills in form elements with the same name when the user hits the refresh button.
The workaround is to change the name attribute on your HTML form elements every time the page loads. How you keep track of what you change them too is left to your discretion, but let me just say that as a Firefox user myself, having a website do this would annoy me no end.
"Actually firefox is stupid that way." - yes it is.
Another way would be to set autocomplete="off" on the input
Firefox isn't stupid that way. That's appropriate behavior because presumably the div your fading in occurs on an event e.g. onclick, onchange, etc. And since that event isn't triggered on refresh firefox has no reason to show your div. It's your responsibility to write the js necessary to trigger events onload or when document is ready.
Back to topic: a simple solution is to set the autocomplete attribute of your form to 'off'
That's it.
You can add the autocomplete="off" attribute to the input as shown below and it should fix the issue.
<input type="text" id="ProductName" name="ProductName" style="width:235; height:20" value="" autocomplete="off">
Actually firefox is stupid that way. Let's say you have a checkbox and when the user clicks to activate that checkbox there is a div that should fade in. The problem here is that if you refresh the page your checkbox will remain active but your div will be hidden. They(firefox) did not think it all the way through and that is .. well stupid. Because of that you have to resort to js workarounds which (I'm not quite fond of).
I do agree that you need to have, at some poin, the same value inside some input, like when you submit a page, there is an error and you need to redirect the user back to the page containing the form. Then yeah!, ok!, you need the values... but to keep the values on refresh , well that s just stupid.
What user enters his details and then just thinks "hm I'll just press f5 now see what happens". If that's the kind of user 'roaming round' your site, please shut it down it's infested with stupidity
Ok so now that that is out of the way.
"change the name attribute on your HTML form elements every time the page loads"
this is a bad idea don`t do this...
instead you can use a js function that simply gets the input and sets the value to ""
onpageload:
document.getElementById('inp1').value = '';
document.getElementById('inp2').value = '';
document.getElementById('inp3').value = '';
and so on and so forth.
P.S. this is just an example, it's your job to see, what fits for you (be it jquery, prot or whatever); to see if you use a for loop or not; etc
HTMLFormElement instances inherit a reset method.
It can be used to clear all forms to its default values:
for(var i=0; i<document.forms.length; ++i)
document.forms[i].reset();
for this problem add
autocomplete="off"
attr to input tag for example:
<input type="text" autocomplete="off" id="ProductName" name="ProductName" style="width:235; height:20" value="">
You can use Ctrl+Shift+R command to force reload (not from cache) (see Page Navigation Shortcuts on http://www-archive.mozilla.org/docs/end-user/moz_shortcuts.html)
Server-side solution:
PHP session_start() clears input data. Tested on firefox 103.0.2.
<?php session_start(); ?>
<input type="text" />
<br/><br/>
<select>
<option>Choice 1</option>
<option>Choice 2</option>
<option>Choice 3</option>
<option>Choice 4</option>
</select>
Related
I have a form with <input type="submit">. In Chrome submit doesn't do anything. On a Network tab in developer tools I see nothing. No errors in developer tools either. Meanwhile, if I do save a page and open a saved page, then after I press submit button, I see something appears in Network tab. This happens in Chrome and Firefox. This works as expected in IE.
Does anybody have a hindsight, what should I look at?
I don't need a direct answer, I only need to know, where should I look at. If someone posts a direction and that'll help me to solve my problem, I'll accept it as a correct answer.
Structure of a page looks like this:
html
head
body
div
div
form
form
form
form
form
input
input
table
table
tbody
tr..td..input type=submit
If you are not using any JavaScript for form validation then a simple layout for your form would look like this:
<form action="formHandler.php" method="post">
<input name="fname" id="fname" type="text" value="example" />
<input type="submit" value="submit" />
</form>
You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.
For a more direct answer, provide the code you are working with.
You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html
Are you using HTML5? If so, check whether you have any <input type="hidden"> in your form with the property required. Remove that required property. Internet Explorer won't take this property, so it works but Chrome will.
I faced this problem today, and the issue was I was preventing event default action in document onclick:
document.onclick = function(e) {
e.preventDefault();
}
Document onclick usually is used for event delegation but it's wrong to prevent default for every event, you must do it only for required elements:
document.onclick = function(e) {
if (e.target instanceof HTMLAnchorElement) e.preventDefault();
}
Hello from the future.
For clarity, I just wanted to add (as this was pretty high up in google) - we can now use
<button type="submit">Upload Stuff</button>
And to reset a form
<button type="reset" value="Reset">Reset</button>
Check out button types
We can also attach buttons to submit forms like this:
<button type="submit" form="myform" value="Submit">Submit</button>
Check if you are using any sort of jquery/javascript validation on the page and try disabling it and see what happens. You can use your browser's developer tools to see if any javascript file with validate or validation is being loaded. You can also look for hidden form elements (ie. style set to display:none; or something like that) and make sure there isn't a hidden validation error on those that's not being rendered.
I ran into this on a friend's HTML code and in his case, he was missing quotes.
For example:
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<input type="text" name="fname" id="fname" style="width:90;font-size:10>
<input type="submit" value="submit"/>
</form>
In this example, a missing quote on the input text fname will simply render the submit button un-usable and the form will not submit.
Of course, this is a bad example because I should be using CSS in the first place ;) but anyways, check all your single and double quotes to see that they are closing properly.
Also, if you have any tags like center, move them out of the form.
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<center> <-- bad
As strange it may seems, it can have an impact.
You can't have a form element as a child (directly or indirectly) of another form element.
If the following does not return null then you need to remove the excess form elements:
document.querySelectorAll('form form');//Must return null to be valid.
check your form is outside the table
I have a hidden input field in my form. I noticed that if that field's value is changed by javascript, and then the user refreshes the page, that same value will be set when the page reloads. From what I've seen, this only happens in Firefox.
I've solved this unwanted behaviour by adding autocomplete="off" to that hidden input, but W3C doesn't like this solution, and if i validate the page I get the error:
Attribute autocomplete not allowed on element input at this point.
Apparently, the autocomplete attribute works only on specific inputs - see here.
So is there any solution that will satisfy both W3C and Firefox?
To validate (which I wouldn't put as much effort into as you are) I think you could use autocomplete="off" on the entire form, then turn it back on selectively, like this:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
</head>
<body>
<form autocomplete="off">
<input type="hidden" name="test">
<input type="text" name="otherfield" autocomplete="on">
</form>
</body>
</html>
I initially thought this was a Firefox bug but after discussion with robertc in the comments, I think expected behavior depends on specific use cases. The spec doesn't allow autocompletion on hidden fields so my first reaction still feels right, but Firefox's implementation might have some good arguments to support it. Please comment.
Alternatively, you could use <input type="text" style="display: none;" autocomplete="off" /> instead. It's a bit of a hack, but it should work!
The caching in Firefox is actually quite a good feature a lot of the time, but it does cause some problems when you build more dynamic forms.
I've writen some code here: http://jsfiddle.net/anhtran/kXsj9/8/
Users have to select at least 1 option on the group. But it makes me must click all of them to submit the form. How to do this issue without javascript?
Thanks for any help :)
I think this html5 attribute is only supposed to define which fields are required.
You cant put logic in to say "at least one is required".
You will need to add custom javascript for this to work (and/or have validation on the server side).
hope this helps...
The ideal answer would be to use HTML5 and the required attribute as part of a select element, like so:
<form method="post" action="processForm.php">
<label for="myLanguages">What languages can you program in?</label>
<br>
<select id="myLanguages" multiple required>
<option value="C#">C#
<option value="Java">Java
<option value="PHP">PHP
<option value="Perl">Perl
<option value="Haskell">Haskell
</select>
<br>
<input type="submit" value="Submit">
</form>
Yes, I know they are not checkboxes, but the end functionality is exactly what you want. Sadly, neither IE 9 nor Safari 5 currently have support for the required attribute. Chrome 13 and FF 5, however, do. (Tested on Win 7)
I thought it'd be possible, to do in part, what you were after using CSS. Not using the required attribute but to instead hide the submit button if nothing was selected.
You'd get rid of the required attributes and use CSS similar to this:
input[type=submit] {
display:none;
}
input[type=checkbox]:checked ~ input[type=submit] {
display:block;
}
However, that particular CSS is not working on my version of Google Chrome. I've made a question regarding it here. It seems to be working fine on my FF 3.6 though.
You can't do this without javascript.
What you can do is select a default option and set it as selected.
But it can't assure you that a checkbox is selected when the form is submitted.
Demo link:
http://elevation-inc.com/dev/test/ieform/
In IE 6/7/8 - if you enter a term into a simple input field, submit the form and then hit the back button - the input field retains the previously submitted term. If you then refresh the page, the value is also retained.
How, via HTML, can this pre-population be disabled? We want no value to be in the input box on page load/domready.
We've already tried autocomplete='off' on both the form and input element, but the pre-population is still persisting.
Thanks in advance.
<input type="text" name="userid" autocomplete="off" /> works fine for me (the same goes with your form). Make sure you reload the page in between testing (CTRL + F5 for full refresh).
This is how IE works, but you can change the value with JavaScript
<body onload="document.getElementById('q').value = '';">
<form action="http://www.google.com/search" name="f" autocomplete="off">
<input type="text" name="q" autocomplete="off" id="q"><input type="submit">
</form>
Well I guess it's a browser behaviour you can't bypass by html. You can do it in javascript however:
<script>
window.onload = function() { document.forms.f.q.value = ""; };
</script>
or if you don't want to wait for images to load (because window.onload will wait for that),
you can use the document ready event, as described here. (it needs more tweaking to make it work across all browsers)
I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.
If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.
So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:
<form action='some_page' method='post'>
<input type='hidden' name='email_address' value='test#test.com' />
<input type='image' value='E-mail User' />
</form>
Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?
There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?
<input type="submit" value="E-mail User" class="link">
<style>
input.link {
border: none;
background: none;
cursor: pointer;
/* etc */
}
</style>
I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.
<form action="some_page" method="post">
<input type="hidden" name="email_address" value="test#test.com" />
E-mail User
<noscript>
<input type="submit" value="E-mail User" />
</noscript>
</form>
$('submit-link').click( function() {
$(this).closest('form').submit();
return false;
})
.show();
Using HTML 4.01 Strict it worked on FF3.5, but not on IE8 or Chrome. The link works, but there is no text just a blank spot for a missing image.
So, this would appear to be a bad idea, since it may only work on one browser. To me that is a pretty big downside, unless your only market is for Firefox browsers, then, go ahead, great idea. :)
As James Skidmore suggested, it is easy to do an onclick with javascript to submit it as a post.
I would suggest unobtrusive JS, so, if someone doesn't have JS on then it will work as a link, doing a GET submission, but if they have JS then it would change the behavior to be POST with no ugly url change.
Or, as was mentioned the background of the image can blend in with the form background.
You could instead submit the form dynamically via JS, or use a regular submit button with a transparent or white background.