Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Enable Disable Control in Coldfusion 1

Status
Not open for further replies.
szeiss

szeiss

Programmer
Apr 5, 2000
137
US
I have a form with 3 radio buttons:

<tr>
<td class="formTitle" align="right">Select By:</td>
<td width="#variables.spacerWidth#"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
<td valign="top" class="rowText">

<input type="radio" name="rpttype" id="type_pd" value="PD" onFocus="enableField()" rel="paydate">
<label for="type_pd">Pay Date</label><br />

<input type="radio" name="rpttype" id="type_pc" value="PC" onClick="enableField()" rel="paycycle">
<label for="type_pc">Pay Cycle</label><br />

<input type="radio" name="rpttype" value="DR" onClick="enableField()" rel="daterange" id="type_dr" />
<label for="type_dr">Date Range</label><br />
</td>
</tr>

If I select the paydate radio button, I would like the 'pay_date' field to be enabled and the other fields disabled. If I select the 'paycycle' control, then the paydate text box becomes disabled and the paycycle text box becomes enabled and so on and so forth.

<TR>
<td class="formTitle" align="right"><label for="pay_date"><span class="accessibility"></span>Pay Date:</label></td>
<td width="#variables.spacerWidth#"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
<td valign="top" class="rowText">
<select name="pay_date" id="pay_date">
<cfloop query="getDates">
<option value="#DateFormat(getDates.PAYDATE)#" <cfif DateFormat(getDates.PAYDATE) EQ attributes.pay_date> SELECTED</cfif>>#DateFormat(getDates.PAYDATE)#</cfloop>
</SELECT>
</td>
</TR>

<tr>
<td class="formTitle" align="right"><label for="type_pc"><span class="accessibility"></span>Pay Cycle:</label></td>
<td width="#variables.spacerWidth#"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
<td valign="top" class="rowText">
<select name="PayCycle" id="type_pc">
<cfloop query="getDates">
<option value="#getDates.PERIOD#" <cfif getDates.PERIOD EQ attributes.PayCycle> SELECTED</cfif>>#getDates.PERIOD#</cfloop>
</SELECT>
</td>
</tr>

I'm trying to use the getElementbyID code, but I'm not quite understanding it.

Thanks,
Sherry
 
Sort by date Sort by votes
Hi

I would use a function like this :
Code: 
[b]function[/b] enableField(what)
{
  [b]var[/b] relation={
    [i]'type_pd'[/i]:[i]'pay_date'[/i],
    [i]'type_pc'[/i]:[i]'type_pc2'[/i],
    [i]'type_dr'[/i]:[i]'whatever'[/i]
  }

  [b]for[/b] (one [b]in[/b] relation) document.getElementById(relation[one]).disabled=what.id!=one
}
Note :
[ul]
[li]The function expects a reference to the clicked [tt]input[/tt], so make the calls :
Code: 
<input type="radio" name="rpttype" id="type_pd" value="PD" onFocus="enableField([red]this[/red])" rel="paydate">
[/li]
[li]You had two elements with [tt]id[/tt] type_pc, so I changed the [tt]select[/tt]'s [tt]id[/tt] to type_pc2.[/li]
[li]You did not posted the third [tt]select[/tt], so I gave it the [tt]id[/tt] whatever.[/li]
[li]You posted no requirement regarding the initial state of the controls, so I did not treated that problem.[/li]
[/ul]
Next time please cut off the pure decorative tags from the code you post and enclose it between [tt][ignore]
Code: 
[/ignore][/tt] and [tt][ignore]
[/ignore][/tt] tags.

Feherke.
 
Upvote 0 Downvote
Thanks that works great, except for one thing. Here is my third select, they are shown side by side on the screen:

Code: 
<SELECT name="PPEBEGIN" id="type_dr2" />
<cfloop query="getDates"><option value="#getDates.PPE_BEGIN#" <cfif getDates.PPE_BEGIN EQ attributes.PPEBEGIN> SELECTED</cfif>>#DateFormat(getDates.PPE_BEGIN)#
</cfloop>
</SELECT>

<SELECT name="PPEEND" id="type_dr2" />
<cfloop query="getDates">
<option value="#getDates.PPE#" <cfif getDates.PPE EQ attributes.PPEEND> SELECTED</cfif>>#DateFormat(getDates.PPE)#</cfloop>
</SELECT>

