Problem with jQuery clone(): clone input without value

Question

I am using jquery .clone() and it is working fine. However my problem is that when I clone my input field it also clones the value of the previous field. I don't want to clone the value. How can I overcome this issue?

Here is my code

function addrow(){
    var num     = $('.clonedInput').length;
    var newNum  = new Number(num + 1);     
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
    $('#input' + num).after(newElem);

    jQuery('.clonedInput').each(function(){
        jQuery('#total', jQuery(this)).unbind('blur');
    });

    var ci = jQuery('.clonedInput:last');
    jQuery('#total', ci).blur(function() {
        addrow();
    });
}

Regards,

Faizan

jbachman · Accepted Answer · 2011-08-19 10:36:56Z

3

try this:

var newElem = $('#input' + num).clone().attr('id', 'input' + newNum).val('');

answered Aug 19, 2011 at 10:36

jbachman

2572 silver badges6 bronze badges

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

1 Comment

Faizan Over a year ago

Yes I have tried it but its not working. Cloning the same value again

Abrucius · Accepted Answer · 2012-12-18 13:56:52Z

1

I might be late with this, but it's not clear whether your "#input" is actually an input field. Only then you can set it's value.

After you place your cloned element, try:

newElem.find('input:first').val(null);

answered Dec 18, 2012 at 13:56

Abrucius

1156 bronze badges

Comments

Rafay · Accepted Answer · 2011-08-19 10:38:45Z

0

add this line after the clone

var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.removeAttr('value');

or

var newElem = $('#input' + num).clone().attr('id', 'input' + newNum).removeAttr('value');

answered Aug 19, 2011 at 10:38

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

2 Comments

321X Over a year ago

There is no need to do this via the attribute methods since there is a shorthand notation for it.

Leniel Maccaferri Over a year ago

Really interesting: removeAttr('value') worked for me but setting val("") was not changing the value of the cloned input... was going crazy with this one! :)

Matt · Accepted Answer · 2011-08-19 11:08:04Z

0

Works fine with me:

<div id="con">
<input id="input1" value="some text" />
</div>


$("#input1").clone().val("").attr("id", "input2").appendTo("#con");

http://jsfiddle.net/sXL2b/

or by using insertAfter:

http://jsfiddle.net/sXL2b/1/

Try this instead of cloning: http://jsfiddle.net/sXL2b/4/

Do you really need to clone?

edited Aug 19, 2011 at 11:08

answered Aug 19, 2011 at 10:55

Matt

7,2677 gold badges54 silver badges78 bronze badges

6 Comments

jbachman Over a year ago

if you check the source code of your example you'll see that although the value is not displayed the attribute is still populated with the cloned data.

Matt Over a year ago

@jbachman jsfiddle.net/sXL2b/2 im showing input2, i can't see it right now just because i don't have firebug on this machine. It should technically clone it. Honestly i would probably do something different than clone though.

Faizan Over a year ago

Yes that is my problem is. I am still getting the value cloned.

Matt Over a year ago

@Faizan i updated with a new one without clone. Can you go without cloning?

Faizan Over a year ago

Yes I can use other solution to.. Basically I have a row of 5 input fields and I am adding a Add new row functionality on my Form.

|

pnovales · Accepted Answer · 2014-05-07 16:50:59Z

You can clean all the inputs with .val(""):

<div class="">        
    <div id="references">
        <div class="">
            <div class="">
                <div class="">
                    <input type="text" name="name-reference" class="" placeholder="Name" >

                </div>
                <div class="">
                    <input type="text" name="relationship-reference" class="" placeholder="Relationship" >
                </div>
            </div>
        </div>
        <div class="">
            <div class="">
                <div class="">
                    <input type="text" name="employer-reference" class="" placeholder="Employer" >
                </div>
                <div class="">
                    <input type="tel" name="phone-reference" class="" placeholder="Phone Number" >
                </div>
            </div>
        </div>
        <div class="">
            <button id="add" class="">Add</button>
            <button id="remove" style="display:none;">Remove</button>


    </div>
</div>

The script:

var reference_form_index = 0;
$("#add").on('click', function(){
   reference_form_index ++;        

    $(this).parent().parent().after($("#references").clone().attr("id","references" + reference_form_index));

    $("#references" + reference_form_index + " :input").each(function(){
        $(this).attr("name",$(this).attr("name") + reference_form_index);
        $(this).attr("id",$(this).attr("id") + reference_form_index);
        $(this).val('');
    });

$("#remove" + reference_form_index).css('display', 'inline');

$(document).on( 'click', "#remove" + reference_form_index, function(event){
        $(this).parent('div').parent('div').remove();
    } );

    $("#add" + reference_form_index).remove();

});

You can see it in action on: http://jsfiddle.net/pnovales/yF2zE/5/

Collectives™ on Stack Overflow

Problem with jQuery clone(): clone input without value

5 Answers 5

1 Comment

Comments

2 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related