CODEWITHSUNDEEP
javascriptjqueryhtml
lakedejavu
lakedejavu

Reputation: 27

how do I check dynamically generated radio input value

I have to generate multiple input fields dynamically for each time user clicks "add" button and I was successfully able to get them. Each contact should have this radio input field in different different name so I've created a name in an array form.

Here's what I have so far and I wonder how I'm supposed to get the radio value for each person:

var options = '';
var count = 0;
var maxfields = 4;

$('button#add').click(function() {
  options = '<p>Visit Type:
 <label class="radio-inline">
 <input  type="radio" class="c_visittype' + count +'" name="c_visittype[]" value="Student" required>Student</label>
<label class="radio-inline">
<input type="radio" class="c_visittype' + count +'" name="c_visittype[]" value="Visitor" required>Visitor</label> </p>';   


   if(count < maxfields){
        count++;     
    $(options).fadeIn("slow").appendTo('.companion');

    return false;
  }
}); 

 $('.c_visittype' + count).on('click', function(){
    $('input:radio[name="c_visittype"]').attr('checked', 'checked');
  });

Each person should get a choice of either 'student' or 'visitor' and I have to get this value for multiple persons whenever more person fields created.The reason why I put field's name as an array is to iterate it in the next page by php.

Upvotes: 2

Views: 79

Answers (3)

Solomon Ucko
Solomon Ucko

Reputation: 6109

var inputValues = [];
$('.c_visittype:checked').each(function() {
    inputValues.push($(this).val());
});
// Your code using inputValues

For update on changes:

$(function() {
    $('.c_visittype').click(function(){
        // Insert code here
    }
)});

Make sure to move the numbering from the class attribute to the name attribute (like it was, everything was part of the same set of options). Also, put the whole string on 1 line.

Upvotes: 0

Alexander Bolzhatov
Alexander Bolzhatov

Reputation: 298

<script src="http://code.jquery.com/jquery-2.2.4.min.js"          integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="               crossorigin="anonymous"></script>
<script>
    $( document ).ready(function() {
        var options = '';
        var count = 0;
        var maxfields = 4;

        $('button#add').click(function() {
            var options = '<p style="display: none">Visit Type:<label class="radio-inline"> <input  type="radio" class="c_visittype' + count +'" name="c_visittype' + count +'[]" value="Student" required>Student</label> <label class="radio-inline"><input type="radio" class="c_visittype' + count +'" name="c_visittype' + count +'[]" value="Visitor" required>Visitor</label> </p>';   

            if(count < maxfields){
                count++;     
                $('.companion').append(options);
                $(".companion p:last").fadeIn();
            }
        }); 
    });
</script>

<button id="add">add</button>
<div class="companion">

</div>

Upvotes: 1

Jack Marchetti
Jack Marchetti

Reputation: 15754

$('input[name=c_visittype[]]:checked').val();

That's how you access the value of a checked radio button with jQuery.

Upvotes: 0

Related Questions