The problem is, the PPEEND is never disabled no matter what radio button I select. Also, when I do enter the form is would be nice if the controls were disabled.

Thanks for your help, I'm really not a javascript person.

Sherry
 
Upvote 0 Downvote
Hi

Again, you have two elements with the same [tt]id[/tt]. The [tt]id[/tt] must be unique per document.

Another thing, those slashes ( / ) in the [tt]select[/tt] tags are looking bad. I have no idea about ColdFusion, but I have a feeling that it does not require those slashes. If they reach into HTML, they are certainly wrong.

Sherry said:
when I do enter the form is would be nice if the controls were disabled.
Click to expand...
I skipped that part because you gave us no such detail. Basically they can be disabled from HTML :
Code: 
<select name="PPEBEGIN" id="type_dr2" disabled="disabled">
Of course, if they should be disabled based on a dynamically changing criteria, then give us details.

Or just set the radio button then call the enableField() function manually :
Code: 
window.onload=function() {
  var first=document.getElementById('type_pd')
  first.checked=true
  enableField(first)
}

Feherke.
 
Upvote 0 Downvote
Ok, here is my form sort of. The underlines represent radio buttons for 'Report Type' and drop-down select boxes for the other fields.

Code: 
Report Type: _ Pay Date
             _ Pay Cycle
             _ Date Range

Pay Date:    __________   /*This is a date*/

Pay Cycle:   ____   /*This is a number 1-26 */

PPE Begin:   ______   PPE End: _____  /*These are dates*/

When I enter the form, 'Pay Date', 'Pay Cycle' and PPE Begin/End should be disabled. When I select the 'Pay Date' button then the 'Pay Date' select box should enable while the others stay disabled. When I select 'Pay Cycle' the 'Pay Cycle' select box should enable and the 'Pay Date' and others should disable. When I select the 'Date Range' button, then BOTH 'PPE Begin/PPE End' should enable.

The code you gave me earlier works great except the PPE Begin/End date controls.

Thanks,
Sherry
 
Upvote 0 Downvote
Have you fixed the issue with the trailing "/" in the select element as advised? Can you post actual client-side code, not server-side?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Hi

Oops. So the third [tt]radio[/tt] button has to control two [tt]select[/tt]s ! Then we need arrays :
Code: 
[b]function[/b] enableField(what)
{
  [b]var[/b] relation={
    [i]'type_pd'[/i]:[[i]'pay_date'[/i]],
    [i]'type_pc'[/i]:[[i]'type_pc2'[/i]],
    [i]'type_dr'[/i]:[[i]'type_dr2'[/i],[i]'type_dr2e'[/i]]
  }

  [b]for[/b] (one [b]in[/b] relation) [b]for[/b] (two [b]in[/b] relation[one]) document.getElementById(relation[one][two]).disabled=what.id!=one
}
Note that I changed the [tt]id[/tt] of PPEEND to type_dr2e to make it unique.

Feherke.
 
Upvote 0 Downvote
I think I got rid of all the "/". Here are my 3 radio buttons and the 3 corresponding select controls from the 'view source' file. I'm now getting an error. My controls are disabled when I enter the form and whenever I select the different radio buttons, they continue to stay disabled.

Code: 
/*Error*/
Line: 149
Char: 15
Error:  'length' is null or not an object
Code: 0
URL: [URL unfurl="true"]http://localhost.....[/URL]


/*Radio Buttons*/
			<input type="radio" name="rpttype" id="type_pd" value="PD" onClick="enableField(this)" rel="paydate">
				<label for="type_pd">Pay Date</label><br>
				
			<input type="radio" name="rpttype" id="type_pc" value="PC" onClick="enableField(this)" rel="paycycle">
				<label for="type_pc">Pay Cycle</label><br>
				
			<input type="radio" name="rpttype" id="type_dr" value="PR" onClick="enableField(this)" rel="daterange" >
				<label for="type_dr">Date Range</label><br>	

/*First Select*/

				<select name="pay_date" id="type_pd" disabled="disabled">
					
						<option value="03-Oct-08" >03-Oct-08
						<option 
				</SELECT>

