Develop Reference

How to check radio button is checked on form submit - JavaScript

I have a form using radio buttons for the user to select a rating between 1-10. Some of these questions are required to have a rating before the user is able to submit. So i call for the function validateForm() on submit to do so.
Example of radio buttons:
<div class="fluid_container">
<label for="ease-rating-0">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-0" value="0" />
<div class="box-number-half number-padding">0</div>
</label>
<label for="ease-rating-1">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-1" value="1" />
<div class="box-number-half number-padding">1</div>
</label>
<label for="ease-rating-2">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-2" value="2" />
<div class="box-number-half number-padding">2</div>
</label>
<label for="ease-rating-3">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-3" value="3" />
<div class="box-number-half number-padding">3</div>
</label>
<label for="ease-rating-4">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-4" value="4" />
<div class="box-number-half number-padding">4</div>
</label>
<label for="ease-rating-5">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-5" value="5" />
<div class="box-number-half number-padding">5</div>
</label>
<label for="ease-rating-6">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-6" value="6" />
<div class="box-number-half number-padding">6</div>
</label>
<label for="ease-rating-7">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-7" value="7" />
<div class="box-number-half number-padding">7</div>
</label>
<label for="ease-rating-8">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-8" value="8" />
<div class="box-number-half number-padding">8</div>
</label>
<label for="ease-rating-9">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-9" value="9" />
<div class="box-number-half number-padding">9</div>
</label>
<label for="ease-rating-10">
<input type="radio" name="ease-rating" class="hover-select-ease" id="ease-rating-10" value="10" />
<div class="box-number-half">10</div>
</label>
</div>
An example of my form:
Visual Example
I have success with the following code for "ease of placing order" question:
function validateForm() {
var easeradios = document.getElementsByName("ease-rating");
for (var i = 0; i < easeradios.length; i++) {
if (easeradios[i].checked) {
return true;
}
} return false;
}
I am grabbing the radio buttons by their name which for this is ease-rating. This works fine and the user cannot submit until a rating is selected on this question. However when i try to apply the same to the next row as this is also required it seems to go wrong.
function validateForm() {
var easeradios = document.getElementsByName("ease-rating");
for (var i = 0; i < easeradios.length; i++) {
if (easeradios[i].checked) {
return true;
}
} return false;
var convradios = document.getElementsByName("conv-rating");
for (var i = 0; i < convradios.length; i++) {
if (convradios[i].checked) {
return true;
}
} return false;
}
It seems to only acknowledge a requirement for "Convenience of delivery" before submitting instead of taking the first questions requirement now.
Sorry i'm new to this but what i want is for the form to check that a rating is selected on each question before proceeding. I don't want to use /required as i want to insert custom error message underneath the rating required which is why i haven't used that.
Thanks for your help!

Your are returning from the for loops too early, which is why the rest of the code where conradios for loop resides is unreachable.
Correct this by place the return false; statement just before the last curly brace of the for loop, not after it.
for (var i = 0; i < easeradios.length; i++) {
if (easeradios[i].checked) {
return true;
}
return false;
}
Do the same for the second loop as well:
for (var i = 0; i < convradios.length; i++) {
if (convradios[i].checked) {
return true;
}
return false;
}

Calculate inputs from form in Javascript and display in message field

