Forum Moderators: open
Sorry if this seems a bit of an elementary question but I am completely new to the world of JavaScript, with my talents being mainly PHP/(x)HTML etc.
I am in the middle of building an online questionnaire for a project I am working on. What i want is when a user selects Yes in a selection of radio buttons for the first question, for the second question to be automatically enabled.
I tried searching around and have looked in a HTML book that I have (which is very brief on the subject of JS) and I have come up with the following (which doesnt work):
<form action="/questionnaire.php" method="post" name="questionnaire" >
<fieldset>
<legend>Question One</legend>
<p class="form_label">first question:</p>
<input type="radio" name="1_1" value="A" onclick="document.questionnaire.1_2.disabled=false" />Yes
<input type="radio" name="1_1" value="B"/>No
<input type="radio" name="1_1" value="C"/>Don't know
<p class="form_label">second question (needs q1 to be answered yes):</p>
<input type="radio" name="1_2" value="A" disabled="disabled" />None
<input type="radio" name="1_2" value="B" disabled="disabled" />1
<input type="radio" name="1_2" value="C" disabled="disabled" />2
<input type="radio" name="1_2" value="D" disabled="disabled" />3 or more
</fieldset>
</form>
I think i am completely out of my depth so if anyone can suggest how to get this working i would be very grateful.
Also is there any sort of browser incompatabilities with this sort of javascript or should i be ok for most users?
Thanks in advance
Richard
eggy, your code didn't work because:
1. Properties that have names that are invalid as variable names can't be accessed via dot syntax. Your's begin with digits (same as PHP here). Such properties can be accessed via square brackets.
2. Since there are many elements with the same name, a collection is returned when you reference by that name. You have to iterate this collection, setting disabled property on each element.
3. IE doesn't like the names beginning with digits. It returns a collection of one.
In the demo - which is generic - I have prefixed the name with an alpha character.
Go for orion's suggestion, unless you don't like the radios suddenly appearing.
<html>
<head>
<title>Test</title>
<script>function setDisabled(formName,elmName,disabled)
{
var elms = document.forms[formName][elmName];
if(!elms.length) elms = [elms];// single elm? Put in dummy array.
for(var k=0;k<elms.length;k++)
elms[k].disabled = disabled;
}
</script>
</head>
<body><form action="/questionnaire.php" method="post" name="questionnaire" >
<fieldset>
<legend>Question One</legend>
<p class="form_label">first question:</p>
<input type="radio" name="1_1" value="A"
onclick="setDisabled('questionnaire','r1_2',!this.checked)"
/>Yes
<input type="radio" name="1_1" value="B"
onclick="setDisabled('questionnaire','r1_2',this.checked)"
/>No
<input type="radio" name="1_1" value="C"
onclick="setDisabled('questionnaire','r1_2',this.checked)"
/>Don't know
<p class="form_label">second question (needs q1 to be answered yes):</p>
<input type="radio" name="r1_2" value="A" disabled="disabled" />None
<input type="radio" name="r1_2" value="B" disabled="disabled" />1
<input type="radio" name="r1_2" value="C" disabled="disabled" />2
<input type="radio" name="r1_2" value="D" disabled="disabled" />3 or more
</fieldset>
</form></body>
</html>
[edited by: jatar_k at 3:49 pm (utc) on Oct. 5, 2005]
Thanks for the feedback guys. I've managed to get things sorted using and adaptation of Orion's suggestion.
Cheers
Richard
