varun joshi varun joshi - 1 month ago 9
HTML Question

How to create dynamic radio button using javascript

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.

Answer

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, name 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>