I am trying to calculate a score and prompt one of 3 messages depending on the score. However, seems like I can't push the message to lower part of the form. Mind providing some guidance? THANKS!
Diabetes Risk Assessment Tool
The Diabetes Risk Assessment Tool
Please complete the form. Choose an option for each question *
<legend>Questions</legend>
<!-- How old are you?-->
<span>
<label for="age">How old are you? </label>
<input type="radio" value="0" name="age" id="#0-25" checked><label for="0-25">0-25</label>
<input type="radio" value="5" name="age" id="#26-40"><label for="26-40">26-40</label>
<input type="radio" value="8" name="age" id="#41-60"><label for="41-60">41-60</label>
<input type="radio" value="10" name="age" id="#60+"><label for="60+">60+</label><br>
</span
<span>
<label for="bmi">What is your BMI? </label>
<input type="radio" value="0" name="bmi" id="#0-25" checked><label for="0-25">0-25</label>
<input type="radio" value="0" name="bmi" id="#26-30"><label for="26-30">26-30</label>
<input type="radio" value="9" name="bmi" id="#31-35"><label for="31-35">31-35</label>
<input type="radio" value="10" name="bmi" id="#35+"><label for="35+">35+</label><br>
</span>
Does anybody in your family have diabetes?
No.
Grandparent
Sibling
Parent
How would you describe your diet?
Low-sugar
Normal sugar
Quite high sugar
High sugar
</fieldset>
<div id="displaymessage"></div>
</form>
//create variable radios with the radio button values
var radios = document.getElementsByTagName("input")
function calculateTotal(){
var total = 0;
for (i = 0; i < radios.length; i++) {
----------
if (radios[i].type == 'radio' && radios[i].checked) {
total += Number(radios[i].value);
}
}
return total;
}
//Display message Function
function displaymessage () {
//create empty variable
var message = 0
//run function calculate total and store in score var
score = calculateTotal()
//Depending on your score, you get a message
if (score < 15) {
message = "Your results show that you currently have a low risk of developing diabetes"
}
else if (score > 25) {
message = "Your results show that you currently have a high risk of developing diabetes. Your main risk factors are your" + risk1 + "and your" + risk2 + "We advise that you contact the Health Authority to discuss your risk factors as soon as you can. Your main risk are X and Y."
}
else {
message = "Your results show that you currently have a medium risk of developing diabetes"
}
//push result to element display message on HTML
document.getElementById('displaymessage').innerHTML = message;
}
document.getElementById("displaymessage").submit()
body {
font-family: Verdana, Arial, sans-serif;
}
.sectionheading {
color: #ff0000;
}
#pageheading{
font-style: italic;
}
label {
margin-left: 10px;
}
.radio-buttons input[type="radio"] {
width: 10px;
}
.radio-buttons label {
display: inline;
margin-left: 10px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Diabetes Risk Assessment Tool</title>
<link rel="stylesheet" type="text/css" href="examplestyles.css">
<script src="calculate.js"></script>
</head>
<h1>The Diabetes Risk Assessment Tool</h1>
<div class ="radio-inline">
<form id="assessment">
<p><i>Please complete the form. Choose an option for each question </i><em>*</em></p>
<fieldset>
<legend>Questions</legend>
<!-- How old are you?-->
<span>
<label for="age">How old are you? </label>
<input type="radio" value="0" name="age" id="#0-25" checked><label for="0-25">0-25</label>
<input type="radio" value="5" name="age" id="#26-40"><label for="26-40">26-40</label>
<input type="radio" value="8" name="age" id="#41-60"><label for="41-60">41-60</label>
<input type="radio" value="10" name="age" id="#60+"><label for="60+">60+</label><br>
</span
<!-- Does anybody in your family have diabetes? -->
<span>
<label for="bmi">What is your BMI? </label>
<input type="radio" value="0" name="bmi" id="#0-25" checked><label for="0-25">0-25</label>
<input type="radio" value="0" name="bmi" id="#26-30"><label for="26-30">26-30</label>
<input type="radio" value="9" name="bmi" id="#31-35"><label for="31-35">31-35</label>
<input type="radio" value="10" name="bmi" id="#35+"><label for="35+">35+</label><br>
</span>
<!-- Does anybody in your family have diabetes? -->
<label for="genetics">Does anybody in your family have diabetes? </label>
<input type="radio" value="0" name="genetics" id="No" checked><label for="no">No.</label>
<input type="radio" value="7" name="genetics" id="grandparent"><label for="grandparent">Grandparent</label>
<input type="radio" value="15" name="genetics" id="sibling"><label for="sibling">Sibling</label>
<input type="radio" value="15" name="genetics" id="parent"><label for="parent">Parent</label><br>
<!-- How would you describe your diet? -->
<label for="diet">How would you describe your diet? </label>
<input type="radio" value="0" name="diet" id="low-sugar" checked><label for="low-sugar">Low-sugar</label>
<input type="radio" value="0" name="diet" id="normal-sugar"><label for="normal-sugar">Normal sugar</label>
<input type="radio" value="7" name="diet" id="quite-highs-sugar"><label for="quite-highs-sugar">Quite high sugar</label>
<input type="radio" value="10" name="diet" id="high-sugar"><label for="high-sugar">High sugar</label><br>
<!-- Calculate -->
<p><input type="submit" name = "calculate" value="Calculate" id=calculate onsubmit= "displaymessage()" </p>
</fieldset>
<div id="displaymessage"></div>
</form>
</div>
</body>
</html>

Your function displaymessage function (that can be written in camel case displayMessage as in Javascript common notation) is not being called properly. To make sure you call this function whenever the form is being submitted, you have to also make sure that you capture the event and prevent it from refreshing the page as it is by default on the <form> html element:
document.getElementById('assessment').addEventListener("submit", function(event) {
event.preventDefault();
displaymessage();
});
Also remove this line from your calculate.js file:
document.getElementById("displaymessage").submit()
and remove onsubmit listener from the input button, it is redundant:
<p><input type="submit" name="calculate" value="Calculate" id="calculate"></p>
making sure that the id has quotes around the value: id="calculate"
Finally, you can get risk1 and risk2 values by storing the values and names from all the radio elements and sorting them afterwards:
first step: Initialise your two variables risk1 and risk2 at the top of your calculate.js file:
var risk1, risk2;
second step: edit your calculateTotal function to this:
function calculateTotal() {
var objectArray = []; // initialise empty array
var total = 0;
for (i = 0; i < radios.length; i++) {
if (radios[i].type == 'radio' && radios[i].checked) {
//save the values and names of the radio buttons into an array of objects
objectArray.push({
value: Number(radios[i].value),
name: radios[i].name
});
total += Number(radios[i].value);
}
}
//sorting the array ascendingly
objectArray.sort(function(a, b){return a.value - b.value});
// getting the name property of the last two values of the array that are the highest in value
risk1 = objectArray[objectArray.length - 1].name;
risk2 = objectArray[objectArray.length - 2].name;
return total;
}
third step: make sure you properly display the message:
if (score < 15) {
message = "Your results show that you currently have a low risk of developing diabetes"
} else if (score > 25) {
message = "Your results show that you currently have a high risk of developing diabetes. Your main risk factors are your " + risk1 + " and your " + risk2 + ". We advise that you contact the Health Authority to discuss your risk factors as soon as you can. Your main risk are " + risk1 + " and " + risk2;
} else {
message = "Your results show that you currently have a medium risk of developing diabetes"
}

Javascript not behaving as expected. Unable to identify cause.

in an attempt to make practical use of the skills I am learning on my web development course I am trying to create a website about the Vikings for my partner's Primary school class.
I have managed to get the HTML and CSS as I want it, but I'm struggling a little with the Javascript. it all looks fine to my mind but doesn't run as intended.
I have a quiz and a submit button. When clicked this button will reference a "checkresults" function in my .js file.
This should then calculate a result between 0 - 3 and post this result into the HTML page. I have designed the box the results will show in to be invisible until the "Submit" button is clicked. However, when ran the results box appears for only a second before disappearing and I cannot figure out why.
any help or advice would be very much appreciated!
//JAVASCRIPT//
function checkresults() {
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var correct = 0;
if (question1 == "793") {
correct++;
}
if (question2 == "Shield") {
correct++;
}
if (question3 == "1066") {
correct++;
}
var message = ["You're a real Viking!", "Not bad but you can do better!",
"Odin would not be pleased with your effort!"];
var range;
if (correct < 1) {
range = 2;
}
if (correct > 0 && correct < 3) {
range = 1;
}
if (correct > 2) {
range = 0;
}
document.getElementById("afterSubmit").style.visibility = "visible"
document.getElementById("message").innerHTML = message[ramge];
document.getElementById("correct").innerHTML = "You got " + correct + "
correct!";
}
//HTML//
<form id="quiz" name="quiz">
<p>When did the Vikings first invade Britain?</p>
<input type="radio" id="mc" name="question1" value="1066" />1066<br />
<input type="radio" id="mc" name="question1" value="793" />793<br />
<input type="radio" id="mc" name="question1" value="411" />411<br />
<input type="radio" id="mc" name="question1" value="1999" />1999<br />
<p>what did every man need before he was allowed to go Viking?</p>
<input type="radio" id="mc" name="question2" value="Shield" />Shield<br />
<input type="radio" id="mc"name="question2" value="Sword" />Sword<br />
<input type="radio" id="mc"name="question2" value="Cloak" />Cloak<br />
<input type="radio" id="mc" name-"question2" value="Gold" />Gold<br />
<p>when did the Viking age end?</p>
<input type="radio" id="mc" name="question3" value="793" />793<br />
<input type="radio" id="mc" name="question3" value="1999" />1999<br />
<input type="radio" id="mc" name="question3" value="1066" />1066<br />
<input type="radio" id="mc" name="question3" value="1500" />1500<br />
<input type="submit" id="button" value="Lets see how you did!" onclick =
"checkresults();">
</form>
<div id="afterSubmit">
<p id="message"></p>
<p id="correct"></p>
//CSS//
#afterSubmit {
visibility: hidden;
border-color: red;
border-style: solid;
border-width: 5px;
}

