How to create dynamic radio button using javascript

Question

Hi my task is to dynamically add fields to a form when I click on a link.

I was successfull for text field, as well as file type, but not when I try to do this for inputs of type radio button.

Suppose I have created two rows and in one row I select gender, e.g. male, and in second row I want to select female then it will disappear the value of radio button from the first row. So I want to select different radio button values for different multiple rows.

Here is my code:

var counter = 0;
$(function(){
  $('p#add_field').click(function(){
    counter += 1;
    $('#container').append(
      '</br><strong>Item ' + counter + '</strong><br />'
      + '<input id="field_' + counter + '" name="item[]' + '" type="text" />' 
      +'<strong>quantity ' + counter + '</strong>' 
      +'<input class="qty" id="quantity' + counter + '" name="quantity[]' + '" type="text" />' 
      +'<strong>rate ' + counter + '</strong>' 
      +'<input id="rate' + counter + '" name="rate[]' + '" type="text" />' 
      +'<strong>Amount ' + counter + '</strong>' 
      +'<input id="field_' + counter + '" name="amount[]' + '" type="text" />' 
      +'<strong>img ' + counter + '</strong>' 
      +'<input id="field_' + counter + '" name="image[]' + '" type="file" />' 
      +'<strong>Gender ' + counter + '</strong>' 
      +'<input id="male_' + counter + '" name="gender[]' + '" type="radio" value="male"/>Male' 
      +'<input id="female_' + counter + '" name="gender[]' + '" type="radio" value="female"/>female'   
    );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="custom.js"></script>

<h1>Add your Hobbies</h1>
<form method="post" action="save.php" enctype="multipart/form-data">
  <div id="container">
    <p id="add_field"><a href="#"><span>Add Field</span></a></p>
  </div>

  <input type="submit" name="submit_val" value="Submit" />
</form>

Please let me know where I am wrong.

Shubham Khatri · Accepted Answer · 2016-10-21 08:22:31Z

Only one radio button can be selected from a list of radio button which have the same name. i.e why you are not able to select radio button for each row. To solve this, make use of counter to give separate names to each row that you add, like '<input id="male_' + counter + '" name="gender' + counter + '[]" type="radio" value="male"/>Male'

var counter = 0;
$(function(){
    $('p#add_field').click(function(){
    counter += 1;
    $('#container').append(
        '</br><strong>Item ' + counter + '</strong><br />'
        + '<input id="field_' + counter + '" name="item[]' + '" type="text" />' 
        +'<strong>quantity ' + counter + '</strong>' 
        +'<input class="qty" id="quantity' + counter + '" name="quantity[]' + '" type="text" />' 
        +'<strong>rate ' + counter + '</strong>' 
        +'<input id="rate' + counter + '" name="rate[]' + '" type="text" />' 
        +'<strong>Amount ' + counter + '</strong>' 
        +'<input id="field_' + counter + '" name="amount[]' + '" type="text" />' 
        +'<strong>img ' + counter + '</strong>' 
        +'<input id="field_' + counter + '" name="image[]' + '" type="file" />' 
        +'<strong>Gender ' + counter + '</strong>' 
        +'<input id="male_' + counter + '" name="gender' + counter +  '[]" type="radio" value="male"/>Male' 
        +'<input id="female_' + counter + '" name="gender' + counter + '[]" type="radio" value="female"/>female'   
        );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Add your Hobbies</h1>
<form method="post" action="save.php" enctype="multipart/form-data">

     <div id="container">
     <p id="add_field"><a href="#"><span>Add Field</span></a></p>
     </div>

     <input type="submit" name="submit_val" value="Submit" />
     </form>


    </body>
    </html>

Razib Al Mamun · Accepted Answer · 2016-10-21 08:15:50Z

0

When you add more radio button your all radio button name is same, that's why you was select only one radio button.

So, Change your radio button like this :

+'<input id="male_' + counter + '" name="gender_'+counter+'[]" type="radio" value="male"/>Male' 
+'<input id="female_' + counter + '" name="gender_'+counter+'[]" type="radio" value="female"/>female'

answered Oct 21, 2016 at 8:15

Razib Al Mamun

2,7111 gold badge18 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to create dynamic radio button using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related