I noticed as we went through the course that many students in the discussions stated that they had difficulty getting the value of radio buttons. This tutorial aims to help you learn at least one way to go about it.
1.) To start we will need a form with radio buttons like below. I've included a textarea for output to include showing you how to then put that value into an output window.
<form id="buildCalculator">
<fieldset>
<legend>Calculate Your Estimated Build Cost</legend>
<h2>Select your options below</h2>
<h3>Front Shocks</h3><b id="fschoiceout"></b><br>
<input type="radio" name="frontshocks" id="fschoice0" value="nofs" checked="checked">
<label>none</label><br>
<input type="radio" name="frontshocks" id="fschoice1" value="bilsteinfs">
<label>Bilstein B8 6112 Coil-Over with Adjuster</label><br>
<input type="radio" name="frontshocks" id="fschoice2" value="iconfs">
<label>Icon Vehicle Dynamics Front Coil-Over Shock Kit</label><br>
<input type="radio" name="frontshocks" id="fschoice3" value="foxfs">
<label>Fox Factory Race Series 2.5 Coil-Over Reservoir</label><br>
<input type="radio" name="frontshocks" id="fschoice4" value="kingfs">
<label>King 2.5 Remote Reservoir Coil-Over with Adjuster</label><br>
<h3>Rear Shocks</h3><b id="rschoiceout"></b><br>
<input type="radio" name="rearshocks" id="rschoice0" value="nors" checked="checked">
<label>none</label><br>
<input type="radio" name="rearshocks" id="rschoice1" value="bilsteinrs">
<label>Bilstein B8 5160</label><br>
<input type="radio" name="rearshocks" id="rschoice2" value="iconrs">
<label>Icon Vehicle Dynamics V.S. 2.5 Series RR Rear Shocks w/CDCV</label><br>
<input type="radio" name="rearshocks" id="rschoice3" value="foxrs">
<label>Fox Factory Race Series 2.5 Factory Series Reservoir with Adjuster</label><br>
<input type="radio" name="rearshocks" id="rschoice4" value="kingrs">
<label>King 2.5 Remote Reservoir Coil-Over with Adjuster</label><br>
<h3>Adjustable Upper Control Arms</h3><b id="ucachoiceout"></b><br>
<input type="radio" name="uca" id="ucachoice0" value="nouca" checked="checked">
<label>none</label><br>
<input type="radio" name="uca" id="ucachoice1" value="jbauca">
<label>JBA HD High Caster Upper A-arms</label><br>
<input type="radio" name="uca" id="ucachoice2" value="iconuca">
<label>Uniball Billet Aluminum Upper Control Arm Kit</label><br>
<input type="radio" name="uca" id="ucachoice3" value="camburguca">
<label>Camburg Long-Travel Kit</label><br>
<textarea id="buildOutputWindow" rows="3" cols="30" disabled></textarea><br>
<button type="button" id="buildEstCalculator">Estimate</button>
<button type="reset" id="buildFormReset" value="Reset">Reset</button>
</fieldset>
</form>
2.) Now that we have our form we can begin work on the JavaScript. We will be starting with a page with existing event listeners for our submit and reset buttons and the funtion to reset the form already built out. Note that all of this will remain at the bottom of your javascript file. Everything you add will go above this code.
function buildReset() {
var buildTotal = 0;
var frontShocks = "";
var rearShocks = "";
var ucas = "";
document.getElementById("buildOutputWindow").innerHTML = "";
}
function createEventListeners() {
//Setting build estimate button as a variable.
var estimateButton = document.getElementById("buildEstCalculator");
//setting reset button as a variable to make it reset javascript variables and outputs onclick along with its built in html form reset.
var resetButton = document.getElementById("buildFormReset");
//click event listener for the buildEstCalculator button to call the buildCalculator function
estimateButton.addEventListener("click", buildCalculator, false);
//click event listener for the buildFormReset button to call the buildReset function
resetButton.addEventListener("click", buildReset, false);
}
//When the page finishes loading this fires and runs the createEventListeners function.
window.addEventListener("load",createEventListeners,false);
3.) Next we will need to create our function that will get the values of the radio buttons. We will start with our function declaration, one variable and a basic try catch structure.
function buildCalculator() {
//variable declared to store estimate total in during control flow statements.
var buildTotal = 0;
//try block to surroun function for hanling errors.
try {
} catch(e) {
}
}
4.) Next we will add our variables and use the querySelector method to get the value of the checked radio buttons. Note that if you do it this way you must ensure in your HTML code that you have an option for none and that it is selected by default. Otherwise you will get an error.
function buildCalculator() {
//variable declared to store estimate total in during control flow statements.
var buildTotal = 0;
//try block to surroun function for hanling errors.
try {
var frontShocks = document.querySelector('input[name="frontshocks"]:checked').value;
var rearShocks = document.querySelector('input[name="rearshocks"]:checked').value;
var ucas = document.querySelector('input[name="uca"]:checked').value;
} catch(e) {
}
}
5.) Now that we have variables which have the value we need to add some logic with if else statements to handle that data and turn it into useful output.
function buildCalculator() {
//variable declared to store estimate total in during control flow statements.
var buildTotal = 0;
//try block to surroun function for hanling errors.
try {
var frontShocks = document.querySelector('input[name="frontshocks"]:checked').value;
var rearShocks = document.querySelector('input[name="rearshocks"]:checked').value;
var ucas = document.querySelector('input[name="uca"]:checked').value;
//Control flow logic for first group of radio buttons. Checks the value of the frontShocks variable for the values defined for \n
//each option in the html.
if (frontShocks == "bilsteinfs") {
buildTotal += 657;
}
else if (frontShocks == "iconfs") {
buildTotal += 1260;
}
else if (frontShocks == "foxfs") {
buildTotal += 900;
}
else if (frontShocks == "kingfs") {
buildTotal += 1500;
}
//Else incase user doesn't select one of these options and instead leaves none selected.
else {
buildTotal += 0;
}
//Control flow logic for second group of radio buttons. Checks the value of the rearShocks variable for the values defined for \n
//each option in the html.
if (rearShocks == "bilsteinrs") {
buildTotal += 343;
}
else if (rearShocks == "iconrs") {
buildTotal += 1302;
}
else if (rearShocks == "foxrs") {
buildTotal += 1200;
}
else if (rearShocks == "kingrs") {
buildTotal += 1159;
}
//Else incase user doesn't select one of these options and instead leaves none selected.
else {
buildTotal += 0;
}
//Control flow logic for third group of radio buttons. Checks the value of the ucas variable for the values defined for \n
//each option in the html.
if (ucas == "jbauca") {
buildTotal += 696;
}
else if (ucas == "iconuca") {
buildTotal += 1318;
}
else if (ucas == "camburguca") {
buildTotal += 3195;
}
//Else incase user doesn't select one of these options and instead leaves none selected.
else {
buildTotal += 0;
}
} catch(e) {
}
}
6.) Now that we can handle the data and processs it lets return our estimate to the user.
function buildCalculator() {
//variable declared to store estimate total in during control flow statements.
var buildTotal = 0;
//try block to surroun function for hanling errors.
try {
var frontShocks = document.querySelector('input[name="frontshocks"]:checked').value;
var rearShocks = document.querySelector('input[name="rearshocks"]:checked').value;
var ucas = document.querySelector('input[name="uca"]:checked').value;
//Control flow logic for first group of radio buttons. Checks the value of the frontShocks variable for the values defined for \n
//each option in the html.
if (frontShocks == "bilsteinfs") {
buildTotal += 657;
}
else if (frontShocks == "iconfs") {
buildTotal += 1260;
}
else if (frontShocks == "foxfs") {
buildTotal += 900;
}
else if (frontShocks == "kingfs") {
buildTotal += 1500;
}
//Else incase user doesn't select one of these options and instead leaves none selected.
else {
buildTotal += 0;
}
//Control flow logic for second group of radio buttons. Checks the value of the rearShocks variable for the values defined for \n
//each option in the html.
if (rearShocks == "bilsteinrs") {
buildTotal += 343;
}
else if (rearShocks == "iconrs") {
buildTotal += 1302;
}
else if (rearShocks == "foxrs") {
buildTotal += 1200;
}
else if (rearShocks == "kingrs") {
buildTotal += 1159;
}
//Else incase user doesn't select one of these options and instead leaves none selected.
else {
buildTotal += 0;
}
//Control flow logic for third group of radio buttons. Checks the value of the ucas variable for the values defined for \n
//each option in the html.
if (ucas == "jbauca") {
buildTotal += 696;
}
else if (ucas == "iconuca") {
buildTotal += 1318;
}
else if (ucas == "camburguca") {
buildTotal += 3195;
}
//Else incase user doesn't select one of these options and instead leaves none selected.
else {
buildTotal += 0;
}
//Writing output to textarea window
document.getElementById("buildOutputWindow").innerHTML = "Your estimated cost in parts is $" + buildTotal.toString() + ".";
//catch block to catch any errors.
} catch(e) {
}
}
7.) But what if something goes wrong? Lets add some error handling to the catch just incase.
function buildCalculator() {
//variable declared to store estimate total in during control flow statements.
var buildTotal = 0;
//try block to surroun function for hanling errors.
try {
var frontShocks = document.querySelector('input[name="frontshocks"]:checked').value;
var rearShocks = document.querySelector('input[name="rearshocks"]:checked').value;
var ucas = document.querySelector('input[name="uca"]:checked').value;
//Control flow logic for first group of radio buttons. Checks the value of the frontShocks variable for the values defined for \n
//each option in the html.
if (frontShocks == "bilsteinfs") {
buildTotal += 657;
}
else if (frontShocks == "iconfs") {
buildTotal += 1260;
}
else if (frontShocks == "foxfs") {
buildTotal += 900;
}
else if (frontShocks == "kingfs") {
buildTotal += 1500;
}
//Else incase user doesn't select one of these options and instead leaves none selected.
else {
buildTotal += 0;
}
//Control flow logic for second group of radio buttons. Checks the value of the rearShocks variable for the values defined for \n
//each option in the html.
if (rearShocks == "bilsteinrs") {
buildTotal += 343;
}
else if (rearShocks == "iconrs") {
buildTotal += 1302;
}
else if (rearShocks == "foxrs") {
buildTotal += 1200;
}
else if (rearShocks == "kingrs") {
buildTotal += 1159;
}
//Else incase user doesn't select one of these options and instead leaves none selected.
else {
buildTotal += 0;
}
//Control flow logic for third group of radio buttons. Checks the value of the ucas variable for the values defined for \n
//each option in the html.
if (ucas == "jbauca") {
buildTotal += 696;
}
else if (ucas == "iconuca") {
buildTotal += 1318;
}
else if (ucas == "camburguca") {
buildTotal += 3195;
}
//Else incase user doesn't select one of these options and instead leaves none selected.
else {
buildTotal += 0;
}
//Writing output to textarea window
document.getElementById("buildOutputWindow").innerHTML = "Your estimated cost in parts is $" + buildTotal.toString() + ".";
//catch block to catch any errors.
} catch(e) {
//if block to handle specific errors. Writes them to the output window for the user to see.
if (e == "TypeError: Cannot read property 'value' of null") {
document.getElementById("buildOutputWindow").innerHTML = "You must make a selection in all three categories, even if the selection is \"none\".";
//else block to handle all other errors. Writes them to the output window for the user to see.
} else {
document.getElementById("buildOutputWindow").innerHTML = "Sorry there has been an error \n" + e + ".";
}
}
}
8.) Try it out below for yourself.