Your page is refreshing.
The best way to change this would be to move the function to the form onsubmit event.
//Remove the onclick
<input type="submit" id="button" value="Lets see how you did!" onclick="checkresults();">
Add the function and return false to the event on the form, so it cancels submission
//Add the onsubmit, notice the return false, so it cancels submission
<form id="quiz" name="quiz" onsubmit="checkresults();return false;">

jQuery & JavaScript Excercise: Adding Values On Condition

How do you make it calculate using JavaScript/jQuery based on condition:
on radio button 'change' event.
if user clicks "Yes" or "N/A", the value of text boxes with default values next to it will be added and reflected in Total
HTML:
<form>
<fieldset>
<input type="radio" name="remark[]" value="Yes" class="answer">Yes
<input type="radio" name="remark[]" value="No" class="answer">No
<input type="radio" name="remark[]" class="answer">N/A
<input type="text" name="point1" class="score" value="3">
</fieldset>
<fieldset>
<input type="radio" name="remark[]" value="Yes" class="answer">Yes
<input type="radio" name="remark[]" value="No" class="answer">No
<input type="radio" name="remark[]" class="answer">N/A
<input type="text" name="point2" class="score" value="2">
</fieldset>
Total<input type="text" name="total" class="result">
</form>

Vanilla Javascript
Note: these scripts associate with forms that have the class name calc
This script will associate with the form, so if you have multiple instances each form will calculate separately.
Basically for each form select all input's with a value of 'Yes' which are checked, then find the score for that field set and add it to the total
(Demo)
(function(){
"use strict";
function calculate() {
var forms = document.querySelectorAll('.calc'), form, i;
for (i = 0; form = forms[i]; i++) {
var total = 0;
var inputs = form.querySelectorAll('input[value="Yes"]:checked'), input, x;
for (x = 0; input = inputs[x]; x++) {
total += parseFloat(input.parentElement.lastElementChild.value);
}
form.lastElementChild.value = total;
}
}
calculate();
var inputs = document.querySelectorAll('.calc input'), input, x;
for(x = 0; input = inputs[x]; x++) {
input.onchange = calculate;
}
})();
jQuery
If you would like to use jQuery, this is the same script converted to jQuery
(Demo)
(function(){
"use strict";
function calculate() {
$('.calc').each(function(){
var total = 0;
$('input[value="Yes"]:checked', this).each(function(){
total += parseFloat($('input.score', this.parentElement).val());
});
$('input.result', this).val(total);
});
}
calculate();
$('.calc input').on('change', calculate);
})();

