Requiring radio button selection in Javascript

Question

I'm a total beginner to JS, trying to create a radio button with two options (left/right), in which one of the two options needs to be selected for the program to continue, or else it will display an error screen.

I've got code that will either prevent the participant from continuing no matter what they press (i.e. the error pops up regardless), or code that will allow the participant to continue no matter what (i.e. the program continues even if they don't select one of the options.) I feel like this could be something with my logical operators, but I'm really not sure. I've tried using a manual XOR and that doesn't seem to be the problem.

I'm using adapted code, so please let me know if there's anything else I can/should include!

<div class="radio"><label><input id="option1"  name="option1" type="radio" value="Right"  />Right</label></div>
<div class="radio"><label><input id="option1" name="option1" type="radio" value = "Left" />Left</label></div>

Code that causes the error no matter what:

<input onclick="function filledOut(id) { return (document.getElementById(id).value == 'Left')} if(filledOut('option1') ) { next(); }else{ alert('Please provide a response.'); }" type="button" value="Continue" /> </div>
</div>

Code that causes the program to continue:

<input onclick="function filledOut(id) { return ((document.getElementById(id).value == 'Left')|| (document.getElementById(id).value == 'Right'))} if(filledOut('option1') ) { next(); } else{ alert('Please provide a response.'); }" type="button" value="Continue" /> </div>
</div>

For future reference, questions like this might be better served on Code Review: https://codereview.stackexchange.com/. — computercarguy, May 12 '19 at 01:56
Note: the `` tag does not use and does not need a closing slash and never has in HTML. — Rob, May 12 '19 at 01:58
Thanks for the help, everyone. This is my first JS project (tossed in the deep end), but I'll keep it up! — J R-M, May 13 '19 at 03:40

score 0 · Answer 1 · answered May 12 '19 at 01:50

0

You need to change the ID's to something different. In the case of radio buttons, the "name" is the radio button group. You don't need the ID's unless you are going individually look at each item, and if you give them ID's, they need to be distinct from every other ID, as well as the "name" attributes.

https://www.w3schools.com/tags/att_input_type_radio.asp

<input id="optionRight" name="groupName" type="radio" value="Right" /> <input id="optionLeft" name="groupName" type="radio" value="Left" />

Also, you can make one of the radio buttons as selected by default.

How to select a radio button by default?

<input id="option1" name="groupName" type="radio" value="Right" checked="checked" />

answered May 12 '19 at 01:50

computercarguy

2,173
1
13
27

Thanks for your comment! After changing this, do I then need to change my code to use getElementsByName(groupName)? Neither that nor leaving the code as getElementsByID(inputID) seem to be fixing this. And sadly, since this is for a psychology experiment, I can't let it start with a default button. – J R-M May 12 '19 at 02:00
There's a number of different ways to get what you could be looking for, so I'll leave you with another link and let you figure out which one you really need. https://stackoverflow.com/questions/9561625/checking-value-of-radio-button-group-via-javascript – computercarguy May 12 '19 at 02:03

Mahmoud Atwa · Answer 2 · 2019-05-12T02:08:07.013

What I've understood is that you need to show an error if nothing is checked and continue if one of them is checked.

To do that, you will need to check if either of them is checked not checking it's value & give each radio button a unique id. You can do something similar to this

function isChecked(id){//Instead of filledOut
  return document.getElementById(id).checked;
 //.checked returns true or false
}
if (isChecked('option1') || isChecked('option2')){
 next();
}else{
 alert("Your error message")
}

Another function to get the value if you need it:

function getCheckedBtnValue(){
  if(isChecked('option1')) return document.getElementById('option1').value
  if(isChecked('option2')) return document.getElementById('option2').value
  return null
}
//You can also use this function to check if any of them is checked
const value = getCheckedBtnValue();
if(value){
 next();
}else{
 alert("Your error message");
}

Also, try not to write JavaScript inside of HTML elements it can be hard to read often. Keep JavaScripting.

Unfortunately, the OP hasn't gotten this far yet. As mentioned in my answer, both of his radio buttons have the same ID, which is also the same as the Name attribute, so he has to fix that first, then he can use your suggestion. Unfortunately, this means your Answer doesn't address the Question. — computercarguy, May 12 '19 at 02:06
yeah, I've actually mentioned that at the first couple of lines. — Mahmoud Atwa, May 12 '19 at 02:10

Hari Krishnan K R · Accepted Answer · 2019-05-14T01:38:06.557

0

<form name="formName">
    <input type="radio" name="option1" id="option1" value="Right"/>Right
    <input type="radio" name="option2" id="option2" value="Left"/>Left
</form>


<input onclick="checkResponse()" type="button" value="Continue" />

checkResponse function will check if any options are selcted when user clicks on the continue button.

<script type="text/javascript">
    function checkResponse(){
        if (isChecked('option1') || isChecked('option2')){
            next();
        }else{
            alert("Your error message")
        }
    }

    function isChecked(id){

     return document.getElementById(id).checked; //returns true if any options are selected

    }

</script>

edited May 14 '19 at 01:38

answered May 12 '19 at 04:54

Hari Krishnan K R

93
7

Good to know! Cheers! @JR-M – Hari Krishnan K R May 13 '19 at 03:41
Radio buttons don't always select a default unless the programmer tells it to. – computercarguy May 13 '19 at 15:52
After rereading this again, you're reinvented the wheel by recreating the exact results of a radio button with checkboxes. This is not good UX, as a user will not understand this functionality. Use radio buttons and checkboxes for what they are designed to do, not to create confusion with a user. – computercarguy May 13 '19 at 16:33
I had the misinformation that radio button would select a default value on page load. Thanks for the advice, much appreciated. – Hari Krishnan K R May 14 '19 at 01:43

Requiring radio button selection in Javascript

3 Answers3