PDA

View Full Version : Enable/Disable Form Elements Help

woalmoore
10-15-2008, 06:44 PM
I currently have the following code in a page. (I've removed some of the stuff not critical to this question) I am attempting to keep the LinkOption box disabled (grayed) unless the user selects "ExternalLink" from the "required_commentnature" box.

Any help would be appreciated. Allen.


------>START CODE<------
<html>

<head>
<script language="Javascript"><!--
function enable_element ()
{
var x=document.getElementbyID("required_commentnature").selectedIndex
var y=document.GetElementsbyTagName("required_commentnature"[x].value
if y="ExternalLink" then (document.getElementbyID("LinkOption").disabled=false)

}
</script>

<title>Website Response Form</title>
</head>

<body>

<form method="POST" name="WebsiteCommentForm" action="--WEBBOT-SELF--" onSubmit="location.href='_derived/nortbots.htm';return false;" webbot-onSubmit>

<p style="margin-top: 0; margin-bottom: 4">Name:&nbsp;
<input type="text" name="required_Name" size="50" tabindex="1"></p>

<p style="margin-top: 0; margin-bottom: 4">Email Address:&nbsp;
<input type="text" name="required_Address" size="50" tabindex="2"></p>

<p align="left" style="margin-top: 0; margin-bottom: 4">Nature of Comment:&nbsp;

<select size="1" name="required_commentnature" tabindex="3" onChange="enable_element()">

<option value="None">No Choice Selected Yet</option>
<option value="TeacherPage">Content of Teacher Page(s)</option>
<option value="GeneralPage">Content of General Page(s)</option>
<option value="ExternalLink">External Link(s) from Website</option>
<option value="General">General Site Comment(s)</option>
</select></p>

<p align="left" style="margin-top: 0; margin-bottom: 4">If Commenting on external links, please specify nature:

<select size="1" name="LinkOption" tabindex="4" disabled="true">

<option>No Choice Selected</option>
<option>External link is broken (does not link to an existing page)</option>
<option>Content of linked page is inappropriate</option>
<option>External link has outdated or incorrect information</option>
<option>Positive comment on external link</option>
</select></p>

<p align="left" style="margin-top: 0; margin-bottom: 4">If you are commenting on an external link, please indicate the page from which the link is from and the page to which it is linking.</p>
<p align="left" style="margin-top: 0; margin-bottom: 4">Comments:</p>
<p align="left" style="margin-top: 0; margin-bottom: 4">
<textarea rows="6" name="comments" cols="80" tabindex="5"></textarea></p>
<p align="center">
<input type="submit" value="Submit" name="submit" tabindex="10"><input type="reset" value="Reset" name="reset" tabindex="11"></p>
</form>

</body></html>

----->END OF CODE<----
rangana
10-16-2008, 01:45 AM
First, you should be aware that language is deprecated. Use type instead.

Secondly, JS is case sensitive:

document.getElementbyID
.
.
.
document.GetElementsbyTagName


...should be:

document.getElementById
.
.
.
document.getElementsByTagName



Javascript syntax for if statements is not the same as that of vbscript's if then. This part is erroneous:

if y="ExternalLink" then (document.getElementbyID("LinkOption").disabled=false)


And should be:

if(y=='ExternalLink")
// Action


And lastly, you have incomplete comment line:

<!--
<script.....
.
.
.
// -->
</script>

You miss highlighted.



You might find this complete ammendment useful:

<script type="text/javascript">
<!--
function enable_element()
{
var x=document.getElementsByName("required_commentnature")[0],
y=document.getElementsByName("LinkOption")[0];
y.disabled=x.value=='ExternalLink'?false:true;
}
-->
</script>


P.S., you can also use document.getElementById in replacement of document.getElementsByTagName. Just ensure to add an id attribute on the select element.

Hope that helps.