jquery clone an input doesn't see changes to the value

Question

I have a form with hidden inputs.

I .clone() them and show them to the user in a .dialog().

The user makes some changes and i use .val() to change the hidden fields.

However the next time i clone the form(without reloading the page) i have the initial values again, and never the updates ones.

There seems to be this weird bug/result? see http://jsfiddle.net/YvBfP/ (broken for visible input too)

$(this).closest('td').find('button').click( function ()
{
    var d = $('#pagamento_anticipato').html();

    $(d).dialog({
        modal: true,
        width: 400,
        height: 300,
        close: function( event, ui ) {
                var importo = $(this).find('input[type="text"]').val();
                var descrizione = $(this).find('textarea').val();
                var select = $(this).find('select').val();
                $(this).remove();

                $('#pagamento_anticipato').find('input[id="importo"]').val( importo );
                $('#pagamento_anticipato').find('#descrizione').val( descrizione );
                $('#pagamento_anticipato').find('#tipo').find('option[value="' + select + '"]').attr('selected', true);

            }
    });
    return false;
});

I think you can change the value of div#money, but you can't modify its original html code by jquery. Any understandings? — SUN Jiangong, Dec 28 '12 at 14:58

wirey00 · Accepted Answer · 2012-12-28T15:09:42.930

10

using .val() sets/gets the current value and not the attribute for the element.

$(element).val(value) // sets current value
$(element).val() // <-- will always return the current value

to change the attribute you have to use .attr()

$(element).attr('value',value)

Then you will see the change in the HTML

http://jsfiddle.net/wirey00/bJjjw/

EDIT:

Just found out this doesn't work with jQuery 1.5.x and lower.. tested it with jQuery 1.6.0+ and it worked fine

edited Dec 28 '12 at 15:09

answered Dec 28 '12 at 14:51

wirey00

33,517
7
54
65

Doesnt work if you change original value i.e to 3000 http://jsfiddle.net/N2npH/1/ and no, i didnt downvoted – A. Wolff Dec 28 '12 at 14:53
@roasted ah.. it just doesn't work with jQuery 1.5 :/ It works fine with jQuery 1.6+ – wirey00 Dec 28 '12 at 15:00
This behaviour was changed in jQuery 1.6 - see [Properties and Attributes in HTML](http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html) for a more detailed explanation. – DCoder Dec 28 '12 at 15:24
ah so it is .attr('value', v) for input, .text() for textarea, and .attr('selected', 'selected') for select, i thought jQuery is suppose to save time xD – max4ever Dec 28 '12 at 16:07

Musa · Answer 2 · 2012-12-28T14:59:31.123

3

You are setting the value property of the input but checking to see if the value attribute has changed. To see the elements value use .val() don't check its html. However if you need to change the elements value attribute use setAttribute

$('#money')[0].setAttribute('value', 3000);

http://jsfiddle.net/YvBfP/4/

edited Dec 28 '12 at 14:59

answered Dec 28 '12 at 14:54

Musa

96,336
17
118
137

jquery clone an input doesn't see changes to the value

2 Answers2