JS - jQuery dynamically add and remove fields

Question

I am trying to make a dynamically duplicated field with jQuery :

The HTML (PHP) code :

<div  id="widget_dup">
    <p>

    <textarea class="code" cols="50" rows="5" id="o99_brsa_settings[brsa_dash_wdgt_content]"  name="o99_brsa_settings[brsa_dash_wdgt_content]"  value="<?php //echo $o99_brsa_options['brsa_dash_wdgt_content']; ?>"/><?php 
                        echo $o99_brsa_options['brsa_dash_wdgt_content']; 
                        ?></textarea>
                        <label class="description" for="o99_brsa_settings[brsa_dash_wdgt_content]">
                        </br><?php _e('Content for 1st widget', 'o99-brsa-domain'); ?>
                        </label>

    </p>
</div>
<div id="addScnt">add</div><div id="remScnt">remove</div>

the JS was assembled from some snippets I found :

<script type="text/javascript">

                //http://jsfiddle.net/obmero99/ZD9Ky/

                    // <![CDATA[

                    jQuery(function() {
                            var scntDiv = jQuery('#widget_dup');
                            var prevDiv = scntDiv.html();

                            var i = jQuery('#widget_dup p').size() + 1;

                            jQuery('#addScnt').live('click', function() {

                                    jQuery(prevDiv).appendTo(scntDiv);

                                    i++;
                                    //alert (prevDiv);
                                    return false;
                            });

                            jQuery('#remScnt').live('click', function() { 
                                    if( i > 2 ) {
                                            jQuery(this).parents('p').remove();
                                            i--;
                                    }
                                    return false;
                            });
                    });

                    // ]]>
                </script>

The problem is that this code will duplicate the fields ok, but without changing the ID , names and other attributes ( ID, NAME ,FOR etc.. )

I have tried to do : jQuery(this).attr('id')+i; and jQuery(this).attr('name')+i;, but it does not work as I intend. infact, it does not work at all. :-)

How can I modify the attr() of the field while is theory it does not exists yet ?

As per comments: fiddle is here: http://jsfiddle.net/obmerk99/uZuWA/

Instead of using .html(), use .clone(), and you can set attributes with .attr() as youve been trying — Ian
– Ian, Commented May 4, 2013 at 9:00

Ivan Drinchev · Accepted Answer · 2013-05-04 09:15:21Z

4

The correct use of setting attribute is

$(this).attr('id', i);

You should know, that the better use is with clone(), as Ian suggested!

Demo with .clone

http://jsbin.com/oqalig/1/edit

edited May 4, 2013 at 9:15

answered May 4, 2013 at 9:03

Ivan Drinchev

19.6k4 gold badges69 silver badges97 bronze badges

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

8 Comments

A. Wolff Over a year ago

You are not setting attribute here but getting instead

Ivan Drinchev Over a year ago

You are right, I edited it ... missed, a comma instead of "+"

Obmerk Kronen Over a year ago

but using CLONE makes the script works only ONCE . aand also, It does not seem to change the ID´s .. Is there anything else wrong there ?

Obmerk Kronen Over a year ago

ok, I understand it is working as a general rule, but on my script it does not. So I figure I have done something else wrong there..

Ivan Drinchev Over a year ago

This seems like another question. Can you recreate your problem code in jsbin / jsfiddle?

|

Collectives™ on Stack Overflow

JS - jQuery dynamically add and remove fields

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related