Develop Reference

Require answers to multiple radio buttons to go to next page HTML

I am setting up a multipage survey/study that has 2 multiple choice radio button questions per page (with the exception of the first page, which requires no answer). I have a next function that checks to make sure an answer has been given. It works, but when passed two values so that it will check two questions, it only checks one of them. I used console.log to display the name passing through the function, and only one name gets passed. I can go to the next page by answering only one of the questions, even if it's not the one passing through the function according to the name in the console log. How can I get it to check all of the questions that I specify in onclick?
Here is the code for the Continue button with the next() function for onclick. When I pass both names, it will only check 1 of the 2.
<input type="button" value="Continue" onclick="next('Q1Answer','Q1Rating');"/>
These are the radio buttons:
Question 1
<input name="Q1Answer" type="radio" value="Right" /> Right 
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong
Question 2
Less confident
<input class="rating" name="Qrating" type="radio" id="v1" value="1" />
<input class="rating" name="Qrating" type="radio" id="v2" value="2" />
<input class="rating" name="Qrating" type="radio" id="v3" value="3" />
<input class="rating" name="Qrating" type="radio" id="v4" value="4" />
<input class="rating" name="Qrating" type="radio" id="v5" value="5" />
More confident
This is the current version of my next function. I added a for loop to try to get it to iterate through all of the items passed to it, but that isn't solving the issue (it worked the same way without the loop). This code is in a javascript file that I call in the HTML code.
function next(name) {
for (i in name) {
if (name.startsWith('Q')) {
if (!document.querySelectorAll('input[name]:checked').length) {
alert("Please answer the question.");
return;
}
}
}
current++;
swap(effectivePage(current - 1), effectivePage(current));
}
(swap and effectivePage are other functions for progressing to the next page, I can add those if needed to test)
I've used name as the identifier, but could easily replace with ID if that would somehow make this easier. I used the startsWith if condition so that only actual questions would get checked.
I have basic HTML knowledge and don't know Javascript at all beyond what I've taught myself to try to figure this out, so I'm hoping the solution is a simple one.

