Member Avatar for Izzy123

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
  • 105 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Izzy123

Dani AI

Generated

Nice — 's solution gets the job done and was right that checking which radio is selected is the right approach. A few robustness and accessibility notes that make this reliable in real forms:

  • Avoid nested <form> tags and avoid spaces in id values (use not_visited or not-visited). Mismatched label for and input id or stray attribute typos can silently break scripts in some browsers.
  • Prefer attaching change/click handlers with addEventListener rather than inline handlers, and use a single handler (or delegation) for the radio group so the logic is centralized.
  • When you disable the checkboxes, also clear their checked state (disabled inputs are not submitted), set aria-disabled for assistive tech, and toggle a CSS class on the labels for the "disabled" look instead of manipulating inline styles from JS.

Example (modern, unobtrusive approach):

document.addEventListener('DOMContentLoaded', function () {
  var radios = document.querySelectorAll('input[name="times"]');
  var boxes  = document.querySelectorAll('input[name="attend"]');

  function setDisabled(disable) {
    boxes.forEach(function(cb) {
      cb.disabled = disable;
      if (disable) cb.checked = false;
      cb.setAttribute('aria-disabled', disable ? 'true' : 'false');
      var lbl = document.querySelector('label[for="' + cb.id + '"]');
      if (lbl) lbl.classList.toggle('is-disabled', disable);
    });
  }

  radios.forEach(function(r) {
    r.addEventListener('change', function() {
      setDisabled(r.value === 'not_visited');
    });
  });

  setDisabled(true);
});

Extra tips: use <fieldset>/<legend> to group questions, validate on the server as well as client-side, and test with the keyboard and a screen reader. See MDN for details on the disabled attribute and on adding event listeners: disabled attribute and addEventListener.

Recommended Answers

All 5 Replies

Member Avatar for almostbob

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

Edited by almostbob because: n/a
Member Avatar for Izzy123

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 because: Fixed formatting
Member Avatar for 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

Member Avatar for 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

Member Avatar for Izzy123

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!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.