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?

Brock Adams · Accepted Answer · 2012-09-11 11:42:24Z

4

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):

Input, fresh

But refresh the page/iframe and it looks like this!

input, stale

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.

edited Sep 11, 2012 at 11:42

answered Sep 7, 2012 at 4:40

Brock Adams

94k23 gold badges242 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1643870 Over a year ago

Thanks, the autocomplete off did the job well!

George Stocker Over a year ago

@BrockAdams You should probably put the relevant javascript from the JSFiddle into your answer. Answers should be self sufficient. If the link to JSfiddle dies (and their links have died before, a lot), then your answer no longer contains the answer.

Evan Kennedy · Accepted Answer · 2012-09-07 05:36:06Z

1

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.

edited Sep 7, 2012 at 5:36

answered Sep 7, 2012 at 3:13

Evan Kennedy

4,1851 gold badge27 silver badges32 bronze badges

3 Comments

Brock Adams Over a year ago

Actually, he's reporting buggy behavior, I just duplicated the problem; more in a mo.

user1643870 Over a year ago

Thanks, I just don't want this buggy behavior. the cart is the shopping cart I am making and the textbox on the page is the search box from my header.

Brock Adams Over a year ago

+1 for the pure JS test case. You don't need to preserve the old answer just for a comment's sake! People can tell context from the edit history, if they wish.

Collectives™ on Stack Overflow

When adding an input using JavaScript or jQuery, its value gets copied to other inputs if the page is refreshed

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related