So I managed to find 2 problems which were keeping your code from performing the way you wanted. When you created your next call in the HTML, you tried to pass in multiple name strings, but your next function only takes in one parameter. This means that your calls were only ever getting the first string to check against which in this case was Q1Answer. If you change the value being passed in to an array of strings, then you can perform the checking against all the names you need. Also, be sure to pass the exact name of the inputs you want to check against in that next call. If those names are incorrect your code will make it so the user can never reach the next page as it will think that that input was never selected (because it won't find that input at all on the page).
Second, when you were performing the checking by using the query selector, you weren't checking against any specific names so it was always finding the selected first value even if it should have been checking for the second input tag. I have modified that check to now specifically look for the name passed in so it will only match against the input in question (ie, the first pass will check for Q1Answer and the second pass will check for Qrating).
function next(name) {
for (i in name) {
if (name[i].startsWith('Q')) {
if (!document.querySelectorAll('input[name=' + name[i] + ']:checked').length) {
alert("Please answer the question.");
return;
}
}
}
current++;
swap(effectivePage(current - 1), effectivePage(current));
}
<input type="button" value="Continue" onclick="next(['Q1Answer','Qrating']);" />
<input name="Q1Answer" type="radio" value="Right" /> Right 
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong
<br/> Less confident
<input class="rating" name="Qrating" type="radio" id="v1" value="1" />
<input class="rating" name="Qrating" type="radio" id="v2" value="2" />
<input class="rating" name="Qrating" type="radio" id="v3" value="3" />
<input class="rating" name="Qrating" type="radio" id="v4" value="4" />
<input class="rating" name="Qrating" type="radio" id="v5" value="5" /> More confident

JQuery UI buttonset not working on radio buttons when I associate runat="server" attribute

I am creating a demo application, where I want to use radio buttons as buttons. For that I am using JQuery UI buttonset widget. It was working fine before but the actual problem began when I introduced the attribute runat="server", in order to retain the state during a post back. But after applying the attribute, buttonset widget stopped working on radio buttons.
So, I just want a solution where I can retain the state of the radio button controls and at the same time apply buttonset widget on them.
<div id="genderOptions">
<input type="radio" id="genderMale" value="Male" name="gender" />
<label for="genderMale" >Male </label>
<input type="radio" id="genderFemale" value="Female" name="gender"/>
<label for="genderFemale" >Female </label>
</div>
Output without runat="server" attribute
<div id="genderOptions">
<input type="radio" id="genderMale" value="Male" name="gender" runat="server" />
<label for="genderMale" >Male </label>
<input type="radio" id="genderFemale" value="Female" name="gender" runat="server" />
<label for="genderFemale" >Female </label>
</div>
This is the final output after specifying the attribute runat="server"

The runat="server" attribute used to dynamically change id and name attributes. Verify your rendered markup. Probably you will see something like
<input type="radio" id="ctl00_genderMale" value="Male" name="ctl00$gender" />
I assume you specify the input fields using ids in your JS which initializes the buttonset widget. Try to use tag or class selectors instead:
$("#genderOptions").buttonset({
items: "input[type=radio]"
});

AngularJS radio button validation

Simple and easy.
I got two radio buttons.
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
How do i validate in AngularJS that at least one is chosen? And how can i type something like
$scope.myForm.gender.$invalid
Any ideas?

Without a form, you can fix this by check the value of the models in your controller, returning an error if both are false. You could also go ahead and set one true by default.
But to answer your question, you can do something similar to $scope.myForm.gender.$invalid all you have to do is wrap your input tags in a form with the name myForm. So, it would like:
<form name="myForm">
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
</form>
Then, $scope.myForm would be able to give you certain properties, like $isPristine and properties for each input field.
Either of these ways will work though, so I help that helps!

use required :
<input type="radio" name="gender" ng-model="male" required>
<input type="radio" name="gender" ng-model="female" required>
DEMO
same Question asked here : Validate Radio Button AngularJS

What is controlling the radio buttons in HTML5

Take this code for Example
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
It allows a user to select one button at a time, I was always under the impression that javascript was the answer to this type of a solution. So my question is, is there any embedded javascript in the HTML radio button and if not, where is the function coming from?

Its the Browser's duty to do that for us.
Why?
Because the behavior is stated in the spec:
http://www.w3.org/TR/html/forms.html#radio-button-state-(type=radio)

Radio button selection dynamically change other radio button value

So I've tried looking, and I haven't found anything so hopefully this isn't a repeat question. I have several sets of radio buttons, and I need to have the values associated with the latter radio buttons change dynamically based on the users selection within the first set of radio buttons.
<input type="radio" name="length" id="6feet" value=" " > 6'0"
<input type="radio" name="length" id="6.5feet" value=" " > 6'6"
<input type="radio" name="length" id="7feet" value=" " > 7'0"
<input type="radio" name="weight" ID="weight3" value="5" /> 3
<input type="radio" name="weight" ID="weight4" value="10" /> 4
<input type="radio" name="weight" ID="weight5" value="15" /> 5
<input type="radio" name="pieces" ID="PieceA" value="10"> 2
<input type="radio" name="pieces" ID="PieceB" value="20"> 3
So what I'm trying to figure out is if there is a way to use onClick or something similar to set it so that when the user selects one of the three "length" radio buttons, they will each assign different values to both the weight and pieces radio buttons as well. Sorry if the question is unclear at all.

I didnt understand totally your question.. is this what you need?
$(document).ready(function(){
$('input[name=length]').click(function () {
$('input[name=weight]').val(newValue);
$('input[name=pieces]').val(newValue);
});
});

Do you need something like this and reassign a real "value" for radiobuttons?

A pure javascript solution would look similar to this:
document.getElementById("6feet").onclick = (function() {
document.getElementById("weight3").click();
});
You attach the onclick event to an element (in this case the element with id of 6feet) and once that is clicked it calls the defined function.
Read more about .click()
EXAMPLE
There are also simpler solutions using jQuery, but I wasn't sure if you were able to incorporate it into your code.