CODEWITHSUNDEEP
javascriptjqueryforms
JPB
JPB

Reputation: 600

Set hidden input value depending on radio button selection

I have a checklist form that tallies a score based on the radio button selection that is working fine. When I post the form I want to get a value of "yes" or "no" from a hidden input with the same class based on radio button selection.

Because the "value" field is taken up by an integer for the scoring I want to pass a value to a hidden form input with the same class name. The value of the hidden input will be "no" if the value of the radio button selected is 0, or else it will be "yes".

I would like to be able to iterate it through all radio input groups (there are many). This is what I am trying to acheive in jquery written in English:

FOR each radio input group, IF the value of radio button selected is 0 then value of hidden input with the same class is "No", ELSE it is "yes".

I am having trouble with the javascript and would appreciate some assistance.

HTML

<!--Radio button example -->
<li>
    <label>Does 1 + 1 equal 10 ?</label>
    <input type="radio"  class="radio1" name="question" value="1">Yes</input>
    <input type="radio"  class="radio1" name="question" value="0">No</input>
    <input type="hidden" value="" id="answer" class="radio1"></input>
</li>

Thank you in advance, please let me know if you need more information.

Upvotes: 1

Views: 6547

Answers (3)

mplungjan
mplungjan

Reputation: 178109

  1. Give the answers unique IDs if you need to use them
  2. If you add [] to the name of the questions PHP will treat them as array and you can use a ternary to set the value $answer = $question=="1"?"YES":"NO";
  3. If you still need to use a hidden field, here is code that does not look at the ID but at the name and type of field in each LI

$(function() {
  //$("#questionnaire").on("submit", // better but not allowed in the SO snippet
  $("#send").on("click",
    function(e) {
      e.preventDefault(); // remove when tested
      $("#questionnaire ul li").each(function() {
        var $checkedRad = $(this).find('input[name^=question]:checked');
        var $answerField = $(this).find("input[name^=answer]");
        $answerField.val($checkedRad.val()=="0"?"NO":"YES");
      });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="questionnaire">
  <ul id="questions">
    <li>
      <label>Does 1 + 1 equal 10 ?</label>
      <input type="radio" class="radio" name="question1" value="1">Yes</input>
      <input type="radio" class="radio" name="question1" value="0">No</input>
      <input type="hidden" value="" name="answer1" class="radio"></input>
    </li>
    <li>
      <label>Does 1 + 1 equal 20 ?</label>
      <input type="radio" class="radio" name="question2" value="1">Yes</input>
      <input type="radio" class="radio" name="question2" value="0">No</input>
      <input type="hidden" value="" name="answer2" class="radio"></input>
    </li>
  </ul>
  <button id="send" type="button">Click</button>
</form>

Upvotes: 1

Joe
Joe

Reputation: 2540

$("input[type='radio']:checked").each(function(i, element) {
      var hiddenVal = $(element).value() === "0" ? "No" : "yes"
      $("." + $(element).attr("class") + "[type='hidden']").val(hiddenVal);
})

Upvotes: 0

Vishal Kottarathil
Vishal Kottarathil

Reputation: 346

Attach a JQuery event to radiobutton change

$(document).ready(function() {
    $('input.radio1[type=radio]').change(function() { //change event by class
        if (this.value == '0') {
            $(this.ClassName[type=hidden]).val("No");
        }
        else if (this.value == '1') {
           $(this.ClassName[type=hidden]).val("Yes");
        }
    });
});

This code may contain syntax errors, consider this as a pseudo code and Do It Yourself

Upvotes: 1

Related Questions