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

Question

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

Does $('#ex').clone().appendTo('#def'); work?

mhitza
– mhitza

2011-01-30 04:39:17 +00:00
Commented Jan 30, 2011 at 4:39 — mhitza
– mhitza, Commented Jan 30, 2011 at 4:39

Brad Christie · Accepted Answer · 2011-01-30 04:46:24Z

1

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

edited Jan 30, 2011 at 4:46

answered Jan 30, 2011 at 4:40

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

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

5 Comments

CuriousCoder Over a year ago

It doesnt work for me . What happens is , it sets the original textbox value to the clone's textbox value. It is weird. I tested it by sending the values of both the textbox to a php file and printing it there

Brad Christie Over a year ago

This is happening on the jsFiddle link I provided? It's 100% working for me, and on that fiddle page. Can you maybe explain a bit more and I'll see if I can fix it up? (or make a jsfiddle of your own with what you have so I can test against it?)

CuriousCoder Over a year ago

Okay. I am actually adding and removing textboxes dynamically to a form. When the user clicks an add button, it will add a new textbox along with the label. If the user clicks the remove button, it should remove the textbox that was added last. The problem is when i click add, a new textbox gets added, but its value is "" when i print it in a php file. Also, when i click remove, both the original textbox and the cloned textbox get removed. I set the id value as u indicated for the cloned textbox, but still when i click remove button, both the textboxes disappear

Brad Christie Over a year ago

@hari: Perhaps this updated version is what you're looking for? (I bound the actions to buttons to show the add/removal, and also used a variable to keep track)

Brad Christie Over a year ago

Not a problem. Feel free to thank me by clicking the checkbox/accept next to this answer though. And welcome to StackOverflow! ;-)

alex · Accepted Answer · 2011-01-30 05:01:13Z

0

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.

edited Jan 30, 2011 at 5:01

answered Jan 30, 2011 at 4:36

alex

492k205 gold badges891 silver badges992 bronze badges

3 Comments

CuriousCoder Over a year ago

Hi ... Does this work for a simple text box ?? I just have to replace 'textarea' with 'text' right?

alex Over a year ago

@hari Whoops, your title threw me off. I'll amend.

CuriousCoder Over a year ago

Hi,it didnt work. I dont know why. Everything is right with the code. But, still both the textbox get the same value

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related