javascript - Problem with jQuery clone(): clone input without value - Stack Overflow

admin管理员组

文章数量:1334887

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 overe 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

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 overe 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

• javascript
• jquery

Share Improve this question Follow edited Aug 19, 2011 at 12:04 Luwe 3,03411 gold badge2222 silver badges2222 bronze badges asked Aug 19, 2011 at 10:35 FaizanFaizan 10111 gold badge22 silver badges55 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

try this:

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

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

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

Works fine with me:

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


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

http://jsfiddle/sXL2b/

or by using insertAfter:

http://jsfiddle/sXL2b/1/

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

Do you really need to clone?

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/pnovales/yF2zE/5/

本文标签： javascriptProblem with jQuery clone() clone input without valueStack Overflow