Question 244924 in Html Question posted in
Some basic documentation can be found here.

Html – How to check if a radio button has a value (has been checked at least one) on click of a button

I need to check if at least one radio button has been checked when I click the button to continue to the next step of the form. I need it to be dynamic, so I can use it for all the fields I need, and I can’t figure it out why it’s not working.
Please check the code, I need to check the value so I can use it for all type of fields. I know it works if I enter the radio button name, but I need it dynamic.
Thank you

<script>
function nextStep2(id) {
        var fieldname = $("#"+id).attr("name");
        var nomecampo = "m_"+fieldname;
        
        if (frmMain.nomecampo.value=="") {
            alert("Please select an answer to continue.");
            return;
        }

        $("#step" + current_step).fadeOut(200);
        $("#step" + (current_step + 1)).delay(200).fadeIn(200);
        current_step ++ ;
    }
</script>

/* MY HTML */
<form id="frmMain" name="frmMain">
     <input type="radio" class="noradio" name="m_question_step1" id="m_question_step1-1" value="yes">
     <label class="radio-inline" for="m_question_step1-1"><span>Yes</span></label>

     <input type="radio" class="noradio" name="m_question_step1" id="m_question_step1-2" value="yes">
     <label class="radio-inline" for="m_question_step1-2"><span>Yes</span></label>

     <button id="bottone1" class="button btn-full btnlight" type="button" name="question_step1" onclick="nextStep2(this.id);">Continue</button>
</form>
Tags:

2

Answers


  1. 0

    In your code, frmMain.nomecampo.value won’t work because nomecampo is just a string containing the name of the radio button group, not a reference to the actual radio buttons. Try this:

    <script>
function nextStep2(id) {
    var fieldname = $("#" + id).attr("name");
    var selectedRadio = $("input[name='" + fieldname + "']:checked");

    if (selectedRadio.length === 0) {
        alert("Please select an answer to continue.");
    }
    else {
        $("#step" + current_step).fadeOut(200);
        $("#step" + (current_step + 1)).delay(200).fadeIn(200);
        current_step++;
    }
}
</script>

    Im using the :checked selector to filter only the checked radio buttons within that group.

    Login or Signup to reply.
  2. 0

    If I understand you correctly, what you want to do is something like this:

    I changed the button to a submit button (for sermantic purposes).

    <button type="submit">Continue</button>

    $('form').on('submit', (e) => {
  e.preventDefault();
  var formIsValid = false;
  $('input[type="radio"]').each(function(){
    if($(this).is(':checked')){
      formIsValid = true;
      return
    }
  })
  if(formIsValid){
    $("#step" + current_step).fadeOut(200);
    $("#step" + (current_step + 1)).delay(200).fadeIn(200);
    current_step ++ ;
  }else{
    alert("Please select an answer to continue.");
  }
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search