A way to use ColdFusion to dynamicly show a form element

ColdFusion dynamically showing a form element only if another element

Page 1 of 1

2 Replies - 3445 Views - Last Post: 11 March 2009 - 12:03 PM Rate Topic: -----

#1 xheartonfire43x  Icon User is offline

  • D.I.C Regular

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

A way to use ColdFusion to dynamicly show a form element

Posted 11 March 2009 - 07:44 AM

I was wondering if there is a way that ColdFusion will show a form element (ie. a <cfselect> tag) only if another form element (ie. a <select> tag) has a certain option selected.

<html>
<head>
<cfquery name="getCategories" datasource="#mydatasource#" username="#myusername#" password="#mypassword#">
  SELECT catID,catTitle FROM categories WHERE type = 'cat' AND display = 'Y' ORDER BY catid
</cfquery>
<script type="text/javascript">
if (document.forms[0].type.selectedIndex == n ){
		 document.forms[0].parentcat.style.visibility = "visible";
}
else {
		document.forms[0].parentcat.style.visibility = "hidden";
}
</script>
</head>
<body>
<cfset session.customVariable = getTickCount()>

<cfform id="newCat" action="engine.cfm" method="post" format="html">
<cfinput type="hidden" name="customVariable" value="#session.customvariable#">
<cfinput type="hidden" name="process" value="addCat">

<table cellpadding="0" cellspacing="0">
  <tr>
	<th colspan="2">New Category</th>
  </tr>
  <cfif isDefined('session.errormessage')>
	<tr>
	  <td colspan="2"><cfoutput><span style="color:##FF0000; ">#session.errormessage#</span></cfoutput></td>
	</tr>
	<cfset structDelete(session,'errormessage')>
  </cfif>
  <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="catid" display="cattitle" 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>
</body>
</html>


I want the bottom <cfselect> only to show if Sub Category is selected in the first <select> list. The javascript that I have doesn't work and I don't know javascript at all. Also I just want to know if ColdFusion can do it. I am guessing no because ColdFusion is Server-side coding.

Is This A Good Question/Topic? 0
  • +

Replies To: A way to use ColdFusion to dynamicly show a form element

#2 sansclue  Icon User is offline

  • D.I.C Regular

Reputation: 29
  • View blog
  • Posts: 316
  • Joined: 21-November 07

Re: A way to use ColdFusion to dynamicly show a form element

Posted 11 March 2009 - 10:23 AM

View Postxheartonfire43x, on 11 Mar, 2009 - 06:44 AM, said:

I want the bottom <cfselect> only to show if Sub Category is selected in the first <select> list. The javascript that I have doesn't work and I don't know javascript at all. Also I just want to know if ColdFusion can do it. I am guessing no because ColdFusion is Server-side coding.


Yes, you could use CF. But as you say, it is processed on the server side. So it would require re-submitting the form. Javascript is preferable because it does not require another request to the server.

Check out the javascript examples at w3schools. They are pretty helpful in explaining the different objecrts, properties, events, etc..
http://www.w3schools..._obj_select.asp

For select lists, you can use the onchange event. It is triggered whenever the selected item changes. So create a function that changes the visibility of the second list. Then call that function onchange:

<script ...>
	  function changeListVisibility() 
	  {
		 .... 
	  }
</script>

<select onchange="changeListVisibility();" ...>
.....
</select>


Also, the new DOM syntax is a lot simpler than the old document.forms[0].... syntax. To use it, just give both of your select lists an "id", then you can use document.getElementById('yourListIDHere') to access those elements from javascript. Something like this should work. Just remember javascript is cAsE sEnSiTivE.

	  function changeListVisibility() 
	  {
			 var firstList = document.getElementById('yourIDForTheFirstListHere');
			 var secondList = document.getElementById('yourIDForTheSecondListHere');
			 // get the selected VALUE
			 var selectedType = firstList.options[ firstList.selectedIndex ].value.toLowerCase();

			  if ( selectedType  == "sub" ) 
			 {
					   /// code to make it visible here 
			  }
			 else 
			 {
					   // code to make it NOT visible here
			 }
	  } 
</script>

Was This Post Helpful? 1
  • +
  • -

#3 xheartonfire43x  Icon User is offline

  • D.I.C Regular

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

Re: A way to use ColdFusion to dynamicly show a form element

Posted 11 March 2009 - 12:03 PM

View Postsansclue, on 11 Mar, 2009 - 09:23 AM, said:

View Postxheartonfire43x, on 11 Mar, 2009 - 06:44 AM, said:

I want the bottom <cfselect> only to show if Sub Category is selected in the first <select> list. The javascript that I have doesn't work and I don't know javascript at all. Also I just want to know if ColdFusion can do it. I am guessing no because ColdFusion is Server-side coding.


Yes, you could use CF. But as you say, it is processed on the server side. So it would require re-submitting the form. Javascript is preferable because it does not require another request to the server.

Check out the javascript examples at w3schools. They are pretty helpful in explaining the different objecrts, properties, events, etc..
http://www.w3schools..._obj_select.asp

For select lists, you can use the onchange event. It is triggered whenever the selected item changes. So create a function that changes the visibility of the second list. Then call that function onchange:

<script ...>
	  function changeListVisibility() 
	  {
		 .... 
	  }
</script>

<select onchange="changeListVisibility();" ...>
.....
</select>


Also, the new DOM syntax is a lot simpler than the old document.forms[0].... syntax. To use it, just give both of your select lists an "id", then you can use document.getElementById('yourListIDHere') to access those elements from javascript. Something like this should work. Just remember javascript is cAsE sEnSiTivE.

	  function changeListVisibility() 
	  {
			 var firstList = document.getElementById('yourIDForTheFirstListHere');
			 var secondList = document.getElementById('yourIDForTheSecondListHere');
			 // get the selected VALUE
			 var selectedType = firstList.options[ firstList.selectedIndex ].value.toLowerCase();

			  if ( selectedType  == "sub" ) 
			 {
					   /// code to make it visible here 
			  }
			 else 
			 {
					   // code to make it NOT visible here
			 }
	  } 
</script>


Thank you that was very helpful.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1