CODEWITHSUNDEEP
jqueryclone
CuriousCoder
CuriousCoder

Reputation: 1600

Problem in using JQuery's clone() for text box

This is what i need to clone: 

<p id="ex">
<label for="c2">Enter your Choice</label>
<br>
<input type="text" name="c2_r" id="c2" value="" />
<br> 
</p>

I clone it by this statement:

$("#def").append($("#ex").clone());

As i see, it is cloning the p element. But,i actually want it to clone the p tag and set the value of textbox inside it to "". Can someone explain me what to do ? Also, i need to set the id of the textbox inside cloned element to be different from the original . Please help. Thanks

Upvotes: 3

Views: 2009

Answers (2)

alex
alex

Reputation: 490263

Here you go...

var clonedP = $('#ex').clone();

clonedP
 .attr({ id: 'new_id' })
 .find('input')
  .attr({id: 'new_input_id'})
  .val('');

$('#def').append(clonedP);

I put code in place to change their id attribute, because an id must be unique per page.

You will also need to change the name attribute (i.e. different names for different inputs) if you are intending to read this data in a sane fashion.

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101614

// first we grab the clone. We also want to change the <p>'s id, as it's
// not valid to have two elements within a page with the same ID.
$('#ex').clone().attr({
  id: 'newpid' // paragraph's ID
// next, we alter the input inside it (change ID, clear value).
}).find('input').attr({
  value: '',
  id: 'newid' // <input>'s ID
// call end to stop the ".find", then add it to the #def element
}).end().appendTo('#def');

Working Example: http://www.jsfiddle.net/F4rRQ/1/

Upvotes: 1

Related Questions