/*Second Select*/

				<select name="PayCycle" id="type_pc2" disabled="disabled">
					
						<option value="1" >1
						<option value="2" >2
				</SELECT>

/*Third Select - Date Range*/

				<SELECT name="PPEBEGIN" id="type_dr2" disabled="disabled">
					
						<option value="2008-09-14 00:00:00.0" >14-Sep-08
						<option value="2008-09-28 00:00:00.0" >28-Sep-08
				</SELECT>

				<SELECT name="PPEEND" id="type_dr2e" disabled="disabled">
						<option value="2008-09-27 00:00:00.0" >27-Sep-08
						<option value="2008-10-11 00:00:00.0" >11-Oct-08
				</SELECT>

/*Javascript*/
function enableField(what)
{
  var relation={
    'type_pd':['pay_date'],
    'type_pc':['type_pc2'],
    'type_dr':['type_dr2','type_dr2e']
  }

  for (one in relation) for (two in relation[one]) document.getElementById(relation[one][two]).disabled=what.id!=one
}

I really appreciate the help.

Thanks,
Sherry
 
Upvote 0 Downvote
I found the length error. But still getting errors

Code: 
/*Error*/
Line: 804
Char: 1
Error:  object expected
Code: 0
URL: [URL unfurl="true"]http://localhost.....[/URL]

Line 804 corresponds to:
			<input type="radio" name="rpttype" id="type_dr" value="PR" onClick="enableField(this)" rel="daterange" >
				<label for="type_dr">Date Range</label><br>			


/*Radio Buttons*/
            <input type="radio" name="rpttype" id="type_pd" value="PD" onClick="enableField(this)" rel="paydate">
                <label for="type_pd">Pay Date</label><br>
                
            <input type="radio" name="rpttype" id="type_pc" value="PC" onClick="enableField(this)" rel="paycycle">
                <label for="type_pc">Pay Cycle</label><br>
                
            <input type="radio" name="rpttype" id="type_dr" value="PR" onClick="enableField(this)" rel="daterange" >
                <label for="type_dr">Date Range</label><br>    

/*First Select*/

                <select name="pay_date" id="type_pd" disabled="disabled">
                    
                        <option value="03-Oct-08" >03-Oct-08
                        <option 
                </SELECT>

/*Second Select*/

                <select name="PayCycle" id="type_pc2" disabled="disabled">
                    
                        <option value="1" >1
                        <option value="2" >2
                </SELECT>

/*Third Select - Date Range*/

                <SELECT name="PPEBEGIN" id="type_dr2" disabled="disabled">
                    
                        <option value="2008-09-14 00:00:00.0" >14-Sep-08
                        <option value="2008-09-28 00:00:00.0" >28-Sep-08
                </SELECT>

                <SELECT name="PPEEND" id="type_dr2e" disabled="disabled">
                        <option value="2008-09-27 00:00:00.0" >27-Sep-08
                        <option value="2008-10-11 00:00:00.0" >11-Oct-08
                </SELECT>

/*Javascript*/
function enableField(what)
{
  var relation={
    'type_pd':['pay_date'],
    'type_pc':['type_pc2'],
    'type_dr':['type_dr2','type_dr2e']
  }

  for (one in relation) for (two in relation[one]) document.getElementById(relation[one][two]).disabled=what.id!=one
}

Thanks,
Sherry
 
Upvote 0 Downvote
Hi

It is just the [tt]id[/tt] again... The function tries to refer to pay_date, but there is no element with such [tt]id[/tt]. Instead there are two with type_pd.
Code: 
/*First Select*/

<select name="pay_date" id="[red]pay_date[/red]" disabled="disabled">
<option value="03-Oct-08" >03-Oct-08
<option>
</select>

Feherke.
 
Upvote 0 Downvote
I changed the id on the first select but it still doesn't seem to want to work with the following javascript:

Code: 
function enableField(what)
{
  var relation={
    'type_pd':['pay_date'],
    'type_pc':['type_pc2'],
    'type_dr':['type_dr2','type_dr2e']
  }

  for (one in relation) for (two in relation[one]) document.getElementById(relation[one][two]).disabled=what.id!=one
}

