Adding div dynamically but issues with input type radio

Question

I am using a <a> on click of which i am cloning a div. In div i have two radio buttons with same name.

Now the problem is when i select one radio option and clone the div the next two radio buttons come with same name and selected radio button from last div got unselected.

$('.addMore').on('click', function() {
  $('.addMoreDiv:last').clone().insertAfter('.addMoreDiv:last');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="addMoreDiv">
  <label>
    <input type="radio" name="optradio">Radio 1
  </label>
  <label>
    <input type="radio" name="optradio">Radio 2
  </label>
</div>

<a href="#" class="addMore">Add More</a>

I tried updating name according to length but didn't work and name updates after addition of div.

Is there any option so that when i add new div it comes with different names also the selection of last div will not effect?

clone() method just add one more copy of the element. The element's attributes remain the exact same. But you are not changing the name attribute in your code . — Lucky
– Lucky, Commented Jun 22, 2016 at 7:57
What about saving the result of the clone in a var, edit the name of it, and then reinsert it? — sailens
– sailens, Commented Jun 22, 2016 at 7:58
@sailens could u share an example of it how to change the variable — Gaurav Aggarwal
– Gaurav Aggarwal, Commented Jun 22, 2016 at 8:31
@lucky i am changing the name with javascript bt as clone method already insert a new element after that the name is changed so the problem still exists.. — Gaurav Aggarwal
– Gaurav Aggarwal, Commented Jun 22, 2016 at 8:32

vijayP · Accepted Answer · 2016-06-22 08:20:18Z

2

As suggested by @sailens; we need to change the name of radio group so that it will be considered as totally newer set of radio buttons. We can achieve it in following way:

var count = 0;
$('.addMore').on('click', function() {
  var clonedDiv = $('.addMoreDiv:last').clone();
  clonedDiv.find("input[type=radio]").each(function(){
    $(this).attr("name","optradio_"+count);
  });
  count++;
  clonedDiv.insertAfter('.addMoreDiv:last');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="addMoreDiv">
  <label>
    <input type="radio" name="optradio">Radio 1
  </label>
  <label>
    <input type="radio" name="optradio">Radio 2
  </label>
</div>

<a href="#" class="addMore">Add More</a>

answered Jun 22, 2016 at 8:20

vijayP

11.5k5 gold badges28 silver badges42 bronze badges

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

Comments

guradio · Accepted Answer · 2016-06-22 08:05:56Z

0

$('.addMore').on('click', function() {
  $('.addMoreDiv:last').clone().insertAfter('.addMoreDiv:last');
  $('.addMoreDiv').each(function(i, v) {
    $(this).find('input').attr('name', 'optradio' + i)

  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="addMoreDiv">
  <label>
    <input type="radio" name="optradio">Radio 1
  </label>
  <label>
    <input type="radio" name="optradio">Radio 2
  </label>
</div>

<a href="#" class="addMore">Add More</a>

After cloning and inserting go through all the div and find the input and change the attr name this will make the radio button separate from each other on every div

answered Jun 22, 2016 at 8:05

guradio

15.6k4 gold badges39 silver badges65 bronze badges

4 Comments

Gaurav Aggarwal Over a year ago

You did the same thing...check your own result problem is still there

guradio Over a year ago

@GauravAggarwal when i select radio button each are independent. when you select radio1 in first line it wont deselect the other radio button that is what the OP wants

Gaurav Aggarwal Over a year ago

Bt if you select any radio and then click addmore the selection disappears.

guradio Over a year ago

@GauravAggarwal i see i didnt saw it.. it is because it renames the name attr every click. i will update it to change only the name attr of cloned element

Yogesh Shakya · Accepted Answer · 2016-06-22 08:18:31Z

0

Try this:

var clone = '';

  var count = 0;
  $('.addMore').on('click', function() {

    clone += '<div class="addMoreDiv">';
      clone += '<label>';
        clone += '<input type="radio" name="optradio'+count+'">Radio 1';
      clone += '</label>';
      clone += '<label>';
        clone += '<input type="radio" name="optradio'+count+'">Radio 2';
      clone += '</label>';
    clone += '</div>';

    $('.addMoreDiv').after(clone);

    count++;
  });

Still facing problem. please comment below.

answered Jun 22, 2016 at 8:18

Yogesh Shakya

3553 silver badges15 bronze badges

1 Comment

Gaurav Aggarwal Over a year ago

Yeah this will work bt the html i shared was just an example bt the actual structure is very big i cant write all the string for it.

Srinu Chinka · Accepted Answer · 2016-06-22 09:37:55Z

0

Find the below code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="addMoreDiv">
  <label>
    <input type="radio" name="optradio">Radio 1
  </label>
  <label>
    <input type="radio" name="optradio">Radio 2
  </label>
</div>

<a href="#" class="addMore">Add More</a>

Script to create new div with different radio names:

$('.addMore').on('click', function() {
  // total number of div's, to create unique name for `radio`
  var n = $('.addMoreDiv').length;
  var lastdiv = $('.addMoreDiv:last');
  var newdiv = lastdiv.clone();

  // changing the name for `radio`
  newdiv.find('input[type="radio"]').prop('name', 'optradio'+n);

  // adding after changing names.
  newdiv.insertAfter(lastdiv);

});

edited Jun 22, 2016 at 9:37

answered Jun 22, 2016 at 8:17

Srinu Chinka

1,48913 silver badges19 bronze badges

2 Comments

Gaurav Aggarwal Over a year ago

As i told in my question before changing name the div is added so the same problem exists.

Srinu Chinka Over a year ago

just swap the newdiv.insertAfter(lastdiv); and below line then it will change the names before adding like i done in the answer.

Collectives™ on Stack Overflow

Adding div dynamically but issues with input type radio

4 Answers 4

Comments

4 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related