im new to javascript and im currently designing a survey and i have to modify the survey using javascript, it has to do:
the user should not be allowed to select any options from question 2 if they chose the last radio button of question 1.
and i don't know how to do it. can anyone please help, thanks.
javascript searching for the selectindex of the radio buttons would accomplish it, disable the second selection,
exact help is easy, more accurate if you post the code you have, for one of the javascript mavens to post an edit to
anything written now, would be a guestimate at best
this is a Generic link to disabling radio buttons
this is what i have so far, and it's not working..
<head>
<title> *** </title>
<script type="text/javascript">
function exa( val )
{
if( val == "not visited" )
dis = false;
else
dis = true;
document.question2.attend.disabled=dis;
}
</script>
</head>
<body>
<form name="checkForm">
<h1> survey </h1>
<p> Please take a minute to fill in the form below. We value your feedback - thanks </p>
<OL>
<LI> How many time per week have you been visiting Gymnaslum since becoming a member?</LI>
<INPUT TYPE="radio" name="times" id="once" value="once">
<LABEL for="once">Once per week</LABEL>
<br />
<INPUT TYPE="radio" name="times" id="twice" value="twice">
<LABEL for="twice">Twice a week</LABEL>
<br />
<INPUT TYPE="radio" name="times" id="three" value="three">
<LABEL for="three">Three times a week</LABEL>
<br />
<INPUT TYPE="radio" name="times" id="four" value="four">
<LABEL for="four">Four or more time per week</LABEL>
<br />
<INPUT TYPE="radio" name="times" id="not visited" value="not visited" onclick="return exa(this.value)">
<LABEL for="not visited">I have not visited since joining (sigh)</LABEL>
<form name="question2">
<LI> Which classes have you attended? </LI>
<INPUT TYPE="checkbox" name="attend" id="aerobics" value="aerobics">
<LABEL for="aerobics">Aerobics</LABEL>
<br />
<INPUT TYPE="checkbox" name="attend" id="boxing" value="boxing">
<LABEL for="boxing">Boxing</LABEL>
<br />
<INPUT TYPE="checkbox" name="attend" id="circuit" value="circuit"">
<LABEL for="circuit">Circuit Class</LABEL>
<br />
<INPUT TYPE="checkbox" name="attend" id="weight" value="weight">
<LABEL for="weight">Weight Training</LABEL>
</form>
</OL>
</FORM>
</body>
</html>
Izzy,
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow: Demo</title>
<script type="text/javascript">
onload = function(){
var q1 = document.getElementById('q1');
var q2 = document.getElementById('q2');
var q1Options = q1.getElementsByTagName('input');
var q2Options = q2.getElementsByTagName('input');
var q2Labels = q2.getElementsByTagName('label');
var enableName = 'not visited';
var disable_q2 = function(value){
for(var i=0; i<q2Options.length; i++) {//loop through Q2 to disable/enable options (and thier labels).
if(value !== enableName){
q2Options[i].disabled = true;
q2Labels[i].style.color = '#e0e0e0';
}
else {
q2Options[i].disabled = false;
if(q2Labels[i]){
q2Labels[i].style.color = '#000000';
}
}
}
};
for(var i=0; i<q1Options.length; i++) {//loop through Q1 options to attach Q2 disable function.
q1Options[i].onclick = function(){ disable_q2(this.value); };
}
disable_q2('');//force q2 to be disabled initially
};
</script>
</head>
<body>
<form name="checkForm">
<h1>Survey</h1>
<p>Please take a minute to fill in the form below. We value your feedback - thanks</p>
<ol>
<li id="q1">How many time per week have you been visiting Gymnaslum since becoming a member?
<br />
<input type="radio" name="times" id="once" value="once" />
<label for="once">Once per week</label>
<br />
<input type="radio" name="times" id="twice" value="twice" />
<label for="twice">Twice a week</label>
<br />
<input type="radio" name="times" id="three" value="three" />
<label for="three">Three times a week</label>
<br />
<input type="radio" name="times" id="four" value="four" />
<label for="four">Four or more time per week</LABEL />
<br />
<input type="radio" name="times" id="not visited" value="not visited" />
<label for="not visited">I have not visited since joining (sigh)</label>
</LI>
<LI id="q2">Which classes have you attended?
<br />
<input type="checkbox" name="attend" id="aerobics" value="aerobics" />
<label for="aerobics">Aerobics</label>
<br />
<input type="checkbox" name="attend" id="boxing" value="boxing" />
<label for="boxing">Boxing</label>
<br />
<input type="checkbox" name="attend" id="circuit" value="circuit" />
<label for="circuit">Circuit Class</label>
<br />
<input type="checkbox" name="attend" id="weight" value="weight" />
<label for="weight">Weight Training</label>
</li>
</ol>
</form>
</body>
</html>Note: There are some changes to the HTML in addition to the Javascript.
Airshow
Whoops, line 18 should be expanded to:
if(q2Labels[i]){
q2Labels[i].style.color = '#e0e0e0';
}This gives it the same safety as we gave lines 22-24.
Airshow
Izzy,
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Airshow: Demo</title> <script type="text/javascript"> onload = function(){ var q1 = document.getElementById('q1'); var q2 = document.getElementById('q2'); var q1Options = q1.getElementsByTagName('input'); var q2Options = q2.getElementsByTagName('input'); var q2Labels = q2.getElementsByTagName('label'); var enableName = 'not visited'; var disable_q2 = function(value){ for(var i=0; i<q2Options.length; i++) {//loop through Q2 to disable/enable options (and thier labels). if(value !== enableName){ q2Options[i].disabled = true; q2Labels[i].style.color = '#e0e0e0'; } else { q2Options[i].disabled = false; if(q2Labels[i]){ q2Labels[i].style.color = '#000000'; } } } }; for(var i=0; i<q1Options.length; i++) {//loop through Q1 options to attach Q2 disable function. q1Options[i].onclick = function(){ disable_q2(this.value); }; } disable_q2('');//force q2 to be disabled initially }; </script> </head> <body> <form name="checkForm"> <h1>Survey</h1> <p>Please take a minute to fill in the form below. We value your feedback - thanks</p> <ol> <li id="q1">How many time per week have you been visiting Gymnaslum since becoming a member? <br /> <input type="radio" name="times" id="once" value="once" /> <label for="once">Once per week</label> <br /> <input type="radio" name="times" id="twice" value="twice" /> <label for="twice">Twice a week</label> <br /> <input type="radio" name="times" id="three" value="three" /> <label for="three">Three times a week</label> <br /> <input type="radio" name="times" id="four" value="four" /> <label for="four">Four or more time per week</LABEL /> <br /> <input type="radio" name="times" id="not visited" value="not visited" /> <label for="not visited">I have not visited since joining (sigh)</label> </LI> <LI id="q2">Which classes have you attended? <br /> <input type="checkbox" name="attend" id="aerobics" value="aerobics" /> <label for="aerobics">Aerobics</label> <br /> <input type="checkbox" name="attend" id="boxing" value="boxing" /> <label for="boxing">Boxing</label> <br /> <input type="checkbox" name="attend" id="circuit" value="circuit" /> <label for="circuit">Circuit Class</label> <br /> <input type="checkbox" name="attend" id="weight" value="weight" /> <label for="weight">Weight Training</label> </li> </ol> </form> </body> </html>Note: There are some changes to the HTML in addition to the Javascript.
Airshow
THANKS!! It works!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.