0

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.

3
Contributors
5
Replies
6
Views
7 Years
Discussion Span
Last Post by Izzy123
0

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

Edited by almostbob: n/a

0

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>

Edited by mike_2000_17: Fixed formatting

0

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

0

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

0

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!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.