When adding an input using JavaScript or jQuery, its value gets copied to other inputs if the page is refreshed
Question
When I use jQuery to add an <input> , the new input 's value gets copied to the page's preexisting input, whenever the page is refreshed!
Run this page in Firefox:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('<input />').attr({ 'type': 'text' }).val(2).appendTo($('#cart'));
})
</script>
</head>
<body>
<div id="cart">
</div>
<input type="text" id="afe" />
</body>
</html>
When it first loads, the original input will be blank and the input added by jQuery will have a value of 2 .
Now press F5 . Both inputs will show the value 2 !
What's going on?
2 answers
solution1
4 ACCPTED 2012-09-07 04:40:43
It looks like Firefox's autocomplete is getting confused. Chrome does not do this.
See jsfiddle.net/TAGkR .
After the initial page load , it looks like this in Firefox (15.01):
But refresh the page/iframe and it looks like this!
This is probably a bug in Firefox. Here's some ways you can work around it:
Set the first input to
autocomplete="off".
EG:<input type="text" id="afe" autocomplete="off" />See this Fiddle .
Have jQuery add the new input physically after the original one.
EG:<input type="text" id="afe" /> <div id="cart"> <!-- JavaScript/jQuery inserts input here. --> </div>See this Fiddle .
solution2
1 2012-09-07 03:13:13
The issue only applies to <input> tags which are after your cart . It will update their values to the value in jQuery one at a time upon each refresh. Check out this example: http://jsfiddle.net/TAGkR/26/
I tried using pure Javascript to see if there might have been some error with jQuery, but the same error persists as seen here: http://jsfiddle.net/TAGkR/28/
EDIT : Below this point was my old un-informed answer but I will leave it intact to make the comment below stay in context.
I'm very unclear as to what you're trying to accomplish. If you're trying to make the new textbox get the value of the other textbox, I would just wrap the val function around your current Javascript.
$(function() {
$('#afe').val(
$('<input />').attr({
'type': 'text'
}).val(2).appendTo($('#cart')).val());
});
If you want to get the value sometime after then I would get it like this:
$(function() {
$('<input />').attr({
'type': 'text'
}).val(2).appendTo($('#cart'));
$('#afe').val($('#cart input').val());
});
If you would like to clarify more I would be happy to answer. This is just what I got from what you described.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.