CODEWITHSUNDEEP
javascriptjquery
Faizan
Faizan

Reputation: 101

Problem with jQuery clone(): clone input without value

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

Upvotes: 2

Views: 7413

Answers (5)

pnovales
pnovales

Reputation: 27

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/

Upvotes: 0

Abrucius
Abrucius

Reputation: 115

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

Upvotes: 1

Matt
Matt

Reputation: 7249

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?

Upvotes: 0

Rafay
Rafay

Reputation: 31043

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');

Upvotes: 0

jbachman
jbachman

Reputation: 257

try this:

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

Upvotes: 3

Related Questions