2 Replies - 823 Views - Last Post: 09 March 2009 - 09:42 AM

#1 xheartonfire43x  Icon User is offline

  • D.I.C Regular

Reputation: 46
  • View blog
  • Posts: 454
  • Joined: 22-December 08

Using Javascript to change CSS

Posted 09 March 2009 - 09:20 AM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Using Javascript to change CSS

#2 mocker  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 50
  • View blog
  • Posts: 466
  • Joined: 14-October 07

Re: Using Javascript to change CSS

Posted 09 March 2009 - 09:30 AM

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";
}


Was This Post Helpful? 0
  • +
  • -

#3 xheartonfire43x  Icon User is offline

  • D.I.C Regular

Reputation: 46
  • View blog
  • Posts: 454
  • Joined: 22-December 08

Re: Using Javascript to change CSS

Posted 09 March 2009 - 09:42 AM

View Postmocker, 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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1