I am setting the value of a form field using javascript. Now when I select the HTML content of that field using innerHTML the value gets disappeared.
Here is the code.
function test() {
document.getElementById("fname").value = "Deepak";
}
function test2() {
alert(document.getElementById("testform").innerHTML);
}
<form id="testform">
<input type="text" name="fname" id="fname">
</form>
<input type="button" value="Set Value" onclick="test()">
<input type="button" value="Show Inner HTML" onclick="test2()">
I can not use jquery in this , so have to do it using JS only.
The output should be <input name="fname" id="fname" type="text" value="Deepak">
But currently it shows, <input name="fname" id="fname" type="text">
Any workaround to solve this issue? This works fine on IE.
The behavior you are observing in FireFox is the correct behavior. Changing the value of an input should not change its value attribute (if it even has one). Newer versions of IE will behave the same way as FireFox does, and older versions of IE have a bug on which your code was relying. You can see this in the DOM level 2 spec:
Changing [the value property] changes the contents of the form control, but does not change the value of the HTML value attribute of the element.
If I'm not mistaken, you should be able to pass a DOM node directly to Modalbox.show():
Modalbox.show(document.getElementById('RAForm'), {title: 'Create RA', width:700});
So please try that. I believe that should solve your issue.
Related
I recently found out that Google is keen about users autofilling their forms. So keen that with the last update its browser Chrome fires a warning if the autocomplete attribute is missing or wrongly coded:
[DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://www.chromium.org/developers/design-documents/create-amazing-password-forms) <input class="input-text" type="password" name="password" id="password">
I have searched around but i could only find how to "turn it off".
Since I find it very useful (agreeing with Google), I would like to know if there are libraries out there to automatically add the attributes accordingly.
so that:
<form>
<input name="name" type="text" id="name">
</form>
becomes
<form>
<input name="name" type="text" id="name" autocomplete="name">
</form>
taking the value from its 'name' attribute or 'id'.
More info on this: https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/
I'm creating my page using Javascript. It is a login page and I need to use autofocus on username input text. This operation works on IE and Chrome, but doesn't on Mozilla!
This is the HTML I have been adding using JS:
'<input id="username" class="loginInput" data-bind="value: userName, valueUpdate: \'afterkeydown\'" type="text" name="User" autofocus><!--User Input text end /-->'
When i load the page with Mozilla this input is set this way:
<input id="username" class="loginInput" type="text" autofocus="" name="User" data-bind="value: userName, valueUpdate: 'afterkeydown'">
I really can't understand why autofocus attribute is set in that way. I even tried by adding the attribute using JQuery $("#username").attr('autofocus','autofocus') and works only on Chrome and IE.
The second problem comes when I go to the login page from another page and autofocus issue comes with every browser.
Can you help me?
You can try with:
$("#username").focus();
after the page has been loaded.
Instead of using the autofocus attribute, try:
$("#username").focus();
How do you disable the autocomplete functionality in the major browsers for a specific input (or form field)?
<input type="text" id="fullname" name="fullname" class="form-control" data-required="true" value="<?php echo $_POST['fullname']?>" >
When I open this form I see the value in this input even if I didn't insert any value.
I think adding autocomplete="off" would get you an error on most browsers, furthermore, autocomplete="off" is an invalid property.
Try to check the Mozilla Developer Documentation instead.
Just use the autocomplete attribute:
<input type="text" autocomplete="off"/>
"This would be useful when a text input is one-off and unique. Like a
CAPTCHA input, one-time use codes, or for when you have built your own
auto-suggest/auto-complete feature and need to turn off the browser
default."
Source : CSS Tricks
You could generate a random string using javasript or php and add it to the end of an input name, maybe even use a delimiter to split it apart from the actual name.
In php, you could use something like the session_id for this and simply echo it to the end of the name.
<input type="text" autocomplete="off" name="example<?php echo "," . session_id()?>">
You can replace the "," with any delimiter of your choice, so long as it isn't alphanumeric. Then when processing the data submitted, you can remove it from the end of the actual name of the input field.
With a field name always being different, your browser cant autocomplete it.
Source: https://stackoverflow.com/a/218453/12251360
Solution 1
<form name="form1" id="form1" method="post"
autocomplete="off" action="http://www.example.com/form.cgi">
This will work in Internet Explorer and Mozilla FireFox, the downside is that it is not XHTML standard.
Solution 2
The solution for Chrome is to add autocomplete="new-password" to the input type password.
Example:
<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>
Chrome always autocomplete the data if it finds a box of type password, just enough to indicate for that box autocomplete = "new-password".
This works well for me.
Note: make sure with F12 that your changes take effect, many times browsers save the page in cache, this gave me a bad impression that it did not work, but the browser did not actually bring the changes.
Solution 3
<input type="text" id="fullname" name="fullname" autocomplete="off" class="form-control" data-required="true" value="<?php echo $_POST['fullname']?>" >
links
Solution 3 Reference : https://stackoverflow.com/a/25496311/6923146
Solution 2 Reference : https://stackoverflow.com/a/40791726/6923146
I have a form with two inputs:
<input type="text" name="keyword" value="Search" onfocus="wipe(this)"/>
<input type="text" name="city" value="City" onfocus="wipe(this)"/>
and my JavaScript which gets rid of the pre-set value in form field as soon as you click it with your mouse is:
function wipe(obj)
{
obj.value="";
}
My question is, say the user doesn't type anything in the city field, how do I make it so that when the form is submitted the value for that field is empty and not the word City?
placeholder is a good attribute which can solve your problem its a past time history when we are used to using value for showing for which this textbox we have
<input type="text" name="keyword" placeholder="Search" />
if you still want to use java script modify your code something like this
<input type="text" name="keyword" value="Search" onfocus="wipe(this,'Search')" onblur="wipe2(this,'Search')"/>
<input type="text" name="city" value="City" onfocus="wipe(this,'City')" onblur="wipe2(this,'City')"/>
script function for second approch
function wipe(obj, str)
{
if(obj.value!=str){
obj.value="";}
}
function wipe2(obj, str)
{if(obj.value==""){
obj.value=str;}
}
You are using the wrong technique here. you should be using placeholder which is supported by most major browsers with the regular exception of IE. So if this is not a concern for you, you should definitely be using that. Especially, if you have a label element for that field. Otherwise you'd need to be checking for that input value on submission and see if it equals the string city
Just Declare a variable hasChanged and set it true when wipe function is called.Then call a function say 'SubmitFunction()'on the onclick function of Submit button.
<input type="text" name="keyword" value="Search" id="Search" onfocus="wipe(this)"/>
<input type="text" name="city" value="City" id="City" onfocus="wipe(this)"/>
<input type="submit" name="submit" value="submit" onclick="SubmitFunction();"/>
var hasChanged=false;
function wipe(obj)
{
hasChanged=true;
obj.value="";
}
function SubmitFunction()
{
if(hasChanged==false)
{
$("#City").val('');
}
}
at the time of submit why not check for value='city'
if(obj.value!='city')
{
//your code here
}
or if you have no problem in using jquery use watermark plugin this will handle browser compatibility problem also
Jquery Watermark
try this:
if($('input[name="city"]').val() && $('input[name="city"]').val() != 'city') { yourform.submit(); }
See How to prepopulate input text fields with prompting text which disappears on typing (jQuery) for some solutions to this. If you're okay with using HTML5, the best solution is probably to use "placeholder" instead of "value".
You should add one more attribute(eg. default <input type="text" name="keyword" default="Search" value="Search" onfocus="wipe(this)"/>) with value same as value attribute.
in on submit compare each form fields
function onSubmit(){
for (var fields in form)
if(form[fields].value== form[fields].getAttribute("default")){
form[fields].value = "";
}
}
}
Today i StumbleUpon a strange cache behavior of Firefox 4 which is described bellow.
There is a form <form name="widget">
<input type="hidden" name="position" value="-1" />
</form>
On an arbitrary event i have changed it to say "rss".
After refreshing the page using "F5", i access the value of alert(document.widget.position.value); which is returning "rss". WHY THE OLD VALUE?
But after refreshing the page using "Control+F5", i access the value of alert(document.widget.position.value); which is returning correct "-1". WHY NOT FIRST TIME?
I am really confused by this behavior.
NOTE: Only FireFox4 is doing it, chrome i fine but did not tested on ie.
I think it's FF's caching of forms/input element values that's bugging you. You may want to use:
<form id="widget">
<input type="hidden" id="position" value="-1" />
</form>
and to change the value:
document.getElementById('position').value = /*[your value]*/;
Furthermore <form ... autocomplete="off"> seems to work.