Not sure if I understand correctly, but first you'll need a few changes in your markup, radio groups should have different name so it'll be like remark[0] for first group and remark[1] for the second and so on. The "N/A" radios don't seem to have a value so I've added value="NA" to them. So your HTML will look like:
<form>
<fieldset>
<input type="radio" name="remark[0]" value="Yes" class="answer" />Yes
<input type="radio" name="remark[0]" value="No" class="answer" />No
<input type="radio" name="remark[0]" value="NA" class="answer" />N/A
<input type="text" name="point1" class="score" value="3" />
</fieldset>
<fieldset>
<input type="radio" name="remark[1]" value="Yes" class="answer" />Yes
<input type="radio" name="remark[1]" value="No" class="answer" />No
<input type="radio" name="remark[1]" value="NA" class="answer" />N/A
<input type="text" name="point2" class="score" value="2" />
</fieldset>Total
<input type="text" name="total" class="result" />
</form>
Then we just listen to radio's onchange and if Yes or N/A is selected for each group, we have it's value to the total. I used parseInt on values since they're string and it seemed the values were supposed to work as numbers. (2+3 should be 5 and not 23).
$('form input[type=radio]').on('change', function() {
var total = 0;
$('form fieldset').each(function(i) {
var point = parseInt($(this).find('input[type=text]').val());
var val = $(this).children('[name="remark[' + i + ']"]:checked').val();
if(val == "Yes" || val == "NA")
total += point;
});
$('input[name="total"]').val(total);
});
jsfiddle DEMO

