0

I'm rendering a form with radio buttons using JQuery and then trying to read the value of the selected radio option when the submit button is clicked. However all i get is undefined values.

I tried to return .val() and read an attribute of the input element like .attr("name"), but everything returns 'undefined'.

Here is how i create the input elements inside a form:

  let options = $("<div></div>");
  for (let answer of questionnaire[currentQuestion].answers) {
    let a = $("<input></input>").attr({
      "name":questionnaire[currentQuestion].name,
      "type":"radio",
      "value":answer.value
    });
    let l = $("<label></label>").text(answer.label);
    options.append(a,l);
  }

When inspecting the HTML elements in browser page, each input element looks like this:

<input name="comfortfood" type="radio" value="steak">
<label>Medim-rare flat iron Steak</label>

And this is how i try to read the value:

$('input:radio[name='+questionnaire[currentQuestion].name+']:checked').val()

I checked other threads here (like this one) but still can't get my code to work. I'm new to all this so probably missing something obvious.

EDIT: I ended up creating a click event on each radio button and then reading value with event.currentTarget as suggested by @Sakata Gintoki in his comment below

Stas Polivyanenko
  • 31
  • 5

2 Answers2

1

Please check my snipet code bellow:

  1. You should declare class name to use in query -> avoid confusing when we have many divs

  2. In the function which is used to get the value, you should get exactly target element that you have just clicked. (event.currentTarget)

  3. Should use forEach instead of for

  4. In case you get from another action (by clicking another element), you should get child element from parent element

Hope it's useful.

let answers = [
    {
      label: 'A',
      value: 1
    },
    {
      label: 'B',
      value: 2
    },
    {
      label: 'C',
      value: 1
    }
  ];
  
  let options = $(".your-options");
  let message1El = $(".message-1");
  let message2El = $(".message-2");
  answers.forEach(answer => {
    let a = $("<input></input>").attr({
      "name": 'question',
      "type":"radio",
      "value": answer.value
    });
    let l = $("<label></label>").text(answer.label);
    options.append(a, l);
  });
  
  $('input:radio[name="question"]').on('click', (event) => {
  let currentEl = event.currentTarget;
    if (currentEl.checked) {
      message1El.html('Option ' + currentEl.value + ' has just selected');
    }
  });
  
  // in case you get from other
  $('.check-selected-radio').on('click', () => {
    let checkedEl = $('.your-options').find('input:checked');
    
    if (checkedEl.length) {
      message2El.html('Ah ha! Option ' + checkedEl.val() + ' was selected');
    }
    
  });
.your-options,
.message {
  margin-bottom: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="your-options"></div>
<div class="message message-1"></div>
<div class="message message-2"></div>
<button class="check-selected-radio">Check selected radio</button>
Sakata Gintoki
  • 1,817
  • 16
  • 23
-1
document.querySelector('input[name="comfortfood"]:checked').value;

Dynamically read Radio value;

document.querySelector('input[name="'+questionnaire[currentQuestion].name+'"]:checked').value;

This is how you can get your value with javascript for the selected radio button. which is answered in this thread earlier.

Muhammad Zubair Saleem
  • 507
  • 6
  • 23