I just read all the other topics I could find with same problem I had but it didn't help me that's why I'm posting here.
I'm trying to have other form questions appear based on option value of 3rd question.
According to other topics with same function this should work just fine, but for me nothing happens when I change values and I couldn't find any errors. I'm still new at JS.
Thanks in advance. Cheers!
This is my entire code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script>
$("#aktivnost").change(function() {
if ($(this).val() == "huddle") {
$(".huddle_q").show();
}
if ($(this).val() == "1on1") {
$(".jnj_q").show();
}
else {
$(".huddle_q", ".jnj_q").hide();
}
});
</script>
</head>
<body>
<form>
<span>Team Leader:</span>
<select name="team_leader">
<option value="dinko_roso"> Dinko Roso </option>
<option value="lucija_starcevic"> Lucija Starčević </option>
<option value="natalija_fluka"> Natalija Fluka </option>
<option value="tamara_zdjelar"> Tamara Zdjelar </option>
<option value="bojan_brnjac"> Bojan Brnjac </option>
<option value="andro_vuljanic"> Andro Vuljanić </option>
</select>
<br />
<span>Ocjenjivač:</span>
<select name="ocjenjivac">
<option value="dinko_roso"> Branimir Spajić </option>
<option value="lucija_starcevic"> Ozren Kovačević </option>
<option value="natalija_fluka"> Dunja Vidak </option>
<option value="tamara_zdjelar"> Anamaria Katić </option>
<option value="bojan_brnjac"> Marko Nimac </option>
</select>
<br />
<span>Aktivnost:</span>
<select id="aktivnost">
<option value="team_meeting"> Team Meeting </option>
<option value="1on1"> 1on1 </option>
<option value="huddle"> Huddle </option>
</select>
<br />
<div class="huddle_q">
<span>Dužina stiskavca:</span>
<input type="radio" name="h_q1" value="0">0</input>
<input type="radio" name="h_q1" value="3">3</input>
<br />
<span>Fokusi:</span>
<input type="radio" name="h_q2" value="0">0</input>
<input type="radio" name="h_q2" value="1">1</input>
<input type="radio" name="h_q2" value="2">2</input>
<input type="radio" name="h_q2" value="3">3</input>
<br />
<span>Parkiranje:</span>
<input type="radio" name="h_q3" value="0">0</input>
<input type="radio" name="h_q3" value="3">3</input>
<br />
<span>Poticanje:</span>
<input type="radio" name="h_q4" value="0">0</input>
<input type="radio" name="h_q4" value="1">1</input>
<input type="radio" name="h_q4" value="2">2</input>
<input type="radio" name="h_q4" value="3">3</input>
<br />
<span>Predstavljanje:</span>
<input type="radio" name="h_q5" value="0">0</input>
<input type="radio" name="h_q5" value="3">3</input>
<br />
<span>Održava atmosferu:</span>
<input type="radio" name="h_q6" value="0">0</input>
<input type="radio" name="h_q6" value="1">1</input>
<input type="radio" name="h_q6" value="2">2</input>
<input type="radio" name="h_q6" value="3">3</input>
</div>
<div class="jnj_q">
<span>Dužina 1on1:</span>
<input type="radio" name="1on1_q1" value="0">0</input>
<input type="radio" name="1on1_q1" value="3">3</input>
<br />
<span>TL prepoznaje i hvali:</span>
<input type="radio" name="1on1_q2" value="0">0</input>
<input type="radio" name="1on1_q2" value="1">1</input>
<input type="radio" name="1on1_q2" value="2">2</input>
<input type="radio" name="1on1_q2" value="3">3</input>
<br />
<span>2QM:</span>
<input type="radio" name="1on1_q4" value="0">0</input>
<input type="radio" name="1on1_q4" value="1">1</input>
<input type="radio" name="1on1_q4" value="2">2</input>
<input type="radio" name="1on1_q4" value="3">3</input>
<br />
<span>Razvoj komp:</span>
<input type="radio" name="1on1_q6" value="0">0</input>
<input type="radio" name="1on1_q6" value="1">1</input>
<input type="radio" name="1on1_q6" value="2">2</input>
<input type="radio" name="1on1_q6" value="3">3</input>
</div>
</form>
</body>
</html>
Your code, for the most part, works fine. The main mistake you made was that you are trying to execute code on elements that don't yet exist. You need to either a) run the code at the end of the document, or more commonly b) put the code in a document.ready handler.
jsFiddle example
$( document ).ready(function() {
//your code here
});
Note that in the example fiddle that I added $('.huddle_q, .jnj_q').hide(); to hide the elements first when you change the drop down.
Related
I'm a newbie coder and cannot for the life of me figure out how to add up values for radio buttons below - any help would be greatly appreciated!
I am trying to create a diabetes screening assessment tool - where you will be able to assign different values to different risk factors.
You would need to use JavaScript to accomplish this.
Here's one way to do it:
Listen for the form's submit event
Prevent the default (so that the form doesn't get sent to the server)
Grab the value from each field. Fields use the name attribute from the HTML
Use parseInt on each field because they'll be strings
Add them up
Display the result (in this example, in the console)
const form = document.querySelector('form')
form.addEventListener('submit', event => {
event.preventDefault()
const total =
parseInt(form.age.value) +
parseInt(form.bmi.value) +
parseInt(form.famhistory.value) +
parseInt(form.diet.value)
console.log(total)
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zedland Health Authority's Diabetes health assessment tool</title>
<link rel="stylesheet" type="text/css" href="fma.css">
<script src="fma.js"></script>
</head>
<body>
<h1 id="pageheading">Zedland Health Authority's Diabetes health assessment tool</h1>
<form id="register">
<fieldset id="controls">
<div>
<label class="button" for="Age">How old are you?</label>
<input type="radio" id="agerange" name="age" value="0" checked="checked">
<label for="agerange1">1-25</label>
<input type="radio" id="agerange" name="age" value="5">
<label for="agerange2">26-40</label>
<input type="radio" id="agerange" name="age" value="8">
<label for="agerange3">40-60</label>
<input type="radio" id="agerange" name="age" value="10">
<label for="agerange4">60+</label>
</div>
<div>
<label class="button" for="bmi">What is your BMI?</label>
<input type="radio" id="bmi" name="bmi" value="0" checked="checked">
<label for="bmi1">0-25</label>
<input type="radio" id="bmi" name="bmi" value="0">
<label for="bmi2">26-30</label>
<input type="radio" id="bmi" name="bmi" value="9">
<label for="bmi3">31-35</label>
<input type="radio" id="bmi" name="bmi" value="10">
<label for="bmi4">35+</label>
</div>
<div>
<label class="button" for="famhistory">Does anybody in your family have diabetes?</label>
<input type="radio" id="famhistory" name="famhistory" value="0" checked="checked">
<label for="famhistory1">No</label>
<input type="radio" id="famhistory" name="famhistory" value="7">
<label for="famhistory2">Grandparent</label>
<input type="radio" id="famhistory" name="famhistory" <label for="famhistory3">Sibling</label>
<input type="radio" id="famhistory" name="famhistory" value="15">
<label for="famhistory4">Parent</label>
</div>
<div>
<label class="button" for="diet">How would you describe your diet?</label>
<input type="radio" id="diet" name="diet" value="0" checked="checked">
<label for="diet1">Low sugar</label>
<input type="radio" id="diet" name="diet" value="7">
<label for="diet2">Normal sugar</label>
<input type="radio" id="diet" name="diet" value="15">
<label for="diet3">Quite high sugar</label>
<input type="radio" id="diet" name="diet" value="15">
<label for="diet4">High sugar</label>
</div>
</fieldset>
<div>
<input type="submit" value="submit" id="submit">
</div>
</form>
</body>
</html>
If you plan on adding values, here is a more flexible approach.
The idea is to loop through each relevant input (those that are inside your fieldset with ID controls), regardless of its name, so that if you add more checks, the same code will still work.
Create a score variable and increment it with the value of each input that is checked.
Be careful, you have the value 0 TWICE for the BMI check
window.addEventListener('DOMContentLoaded', function() {
var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
var inputs = document.querySelectorAll('#controls input');
var score = 0;
inputs.forEach(function(input) {
if (input.checked) {
score += parseInt(input.value, 10);
}
});
console.log(score);
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zedland Health Authority's Diabetes health assessment tool</title>
<script>
</script>
</head>
<body>
<h1 id="pageheading">Zedland Health Authority's Diabetes health assessment tool</h1>
<form id="register">
<fieldset id="controls">
<div>
<label class="button" for="Age">How old are you?</label>
<input type="radio" id="agerange" name="age" value="0" checked="checked">
<label for="agerange1">1-25</label>
<input type="radio" id="agerange" name="age" value="5">
<label for="agerange2">26-40</label>
<input type="radio" id="agerange" name="age" value="8">
<label for="agerange3">40-60</label>
<input type="radio" id="agerange" name="age" value="10">
<label for="agerange4">60+</label>
</div>
<div>
<label class="button" for="bmi">What is your BMI?</label>
<input type="radio" id="bmi" name="bmi" value="0" checked="checked">
<label for="bmi1">0-25</label>
<input type="radio" id="bmi" name="bmi" value="0">
<label for="bmi2">26-30</label>
<input type="radio" id="bmi" name="bmi" value="9">
<label for="bmi3">31-35</label>
<input type="radio" id="bmi" name="bmi" value="10">
<label for="bmi4">35+</label>
</div>
<div>
<label class="button" for="famhistory">Does anybody in your family have diabetes?</label>
<input type="radio" id="famhistory" name="famhistory" value="0" checked="checked">
<label for="famhistory1">No</label>
<input type="radio" id="famhistory" name="famhistory" value="7">
<label for="famhistory2">Grandparent</label>
<input type="radio" id="famhistory" name="famhistory"
<label for="famhistory3">Sibling</label>
<input type="radio" id="famhistory" name="famhistory" value="15">
<label for="famhistory4">Parent</label>
</div>
<div>
<label class="button" for="diet">How would you describe your diet?</label>
<input type="radio" id="diet" name="diet" value="0" checked="checked">
<label for="diet1">Low sugar</label>
<input type="radio" id="diet" name="diet" value="7">
<label for="diet2">Normal sugar</label>
<input type="radio" id="diet" name="diet" value="15">
<label for="diet3">Quite high sugar</label>
<input type="radio" id="diet" name="diet" value="15">
<label for="diet4">High sugar</label>
</div>
</fieldset>
<div>
<input type="submit" value="submit">
</div>
</form>
</body>
</html>
I am trying to set a radio button based on selecting an option in a select box.
For example, There are 5 select options available, If I select the first option, first radio button should be checked. Likewise for the rest of the things. I am working only with Javascript.
I have tried the below code.
<html>
<head>
<title>JS Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body>
<div></div>
<div>
<form name="myform" action="">
<label for="name">Name</label>
<input type="text" name="name"></input>
<br>
<label for="select_value" onchange="myFunction()">Select Number</label>
<select name="select_value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<label for="radio_value">Select Position</label>
<input type="radio" name="radio_value" value="First">First</input>
<input type="radio" name="radio_value" value="Second">Second</input>
<input type="radio" name="radio_value" value="Third">Third</input>
<input type="radio" name="radio_value" value="Fourth">Fourth</input>
<input type="radio" name="radio_value" value="Fifth">Fifth</input>
<br>
<input type="submit" name="form_submit" value="Submit"></input>
</form>
</div>
<script type="text/javascript">
function myFunction() {
var x = document.getElementsByName("select_value").value;
document.getElementsByName('radio_value')[x].checked=true;
}
</script>
</body>
</html>
JSFIDDLE
You can add this code to your javascript
var select = document.getElementsByTagName('select')[0];
select.onchange = function(event) {
var btns = document.querySelectorAll('[name^="radio_value"]');
btns[event.target.value].checked = true
}
working example
Documentation
Events
Selectors
Following changes makes your example work :
1.
<select name="select_value" onchange="myFunction()">
2.
document.getElementsByName("select_value")[0].value;
3.
document.getElementsByName('radio_value')[x].checked=true;
4.
function should be in head section
Working Fiddle
Try this. It is working for me. Use parseInt when getting the value of the select box. I have given an id to the select box and have used x-1 while selecting the radio buttons as their index starts from 0.
<form name="myform" action="">
<label for="name">Name</label>
<input type="text" name="name"></input>
<br>
<label for="select_value" >Select Number</label>
<select name="select_value" onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<label for="radio_value">Select Position</label>
<input type="radio" name="radio_value" value="First">First</input>
<input type="radio" name="radio_value" value="Second">Second</input>
<input type="radio" name="radio_value" value="Third">Third</input>
<input type="radio" name="radio_value" value="Fourth">Fourth</input>
<input type="radio" name="radio_value" value="Fifth">Fifth</input>
<br>
<input type="submit" name="form_submit" value="Submit"></input>
</form>
</div>
<script type="text/javascript">
function myFunction() {
var x = parseInt(document.getElementsByName("select_value")[0].value);
alert((x));
document.getElementsByName('radio_value')[x-1].checked=true;
}
Try this out its working fine
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<title>JS Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body>
<div></div>
<div>
<form name="myform" action="">
<label for="name">Name</label>
<input type="text" name="name"></input>
<br>
<label for="select_value">Select Number</label>
<select name="select_value" id = "select_value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<label for="radio_value">Select Position</label>
<input type="radio" name="radio_value" id = "First" value="First">First</input>
<input type="radio" name="radio_value" id="Second" value="Second">Second</input>
<input type="radio" name="radio_value" id="Third" value="Third">Third</input>
<input type="radio" name="radio_value" id="Fourth" value="Fourth">Fourth</input>
<input type="radio" name="radio_value" id="Fifth" value="Fifth">Fifth</input>
<br>
<input type="submit" name="form_submit" value="Submit"></input>
</form>
</div>
</body>
<script type="text/javascript">
$( "#select_value" ).change(function() {
var conceptName = $('#select_value').find(":selected").text();
if(conceptName=="1"){
$('#First').prop('checked',true);
}
else if(conceptName=="2"){
$('#Second').prop('checked',true);
}
else if(conceptName=="3"){
$('#Third').prop('checked',true);
}
else if(conceptName=="4"){
$('#Fourth').prop('checked',true);
}
else{
$('#Fifth').prop('checked',true);
}
});
</script>
</html>
I have a problem, I want to show some specific field when i select a specific radio button. I did that and I test on this page (http://jsfiddle.net/niklakis/cw0qLnk5/5/) but when i get the code (which is the below) it does not show the specific fields when I select the radio button.
Can you help me please?
THIS IS THE WHOLE CODE ....
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<script>
$("input[type='radio']").change(function () {
if ($(this).val() == "Doctor") {
$("#DoctorRegister").show();
} else {
$("#DoctorRegister").hide();
}
if ($(this).val() == "Patient") {
$("#PatientGM").show();
$("#PatientGF").show();
$("#PatientAge").show();
$("#SelectDisease").show();
$("#Male").show();
$("#Female").show();
$("#Age").show();
$("#Disease").show();
} else {
$("#PatientGM").hide();
$("#PatientGF").hide();
$("#PatientAge").hide();
$("#SelectDisease").hide();
$("#Male").hide();
$("#Female").hide();
$("#Age").hide();
$("#Disease").hide();
}
});</script>
</head>
<body>
<fieldset>
<legend>Registration Form</legend>
<label>First Name
<input type="text" name="fname" required="required" />
</label>
<br/>
<br/>
<label>Last Name
<input type="text" name="lname" required="required" />
</label>
<br />
<br />
<label>Username
<input type="text" name="username" required="required" />
</label>
<br />
<br />
<label>Email
<input type="text" name="email" required="required" />
</label>
<br />
<br />
<label>Password
<input type="text" name="password" required="required" />
</label>
<br/><br/>
User Type:
<br/>
Doctor <input type="radio" name="answer" value="Doctor" />
Patient <input type="radio" name="answer" value="Patient" />
<br/>
<br/>
<input style="display:none;" type="text" name="DoctorRegister" id="DoctorRegister" />
<br/>
<br/>
<label style="display:none;" id="Male">Male</label>
<input style="display:none;" type="radio" name="PatientGM" value="male" id="PatientGM">
<label style="display:none;" id="Female">Female</label>
<input style="display:none;" type="radio" name="PatientGF" value="male" id="PatientGF">
<br/>
<br/>
<label style="display:none;" id="Age">Age:</label>
<input style="display:none;" type="text" name="PatientAge" id="PatientAge" />
<br/>
<br/>
<label style="display:none;" id="Disease">Disease:</label>
<select style="display:none;" id="SelectDisease">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
</fieldset>
</body>
</html>
You're executing your code before the document is rendered. Either:
Move your code to the end of the document before the closing body tag or
Put your code in a document ready handler in the head like:
$( document ).ready(function() {
// your code here
});
jsFiddle example
$("input[type='radio']").change() will fire for all inputs of type radio button. So, try with:
$("input[type='radio'][name='answer']").change()
I'm attempting to recreate this JSfiddle locally on my machine:
http://jsfiddle.net/jakecigar/LM8Gd/1/
I don't understand though because it will goto the menu screen like on the fiddle above, but the animations will not happen and the question will not cycle through. It will only stay on the length? question and stay there and none of the buttons will do anything.
I have 3 files: index.html, js.js, and styles.css.
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js.js"></script>
</head>
<body>
<!-- start questionaire -->
<form class="questionnaire">
<fieldset>
<h3>length?</h3>
<label>
<input name="length" value="5" type="radio" />Too big</label>
<label>
<input name="length" value="4" type="radio" />big</label>
<label>
<input name="length" value="3" type="radio" />medium</label>
<label>
<input name="length" value="2" type="radio" />small</label>
<label>
<input name="length" value="1" type="radio" />tiny</label>
</fieldset>
<fieldset>
<h3>width?</h3>
<label>
<input name="width" value="5" type="radio" />Too big</label>
<label>
<input name="width" value="4" type="radio" />big</label>
<label>
<input name="width" value="3" type="radio" />medium</label>
<label>
<input name="width" value="2" type="radio" />small</label>
<label>
<input name="width" value="1" type="radio" />tiny</label>
</fieldset>
<fieldset>
<h3>weight?</h3>
<label>
<input name="weight" value="5" type="radio" />Too big</label>
<label>
<input name="weight" value="4" type="radio" />big</label>
<label>
<input name="weight" value="3" type="radio" />medium</label>
<label>
<input name="weight" value="2" type="radio" />small</label>
<label>
<input name="weight" value="1" type="radio" />tiny</label>
</fieldset>
<button class="back" type="button">back</button>
</form>
<!-- end questionaire -->
</body>
</html>
styles.css:
#charset "utf-8";
/* CSS Document */
.questionnaire label {
display:block;
clear:both
}
.questionnaire fieldset:not(:first-child) {
display:none
}
js.js:
$(function () {
$(".questionnaire input[type='radio']").click(function () {
var fs = $(this).closest("fieldset"),
next = fs.nextAll('fieldset:first');
fs.slideUp('fast');
if (next.length) {
next.slideDown('fast')
} else {
alert("do some computation")
}
})
$(".questionnaire button.back").click(function(){
var fs=$(this).siblings(":visible"),
prev=fs.prevAll('fieldset:first');
if (prev.length){
fs.slideUp('fast')
prev.slideDown('fast')
}
})
})
It doesn't look like you've loaded jQuery into your page which js.js depends upon.
There should have been errors in the browser error console or debug console that point you in some useful direction. If you aren't looking there first when something doesn't work, that's one of the first things to learn.
I have javascript code below, it's working but within Firebug it says
document.form1.element[i] is not defined
and then it works fine
function set_action(){
for (var i=0;i<=3;i++)
{
if (document.form1.PayType[i].checked == true)
{
var billerid = document.form1.billerid[i].value;
document.form1.action = billerid +"_mypag.htm";
}
}
and my html markup is as below
<form name="form1" action="...">
<input name="PayType" type="radio" value="0" id="ultipay" class="radiobtn" checked/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input name="PayType" type="radio" value="1" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>
</select>
<input name="PayType" type="radio" value="2" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input name="PayType" type="radio" value="3" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input type="button" onclick="set_action()" value="submit">
</form>
I don't know why I am getting this error.
If you have only one radio button named PayType, then you need to address it with document.form1.PayType. It is addressed as an array document.form1.PayType[i] iff there are multiple radio buttons with the same name. For instance:
<input name="PayType" type="radio" value="0" id="ultipay0" class="radiobtn" checked="checked" />
<input name="PayType" type="radio" value="1" id="ultipay1" class="radiobtn" />