Making a Form Fieldset text smaller after choosing an option

i'm new to Javascript and Jquery and i am trying to create a kind of questionnaire style page.
Essentially i want to ask a question, then once i have chosen an answer make everything in smaller and then display the next question in normal size.
I have most of the page working in terms of showing and hiding but i cant seem to get the code to work when i try to make the initial question text smaller.
Ive read lots of tutorials and examples but none seem to work, i'd really appreciate any guidance.
Thanks in advance !
Here is my HTML
<form>
<fieldset class="form1">
<p>what problem is the customer having ?</p>
<input type="radio" name="issue" value="o - issue1" onClick="getIssueVar()">issue1<br/>
<input type="radio" name="issue" value="o - issue2" onClick="getIssueVar()">issue2<br/>
<input type="radio" name="issue" value="o - issue3" onClick="getIssueVar()">issue3<br/>
<input type="radio" name="issue" value="o - issue4" onClick="getIssueVar()">issue4<br/>
</fieldset>
</form>
<br/>
Here is my Javascript:
function getIssueVar() {
var xissue = document.getElementById("testform");
var issuetext = "";
var iissue;
for (iissue = 0; iissue < xissue.length ;iissue++) {
if (xissue[iissue].checked) {
issuetext=xissue[iissue].value;
break;
}
}
document.getElementById("faultissue").innerHTML = issuetext;
$(".form2").show();
$(".form1").css('font-size', '10px');
}
I have set my css:
.form1
{
font-size:14px;
}
so i was thinking i would use javascript/jquery to change the font size once ive clicked on the radio buttons.
What am i doing wrong ?

HTML
<form>
<fieldset class="form1">
<p>what problem is the customer having ?</p>
<input type="radio" name="issue" value="o - issue1" onClick="getIssueVar()" class="testform">issue1<br/>
<input type="radio" name="issue" value="o - issue2" onClick="getIssueVar()" class="testform">issue2<br/>
<input type="radio" name="issue" value="o - issue3" onClick="getIssueVar()" class="testform">issue3<br/>
<input type="radio" name="issue" value="o - issue4" onClick="getIssueVar()" class="testform">issue4<br/>
</fieldset>
</form>
<div id="faultissue"></div>
SCRIPT
function getIssueVar() {
debugger
var xissue = document.getElementsByClassName("testform");
var issuetext = "";
var iissue;
for (iissue = 0; iissue < xissue.length ;iissue++) {
if (xissue[iissue].checked) {
issuetext=xissue[iissue].value;
break;
}
}
document.getElementById("faultissue").innerHTML = issuetext;
$(".form2").show();
$(".form1").css('font-size', '10px');
}
DEMO
From your code it seems testform class is missing from radio button tag. And an element having id faultissue is missing too.

Here is a jQuery solution using a delegated on() click approach.
<form>
<fieldset class="form1">
<p>what problem is the customer having ?</p>
<input type="radio" name="issue" value="o - issue1" >issue1
<br>
<input type="radio" name="issue" value="o - issue2" >issue2
<br>
<input type="radio" name="issue" value="o - issue3" >issue3
<br>
<input type="radio" name="issue" value="o - issue4" >issue4
</fieldset>
</form>
.minimize {
font-size: 0.5em;
}
$('fieldset').on('click', 'input[type="radio"]', function() {
$radio = $(this);
$fieldset = $radio.parent();
$fieldset.addClass('minimize');
});
jsFiddle: http://jsfiddle.net/w4L1g2dc/
I added a class but you could set the CSS directly if you wanted.