[xheartonfire43x]

I am building a form with ColdFusion, HTML, and will be using some Javascript, and I wnt the javascript to tell one form object to display itself when a certain option is chosen from a <select> tag.

<cfquery name="getCategories" datasource="#mydatasource#" username="#myusername#" password="#mypassword#">
  SELECT * FROM categories WHERE type = 'cat' ORDER BY id
</cfquery>

<cfform action="engine.cfm" method="post" format="html">
<table cellpadding="0" cellspacing="0">
  <tr>
	<th colspan="2">New Category</th>
  </tr>
  <tr>
	<td>Category Type:</td>
	<td>
	  <select name="type">
		<option value=" "></option>
		<option value="cat">Main Category</option>
		<option value="sub">Sub Category</option>
	  </select>
	</td>
  </tr>
  <tr>
	<td>Name:</td>
	<td><cfinput type="text" name="title" size="20" maxlength="100" required="yes" message="A name for the category is required."></td>
  </tr>
  <tr>
	<td>Parent Category:</td>
	<td>
	  <cfselect enabled="Yes" name="parentcat" multiple="no" query="getCategories" value="id" display="title" queryPosition="below">
		<option value=" "></option>
	  </cfselect>
	</td>
  </tr>
  <tr>
	<td colspan="2"><cfinput type="submit" name="submit" value="Submit" validate="submitonce" validateat="onserver,onsubmit"></td>
  </tr>
</table>
</cfform>

I want the <cfselect> tag to display on if Sub Category is selected on the first <select> tag. I expect that it will use the onchange attribute but other than that I have no idea.

[mocker]

It's helpful if you give your html elements ids, so you can specify them in javascript.

to point to the first form on the page:
document.forms[0]

to get the value of the fselect option in the first select of that form:
document.forms[0].type.children[document.forms[0].type.selectedIndex].value

Or if you know the specific index you want to check for you can just do an if like:

if (document.forms[0].type.selectedIndex == n ){
		 document.forms[0].parentcat.style.visibility = "visible";
}
else {
		document.forms[0].parentcat.style.visibility = "hidden";
}

[xheartonfire43x]

mocker, on 9 Mar, 2009 - 08:30 AM, said:

It's helpful if you give your html elements ids, so you can specify them in javascript.

to point to the first form on the page:
document.forms[0]

to get the value of the fselect option in the first select of that form:
document.forms[0].type.children[document.forms[0].type.selectedIndex].value

Or if you know the specific index you want to check for you can just do an if like:

if (document.forms[0].type.selectedIndex == n ){
		 document.forms[0].parentcat.style.visibility = "visible";
}
else {
		document.forms[0].parentcat.style.visibility = "hidden";
}

So what would the id's have to be for that to work? I really don't know anything about Javascript yet so I am a bit retarded at this stuff.