Change name of radio button upon jquery clone()

Question

Right here is my HTML::

<fieldset>
    <legend>Attributes</legend>

    <div class="attr_container">
        <div class="attr_entry existent row">
            <div class="half">
                <label for="attribute[]">Attribute</label>
                <input id="attribute" maxlength="50" required="required" name="attribute[]" type="text">                
                <p>
                    <a href="javascript:void(0)" class="add_attr"><i class="fa fa-plus-circle"></i> Add Another Attribute</a> 
                    <span class="remove">| 
                    <a href="javascript:void(0)" class="remove_attr"><i class="fa fa-minus-circle"></i> Remove</a></span>
                </p>
            </div>
            <div class="half">
                <label for="designator">Is this attribute a designator?</label>             <input checked="checked" name="designator[0]" type="radio" value="0" id="designator[0]"> No
                <input name="designator[0]" type="radio" value="1" id="designator[]"> Yes
            </div>
        </div>
    </div>

</fieldset>

Here is my jQuery:

    $('.add_attr').click(function() {
        // clone and add
        $( ".attr_entry:first" ).clone(true).removeClass('existent').insertAfter( ".attr_entry:last" );
    });

    $('.remove_attr').click(function() {
        // remove entry
        if($(this).parents('.attr_entry').first().hasClass('existent')) {
            alert('You can not remove the first attribute entry.');
        } else {
            $(this).parents(".attr_entry").first().remove();
        }
    });

So when I clone this, I want to know how to change the name attribute to designator[1] .. so adding one to that. I'm not sure how to do that while still cloning and inserting after the last appended clone.

Here is the HTML I referenced to figure out how to accept array of radio buttons:

Radio buttons + array elements

Because I need to know the attribute which I can do in my PHP for loop and grab the right designator that belongs to it.

Thanks for any help!

I know there is an attr() method. I'm just not sure how to do that before the cloning action takes place because after the clone it removes the first radio button selection and puts it on that one so each one can't be selected. — user3130415, Jan 15 '14 at 21:26

BenM · Accepted Answer · 2014-01-15T21:40:47.837

4

You can get the new index by assessing how many $('.attr_entry') elements exist. Then, you can combine find() and prop() to set the name of the radio buttons.

Amend your clone() line as follows:

var newIndex = $('.attr_entry').length;
$('.attr_entry:first').clone(true).removeClass('existent').insertAfter('.attr_entry:last').find('input[type="radio"]').prop('name', 'designator['+newIndex+']');

jsFiddle Demo

Please also be advised that the id attribute for elements should be unique, so you might want to consider updating that at the same time (using the same prop() method).

edited Jan 15 '14 at 21:40

answered Jan 15 '14 at 21:24

BenM

52,573
26
113
168

They are radio buttons, not checkboxes because I want them to select either or and make it mandatory.. not where they wouldn't have to select Yes or No with checkboxes.. It's mandatory for each entry. – user3130415 Jan 15 '14 at 21:25
Sorry, my bad. One second, I'm working on the correct solution for you. – BenM Jan 15 '14 at 21:31
Your jQuery works but for some odd reason, it unchecks the radio button in the first one, then when I Duplicate it again, the 2nd stays checked but the ones after that dont have a default value.. like I had in the beginning. Any idea why? – user3130415 Jan 16 '14 at 14:00
And I erased the IDs off of them. I just put classes on them instead. – user3130415 Jan 16 '14 at 14:08
Nevermind instead of making them radio buttons, I made them select boxes =) – user3130415 Jan 16 '14 at 14:32

score 2 · Answer 2 · answered Jan 15 '14 at 21:29

Not overly familiar with clone in jquery You can set attributes using the attr() function.

So your code would look something like this:

var designatorIndex = 0;
$('.add_attr').click(function() {
    // clone and add

    var myVar = $( ".attr_entry:first" ).clone(true).removeClass('existent');

    $(myVar).attr('name', 'designator' + designatorIndex );
    $(myVar).id('designator' + designatorIndex);
    designatorIndex++;
    $(myVar).insertAfter( ".attr_entry:last" );
});

None of this code works. I even altered it over and over again and couldn't make it work. — user3130415, Jan 16 '14 at 14:12

Change name of radio button upon jquery clone()

2 Answers2