Any ideas?

Thanks,
Sherry
 
Upvote 0 Downvote
Hi

I checked it again now, but only I had to make only that modification ( marked with red in my previous post ). Of course, still used the code you posted last time ( 17 Nov 08 10:13 ).

By the way, in your sample code I also closed the first [tt]select[/tt]'s second [tt]option[/tt] tag. That confused Explorer, but otherwise the JavaScript is functional.

Feherke.
 
Upvote 0 Downvote
I'm sorry but I'm really getting frustrated with this.

Code: 
Error: 
Line: 638
'document.getElementById[...]' is null or not an object.

Which corresponds to this line from 'view source':
for (one in relation) for (two in relation[one]) document.getElementById(relation[one][two]).disabled=what.id!=one

This is my entire code page:
Code: 
<cfparam name="attributes.sec_mgr" default="">
<cfparam name="attributes.rpttype" default="">
<cfparam name="attributes.pay_date" default="">
<cfparam name="attributes.PayCycle" default="">
<cfparam name="attributes.ppebegin" default="">
<cfparam name="attributes.ppeend" default="">

<cfoutput>
<table cellspacing="0" cellpadding="0" border="0">
	<tr>
		<td colspan="3"><form action="#application.self#?fuseaction=#xfa.submit#&TYPE=#trim(attributes.TYPE)#&report=#trim(attributes.REPORT)#" method="POST" name="REPORT"></td>
	</tr>
	<tr>
		<td class="formTitle" width="100" align="right">Department:</td>
		<td width="#variables.spacerWidth#"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
		<td valign="top" class="rowText" width="100">#session.DEPT_NAME#</td>	
	</tr>
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>
		<tr>
			<td class="formTitle" align="right">Section Manager:</td>
			<td width="#variables.spacerWidth#"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
			<td valign="top" class="rowText">
				<SELECT name="sec_mgr">
					<cfloop query="getSECTIONMANAGER">
						<option value="#getSECTIONMANAGER.EMPLOYEE_ID#" <cfif getSECTIONMANAGER.EMPLOYEE_ID EQ attributes.sec_mgr> SELECTED</cfif>>#getSECTIONMANAGER.FULLNAME#</option>
					</cfloop>
				</SELECT>	
			</td>
			<td width="#variables.spacerWidth#"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
			<td class="formTitle" align="right">
			</td>		
		</tr>	
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>			
		<tr>
			<td class="formTitle" align="right">Select By:</td>
			<td width="#variables.spacerWidth#"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
			<td valign="top" class="rowText">
				
			<input type="radio" name="rpttype" id="type_pd" value="PD" onClick="enableField(this)" rel="paydate">
				<label for="type_pd">Pay Date</label><br>
				
			<input type="radio" name="rpttype" id="type_pc" value="PC" onClick="enableField(this)" rel="paycycle">
				<label for="type_pc">Pay Cycle</label><br>
				
			<input type="radio" name="rpttype" id="type_dr" value="PR" onClick="enableField(this)" rel="daterange" >
				<label for="type_dr">Date Range</label><br>				

			</td>	
		</tr>
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>
	
		<TR>
			<td class="formTitle" align="right"><label for="pay_date"><span class="accessibility"></span>Pay Date:</label></td>
			<td width="#variables.spacerWidth#"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
			<td valign="top" class="rowText">
				<select name="pay_date" id="pay_date" disabled="disabled">
					<cfloop query="getDates">
						<option value="#DateFormat(getDates.PAYDATE)#" <cfif DateFormat(getDates.PAYDATE) EQ attributes.pay_date> SELECTED</cfif>>#DateFormat(getDates.PAYDATE)#</cfloop>
				</SELECT>
			</td>
		</TR>				
		
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>						
		<tr>
			<td class="formTitle" align="right"><label for="type_pc"><span class="accessibility"></span>Pay Cycle:</label></td>
			<td width="#variables.spacerWidth#"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
			<td valign="top" class="rowText">
				<select name="PayCycle" id="type_pc2" disabled="disabled">
					<cfloop query="getDates">
						<option value="#getDates.PERIOD#" <cfif getDates.PERIOD EQ attributes.PayCycle> SELECTED</cfif>>#getDates.PERIOD#</cfloop>
				</SELECT>
			</td>	
		</tr>
			
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>
							
		<tr>
			<td class="formTitle" align="right"><label for="type_dr"><span class="accessibility"></span>PPE Begin:</label></td>
			<td width="#variables.spacerWidth#"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
			<td valign="top" class="rowText">
				<SELECT name="PPEBEGIN" id="type_dr2" disabled="disabled">
					<cfloop query="getDates">
						<option value="#getDates.PPE_BEGIN#" <cfif getDates.PPE_BEGIN EQ attributes.PPEBEGIN> SELECTED</cfif>>#DateFormat(getDates.PPE_BEGIN)#</cfloop>
				</SELECT>
			</td>
			<td class="formTitle" align="right"><label for="type_dr"><span class="accessibility"></span>PPE End:</label></td>
			<td width="#variables.spacerWidth#"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
			<td valign="top" class="rowText">
				<SELECT name="PPEEND" id="type_dr2e" disabled="disabled">
					<cfloop query="getDates">
						<option value="#getDates.PPE#" <cfif getDates.PPE EQ attributes.PPEEND> SELECTED</cfif>>#DateFormat(getDates.PPE)#</cfloop>
				</SELECT>
			</td>					
		</tr>
				
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>
	<tr>
		<td colspan="3" bgcolor="#application.borderColor#"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>
	<tr>
		<td colspan="3" height="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
	</tr>
	<tr>
		<td colspan="3">
			<table cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td>
						<table width="50" cellpadding="0" cellspacing="0" border="0">
							<tr>
								<td height="20" align="center" onClick="javascript:history.go(-1);" title="Back A Page" class="formButton" onMouseOver="this.className='formButtonHover';" onMouseOut="this.className='formButton';" onmousedown="this.className='formButtonClick';" onmouseup="this.className='formButton';">Back</td>
							</tr>
						</table>
					</td>
					<td width="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
					<td>
						<table width="50" cellpadding="0" cellspacing="0" border="0">
							<tr>
								<td height="20" align="center" onClick="javascript:document.REPORT.reset();" title="Reset Form" class="formButton" onMouseOver="this.className='formButtonHover';" onMouseOut="this.className='formButton';" onmousedown="this.className='formButtonClick';" onmouseup="this.className='formButton';">Reset</td>
							</tr>
						</table>
					</td>
					<td width="5"><img src="#application.imgSrc#dot.gif" width="1" height="1" border="0"></td>
					<td>
						<table width="50" cellpadding="0" cellspacing="0" border="0">
							<tr>
								<td height="20" align="center" onClick="javascript:document.REPORT.submit();" title="Submit criteria for report processing" class="formButton" onMouseOver="this.className='formButtonHover';" onMouseOut="this.className='formButton';" onmousedown="this.className='formButtonClick';" onmouseup="this.className='formButton';">Submit</td>
							</tr>
						</table>
					</td>	
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td colspan="3"></form></td>
	</tr>
</table>
</cfoutput>

<script type="text/javascript">

function enableField(what)
{
  var relation={
    'type_pd':['pay_date'],
    'type_pc':['type_pc2'],
    'type_dr':['type_dr2','type_dr2e']
  }

for (one in relation) for (two in relation[one]) document.getElementById(relation[one][two]).disabled=what.id!=one
}

</script>

Thanks,
Sherry
 
Upvote 0 Downvote
Hi

Sorry, I know nothing about ColdFusion so I can not debug that code. The JavaScript part as appears there certainly works in Mozilla ( FireFox, SeaMonkey ), Opera, Konqueror, Safari, Chrome and Explorer.

Please check the generated page with an HTML validator ( for example W3C Markup Validation Service ) to ensure there is no more markup error like the one I mentioned in my previous post's last paragraph.

Feherke.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
294
Rayj0000
Rayj0000
BobMe23
What new features have appeared in the latest versions of Java?
Replies
1
Views
84
feherke
feherke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
375
xwb
xwb
dvannoy
  • Locked
  • Question
Enable ASP button
Replies
1
Views
102
feherke
feherke
TheLazyPig
  • Locked
  • Question
Disable radio button after edit button click
Replies
1
Views
111
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top