Question

So I have this div with a field (input[type=text]) inside it and I’m creating a copy of this div’s contents and displaying the copy to the user to edit it’s value. When they update the copy’s value it’s then submitted which changes the value of the original.

The problem is that when I delete the copy and make a new copy from the hidden div again the text appearing in the field of the new copy is the original text (when the page loaded) and not the new text that it was updated to. The original field shows the new text inside it, but when I inspect element on it, the value attribute shows the old text.

In other words everything is correct except the text showing up in the copies and the value attribute of the original.

So I’m wondering if I’m doing something wrong or if there’s some kind of work-around.

Here’s a code example:

<div style="display:none">
    <input type="text" value="test" />
    <a>Submit</a>
</div>
<button class="get">Get value</button>
<button class="show">Show hidden one</button>
<button class="copy">Copy hidden one</button>​
$('button.copy').click(function(){
    $('<br><span>'+$('div').html()+'</span>').appendTo('body');
});

$('a').live('click',function(){
    $('div input').val($('span input').val());
    $('span').remove();
});

$('button.get').click(function(){
    alert($('div input').val());
});

$('button.show').click(function(){
    $('div').show();
});

​My jsFiddle

Answer 1

.val() doesn’t update the value attribute, so when you do .html() or inspect element you are seeing the original html and not the value. If you change one line of your code above to:

$('div input').attr("value", $('span input').val());

It should work as you are expecting it to. I have seen similar issues with .data() when trying to set a data-attribute with .data then retrieve it with .attr("data-