Home/ Questions/Q 8498305
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T00:21:58+00:00

When I use jQuery to add an <input> , the new input ‘s value

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    1. Set the first input to autocomplete="off".
      EG: <input type="text" id="afe" autocomplete="off" />

      See this Fiddle.

    2. 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.

    • 0