Laravel\Blade - get value of selected radio button dynamically added

Question

I'm developing a questionnaire in Laravel. The questions and their answers are printed throw a foreach. Now I need to retrieve the selected radio/answer for each question in order to insert each couple in an indexed array. The problem is that the name of the html tag radio is dynamic and not static so how can I retrieve the answer for each question?

In the code, {{$answer[0]}} is the id of the answer, while {{$answer[1]}} the text of the answer

@foreach ($question->answers as $answer)

   <div class ="radio">
      <label>
         <input type="radio" name={{$question->id_question}} value= {{$answer[0]}}>
         {{$answer[1]}}
      </label>
   </div> 
@endif
@endforeach 

Answer 1

Please have a look at this, if it's what you're looking for:

 <div id="container">

    <div class ="radio01">
      <label for="question1">question1</label><input type="radio" name="question1"  id="question1" value="answer1">
      <label for="question1">question1</label><input type="radio" name="question1"  id="question1" value="answer2">
      <label for="question1">question1</label><input type="radio" name="question1"  id="question1" value="answer3">
      <label for="question1">question1</label><input type="radio" name="question1"  id="question1" value="answer4">
      <label for="question1">question1</label><input type="radio" name="question1"  id="question1" value="answer5">

   </div> 
    <div class ="radio02">
      <label for="question2">question2</label><input type="radio" name="question2"  id="question2" value="answer1">
      <label for="question2">question2</label><input type="radio" name="question2"  id="question2" value="answer2">
      <label for="question2">question2</label><input type="radio" name="question2" id="question2" value="answer3">
      <label for="question2">question2</label><input type="radio" name="question2"  id="question2" value="answer4">
      <label for="question2">question2</label><input type="radio" name="question2"  id="question2" value="answer5">

   </div> 

....

<script>
    var selectedAnswers = function () {

    var answers = [];

    $('input:radio').each(function () {

        var $this = $(this),

            name = $this.attr('name');
            value = $this.attr('value');

        if ($(this).prop('checked')) {
            answers.push({"name":name, "value":value});
        }

    });

    return answers;

};

$('#container').on('change', ':radio', function() { console.log(selectedAnswers()); }); 

</script>

Also your html is not "optimal" missing double quotes and correct hierarchy:

   <label>
     <input type="radio" name={{$question->id_question}} value= {{$answer[0]}}>
     {{$answer[1]}}
  </label>

Should be (like in my example above):

     <input type="radio" name="{{$question->id_question}}"  id="{{$question->id_question}}" value=" {{$answer[0]}}">
     <label for="{{$question->id_question}}">{{$answer[1]}}</label>

Answer 2

Function given below to get values of all input radio.

function get_answers() {
    var answers = {};
    $.each($("input:radio"), function () {
        answers[$(this).attr("name")] = $(this).val();
    });
    return answers;
}