[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 247
  • Last Modified:

JavaScript function test whether a control is a RadioButtonList or a TextBox

The JavaScript Function below is called on the "onclick" event of any <asp:RadioButtonList> that should programatically change the selection of other RBLs and disable the third option (N/A).

The Array on line #6 are the IDs of the controls where the onclick calls the function.
The "associative" arrays on lines #7, #8 and #9 list the controls that each in #6 should affect.
The rest of the function tells it to check the appropriate option and disable the "N/A", or third option of the Y/N/NA radio buttons.

My problem:  Several fields that need to be disabled are TextBoxes for dates and other text info.

How can I modify the middle (for(var j=0;j<3...) to check if a control listed in the array is a RadioButtonList and do what's there now and if it's a TextBox, then just disable it and maybe clear the contents, too since the date fields don't like random text.

[Edit] If it helps, all RadioButtonLists' IDs start with "rad" and all TextBoxes' IDs start with "txt".
Thanks.

//  http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26964970.html#a35432115 **//
function SetFollowingQuestionsNA(QuestionID) {
  var rad = QuestionID;
  var rbs = ['_0', '_1', '_2'];
  var assoc = [];
  assoc["tq"] = ['radWasFileTransfered', 'radIRPSigned', 'radWithin2YearTransitional'];  // #4, #14, #64 
  assoc["tq"]['radWasFileTransfered'] = ['radTransferIntExt', 'radTransferFileChecklistInFile', 'radExtTransferForm', 'radExtRequestForm', 'radExtTransferFileChecklist', 'radMandatoryOver30Days', 'radGrievanceFormSigned', 'radScreeningToolOffered', 'radScreeningToolCorrect'];
  assoc["tq"]['radIRPSigned'] = ['radGoalsIdentified', 'radActivitiesIdentified', 'radHoursIdentified', 'radActivitiesIncludeAnticipated', 'radServicesPrivided', 'radBarriersIdentified']; // 15, 16, 17, 18, 19, 20 
  assoc["tq"]['radWithin2YearTransitional'] = ['radCustomerEligible', 'radCustomerUnder200Level', 'txtMostRecentTransService'];
  var rbl_0 = document.getElementById(rad + '_0');  //  "Yes" 
  for (var i = 0; i < assoc["tq"][rad].length; i++) { 
  	for(var j=0;j<3;j++) {
  		document.getElementById(assoc["tq"][rad][i] + rbs[j]).checked = !rbl_0.checked;
  	}
  	document.getElementById(assoc["tq"][rad][i] + rbs[2]).disabled = rbl_0.checked;
  } 
}

Open in new window

0
megnin
Asked:
megnin
  • 18
  • 7
3 Solutions
 
cb1393Commented:
How about this?


for(var j=0;j<3;j++) {
		var curCtrl = document.getElementById(assoc["tq"][rad][i] + rbs[j])
		if(curCtrl.type=='text'){
			curCtrl.value = ""
			curCtrl.disabled = true
		} else {
	  		curCtrl = !rbl_0.checked;
		}
  	}

Open in new window

0
 
cb1393Commented:
Apologies- should be:

curCtrl.checked = !rbl_0.checked;
0
 
megninAuthor Commented:
That looks like just what I'm looking for, but I get "Object required" referencing this line:
if (curCtrl.type == 'text')
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
megninAuthor Commented:
In Firefox it said CurCtrl is NULL
0
 
megninAuthor Commented:
did I put it in the right place?  Here's the whole thing again with your code:
function SetFollowingQuestionsNA(QuestionID)
		{
			var rad = QuestionID;
			var rbs = ['_0', '_1', '_2'];
			var assoc = [];
			assoc["tq"] = ['radWasFileTransfered', 'radIRPSigned', 'radWithin2YearTransitional'];  // #4, #14, #64 
			assoc["tq"]['radWasFileTransfered'] = ['radTransferIntExt', 'radTransferFileChecklistInFile', 'radExtTransferForm', 'radExtRequestForm', 'radExtTransferFileChecklist', 'radMandatoryOver30Days', 'radGrievanceFormSigned', 'radScreeningToolOffered', 'radScreeningToolCorrect'];
			assoc["tq"]['radIRPSigned'] = ['radGoalsIdentified', 'radActivitiesIdentified', 'radHoursIdentified', 'radActivitiesIncludeAnticipated', 'radServicesPrivided', 'radBarriersIdentified']; // 15, 16, 17, 18, 19, 20 
			assoc["tq"]['radWithin2YearTransitional'] = ['radCustomerEligible', 'radCustomerUnder200Level', 'txtMostRecentTransService'];
			var rbl_0 = document.getElementById(rad + '_0');  //  "Yes" 
			for (var i = 0; i < assoc["tq"][rad].length; i++)
			{
				for (var j = 0; j < 3; j++)
				{
					var curCtrl = document.getElementById(assoc["tq"][rad][i] + rbs[j])
					if (curCtrl.type == 'text')
					{
						curCtrl.value = ""
						curCtrl.disabled = true
					} else
					{
						curCtrl.checked = !rbl_0.checked; 
					}
				}
				document.getElementById(assoc["tq"][rad][i] + rbs[2]).disabled = rbl_0.checked;
			}
		}

Open in new window

0
 
cb1393Commented:
Does FF refer to CurCtrl or curCtrl?
0
 
megninAuthor Commented:
curCtrl.  Sorry I just capitalized the first letter out of habbit.
0
 
megninAuthor Commented:
I removed the one textbox in the list just to see how it would handle an array that did not contain a textbox and that worked without error.  
The same error returned when I put a different textbox back in the list.
0
 
cb1393Commented:
Try this...


function SetFollowingQuestionsNA(QuestionID) {
	var rad = QuestionID;
	var rbs = ['_0', '_1', '_2'];
	var assoc = [];
	assoc["tq"] = ['radWasFileTransfered', 'radIRPSigned', 'radWithin2YearTransitional'];  // #4, #14, #64 
	assoc["tq"]['radWasFileTransfered'] = ['radTransferIntExt', 'radTransferFileChecklistInFile', 'radExtTransferForm', 'radExtRequestForm', 'radExtTransferFileChecklist', 'radMandatoryOver30Days', 'radGrievanceFormSigned', 'radScreeningToolOffered', 'radScreeningToolCorrect'];
	assoc["tq"]['radIRPSigned'] = ['radGoalsIdentified', 'radActivitiesIdentified', 'radHoursIdentified', 'radActivitiesIncludeAnticipated', 'radServicesPrivided', 'radBarriersIdentified']; // 15, 16, 17, 18, 19, 20 
	assoc["tq"]['radWithin2YearTransitional'] = ['radCustomerEligible', 'radCustomerUnder200Level', 'txtMostRecentTransService'];
	var rbl_0 = document.getElementById(rad + '_0');  //  "Yes" 
	for (var i = 0; i < assoc["tq"][rad].length; i++) {
		for (var j = 0; j < 3; j++) {
			var curCtrl = document.getElementById(assoc["tq"][rad][i] + rbs[j])
			if (curCtrl){
				if (curCtrl.type == 'text') {
					curCtrl.value = ""
					curCtrl.disabled = true
				} else {
					curCtrl.checked = !rbl_0.checked; 
				}
			}
		}
		document.getElementById(assoc["tq"][rad][i] + rbs[2]).disabled = rbl_0.checked;
	}
}

Open in new window

0
 
megninAuthor Commented:
Oh, I think I see the problem (though I don't know how to fix it)...

In:  var curCtrl = document.getElementById(assoc["tq"][rad][ i ] + rbs[j])  

 ["tq"][rad][ i ] + rbs[j] = the radio button option ['_0', '_1', '_2']

so to reference a TextBox it needs to not have "+rbs[j]".
0
 
megninAuthor Commented:
Yeah, now FF says:
document.getElementById(assoc.tq[ rad ][ i ] + rbs[ 2 ]) is null
0
 
megninAuthor Commented:
how about this?

if (curCtrl)
{
 curCrtl.checked = !rbl_0.checked;
} else {
document.getElementById(assoc["tq"][rad][ i ]).value = ""
document.getElementById(assoc["tq"][rad][ i ]).disabled = true
0
 
megninAuthor Commented:
Well, maybe not.  With three textboxes in the array, the first one is disabled and I still get the error.
Even if there is only one textbox in the array, it's disables (good) but I still get the error
document.getElementById(assoc.tq[ rad ][ i ] + rbs[ 2 ]) is null
0
 
cb1393Commented:
Can you provide an example of the actual full name of one of the text boxes?
0
 
megninAuthor Commented:
I know there's still something wrong with this because the three textboxes are always disabled, but I don't get an error.  A yes or now selection disables the TextBoxes and they stay disabled regardless of any other selections.
function SetFollowingQuestionsNA(QuestionID)
		{
			var rad = QuestionID;
			var rbs = ['_0', '_1', '_2'];
			var assoc = [];
			assoc["tq"] = ['radWasFileTransfered', 'radIRPSigned', 'radWithin2YearTransitional'];  // #4, #14, #64   
			assoc["tq"]['radWasFileTransfered'] = ['radTransferIntExt', 'radTransferFileChecklistInFile', 'radExtTransferForm', 'radExtRequestForm', 'radExtTransferFileChecklist', 'radMandatoryOver30Days', 'radGrievanceFormSigned', 'radScreeningToolOffered', 'radScreeningToolCorrect'];
			assoc["tq"]['radIRPSigned'] = ['radGoalsIdentified', 'radActivitiesIdentified', 'radHoursIdentified', 'radActivitiesIncludeAnticipated', 'radServicesPrivided', 'radBarriersIdentified']; // 15, 16, 17, 18, 19, 20   
			assoc["tq"]['radWithin2YearTransitional'] = ['radCustomerEligible', 'radCustomerUnder200Level', 'txtMostRecentTransService', 'txtActualStartDate', 'txtActualEndDate'];
			var rbl_0 = document.getElementById(rad + '_0');  //  "Yes"   
			for (var i = 0; i < assoc["tq"][rad].length; i++)
			{
				for (var j = 0; j < 3; j++)
				{
					var curCtrl = document.getElementById(assoc["tq"][rad][i])
						if (curCtrl.type == 'text')
						{
							curCtrl.value = ""
							curCtrl.disabled = true
						} else
						{
							(curCtrl  + rbs[j]).checked = !rbl_0.checked;
						}
				}
					var curCtrl = document.getElementById(assoc["tq"][rad][i])
						if (curCtrl.type == 'text')
						{
							// Nothing to do
						} else
						{
							(curCtrl + rbs[j]).disabled = rbl_0.checked;
						}
			}
		}

Open in new window

0
 
megninAuthor Commented:
Arrg.  Well and with my experiment above the radiobuttons don't get disabled like they are supposed to either.  Maybe I should let you do it and I'll stop "muddying the water"  ;-}
0
 
megninAuthor Commented:
Is this what you need?  
assoc["tq"]['radWithin2YearTransitional'] = ['radCustomerEligible', 'radCustomerUnder200Level', 'txtMostRecentTransService', 'txtActualStartDate', 'txtActualEndDate'];

<asp:TextBox ID="txtActualStartDate" runat="server" Width="110px" TabIndex="886" MaxLength="20" ToolTip="Actual Start Date" />

Open in new window

0
 
cb1393Commented:
It would be very helpful to see the markup (source) for the entire page. If that's not do-able, just the markup for the text box should be sufficient.
0
 
megninAuthor Commented:
The entire page is 2257 lines, but here are all the controls involved with the function
<tr>
				<td>
64.
					<asp:RadioButtonList ID="radWithin2YearTransitional" runat="server" RepeatDirection="Horizontal"
										 RepeatLayout="Flow" TabIndex="872" onclick="SetFollowingQuestionsNA(this.id); DisableDatesIfQuestion64IsNo(); DisableValidation();">
						<asp:ListItem>Y</asp:ListItem>
						<asp:ListItem>N</asp:ListItem>
						<asp:ListItem>N/A</asp:ListItem>
					</asp:RadioButtonList>
					<asp:RequiredFieldValidator ID="valWithin2YearTransitional" runat="server" ControlToValidate="radWithin2YearTransitional"
						ErrorMessage="Answer on #64 is Required">* 
					</asp:RequiredFieldValidator>
				</td>
				<td>
					Is the customer still within their 2 year transitional period? <!-- For NO or N/A set 65, 66, 67 and 68 to N/A and disable. -->
				</td>
			</tr>

			<tr>
				<td>
65.
					<asp:RadioButtonList ID="radCustomerEligible" runat="server" RepeatDirection="Horizontal"
										 RepeatLayout="Flow" TabIndex="880" CssClass="Finding" onclick="HighlightFinding(this.id);">
						<asp:ListItem>Y</asp:ListItem>
						<asp:ListItem>N</asp:ListItem>
						<asp:ListItem>N/A</asp:ListItem>
					</asp:RadioButtonList>
					<asp:RequiredFieldValidator ID="valCustomerEligible" runat="server" ControlToValidate="radCustomerEligible"
						ErrorMessage="Answer on #65 is Required">* 
					</asp:RequiredFieldValidator>
				</td>
				<td>
					If yes to 
					#64, was the customer eligible for the transitional services received?&nbsp;
				</td>
			</tr>

			<tr>
				<td>
66.
					<asp:RadioButtonList ID="radCustomerUnder200Level" runat="server" RepeatDirection="Horizontal"
										 RepeatLayout="Flow" TabIndex="882" CssClass="Finding" onclick="HighlightFinding(this.id);">
						<asp:ListItem>Y</asp:ListItem>
						<asp:ListItem>N</asp:ListItem>
						<asp:ListItem>N/A</asp:ListItem>
					</asp:RadioButtonList>
					<asp:RequiredFieldValidator ID="valCustomerUnder200Level" runat="server" ControlToValidate="radCustomerUnder200Level"
						ErrorMessage="Answer on #66 is Required">* 
					</asp:RequiredFieldValidator>
				</td>
				<td>
					Is the customer under the 200% federal poverty level?
				</td>
			</tr>

			<tr class="NewQuestion">
				<td>
67.
					<asp:TextBox ID="txtMostRecentTransService" runat="server" Width="110px" TabIndex="884" MaxLength="20" 
																ToolTip="Most Recent Transitional Service" />
				</td>
				<td>
					Enter the most recent transitional service/activity/training with an actual start date during the review period. (x=not applicable)
				</td>
			</tr>
			<tr class="NewQuestion">
				<td colspan="2">
68.					Enter the Actual Start Date 
						<asp:TextBox ID="txtActualStartDate" runat="server" Width="110px" TabIndex="886" MaxLength="20" ToolTip="Actual Start Date" /> &nbsp;
					and End Date 
						<asp:TextBox ID="txtActualEndDate" runat="server" Width="110px" TabIndex="887" MaxLength="20" ToolTip="Actual End Date" /> &nbsp;
					of the most recent transitional service. (x=not applicable)
				</td>
			</tr>

Open in new window

0
 
cb1393Commented:
Sorry, I'm looking for the source code- view the page in your browser and click View Source (or the equivalent in FF)
0
 
megninAuthor Commented:
Oh, sorry.  You said source code right there and I missed it.
Here's the source code from IE 8.  Same block as above.
<tr>
				<td>
64.
					<span id="radWithin2YearTransitional" onclick="SetFollowingQuestionsNA(this.id); DisableDatesIfQuestion64IsNo(); DisableValidation();"><input id="radWithin2YearTransitional_0" type="radio" name="radWithin2YearTransitional" value="Y" tabindex="872" /><label for="radWithin2YearTransitional_0">Y</label><input id="radWithin2YearTransitional_1" type="radio" name="radWithin2YearTransitional" value="N" tabindex="872" /><label for="radWithin2YearTransitional_1">N</label><input id="radWithin2YearTransitional_2" type="radio" name="radWithin2YearTransitional" value="N/A" tabindex="872" /><label for="radWithin2YearTransitional_2">N/A</label></span>
					<span id="valWithin2YearTransitional" style="color:Red;visibility:hidden;">* 
					</span>
				</td>
				<td>
					Is the customer still within their 2 year transitional period? <!-- For NO or N/A set 65, 66, 67 and 68 to N/A and disable. -->
				</td>
			</tr>

			<tr>
				<td>
65.
					<span id="radCustomerEligible" class="Finding" onclick="HighlightFinding(this.id);"><input id="radCustomerEligible_0" type="radio" name="radCustomerEligible" value="Y" tabindex="880" /><label for="radCustomerEligible_0">Y</label><input id="radCustomerEligible_1" type="radio" name="radCustomerEligible" value="N" tabindex="880" /><label for="radCustomerEligible_1">N</label><input id="radCustomerEligible_2" type="radio" name="radCustomerEligible" value="N/A" tabindex="880" /><label for="radCustomerEligible_2">N/A</label></span>
					<span id="valCustomerEligible" style="color:Red;visibility:hidden;">* 
					</span>
				</td>
				<td>
					If yes to 
					#64, was the customer eligible for the transitional services received?&nbsp;
				</td>
			</tr>

			<tr>
				<td>
66.
					<span id="radCustomerUnder200Level" class="Finding" onclick="HighlightFinding(this.id);"><input id="radCustomerUnder200Level_0" type="radio" name="radCustomerUnder200Level" value="Y" tabindex="882" /><label for="radCustomerUnder200Level_0">Y</label><input id="radCustomerUnder200Level_1" type="radio" name="radCustomerUnder200Level" value="N" tabindex="882" /><label for="radCustomerUnder200Level_1">N</label><input id="radCustomerUnder200Level_2" type="radio" name="radCustomerUnder200Level" value="N/A" tabindex="882" /><label for="radCustomerUnder200Level_2">N/A</label></span>
					<span id="valCustomerUnder200Level" style="color:Red;visibility:hidden;">* 
					</span>
				</td>
				<td>
					Is the customer under the 200% federal poverty level?
				</td>
			</tr>

			<tr class="NewQuestion">
				<td>
67.
					<input name="txtMostRecentTransService" type="text" maxlength="20" id="txtMostRecentTransService" tabindex="884" title="Most Recent Transitional Service" style="width:110px;" />
				</td>
				<td>
					Enter the most recent transitional service/activity/training with an actual start date during the review period. (x=not applicable)
				</td>
			</tr>
			<tr class="NewQuestion">
				<td colspan="2">
68.					Enter the Actual Start Date 
						<input name="txtActualStartDate" type="text" maxlength="20" id="txtActualStartDate" tabindex="886" title="Actual Start Date" style="width:110px;" /> &nbsp;
					and End Date 
						<input name="txtActualEndDate" type="text" maxlength="20" id="txtActualEndDate" tabindex="887" title="Actual End Date" style="width:110px;" /> &nbsp;
					of the most recent transitional service. (x=not applicable)
				</td>
			</tr>

Open in new window

0
 
megninAuthor Commented:
Okay, with the above source code...
I tried to modify your function in order to make it disable validation controls instead of changing radiobutton selections.
Modified function for disabling validation controls (I have both functions in a .js file)...
	function DisableValidation(QuestionID)
		{
			var rad = QuestionID;
			var rbs = ['_0', '_1', '_2'];
			var assoc = [];
			assoc["tq"] = ['radMandatory'];  // #1,   //  List Question RadioButtonList IDs in this array.
			assoc["tq"]['radMandatory'] = ['valDateNewCase', 'txtDateNewCase'];  // For each question, list the controls it should affect in an array.
			assoc["tq"]['radWithin2YearTransitional'] = ['radWithin2YearTransitional', 'radCustomerEligible', 'radCustomerUnder200Level'];
			var rbl_0 = document.getElementById(rad + '_0');  //  "Yes"
			for (var i = 0; i < assoc["tq"][rad].length; i++)
			{
				document.getElementById(assoc["tq"][rad][i]).disabled = !rbl_0.checked;
				document.getElementById(assoc["tq"][rad][i]).value = "";
			}
		}

Open in new window

Firefox points to this line, line 10 above,
for (var i = 0; i < assoc["tq"][rad].length; i++)
and says, "assoc.tq[rad] is undefined"

And, this is strange, in IE no validation controls fire.  
I click submit on an empty form and it submits an empty form right to the database. :-(  But, the validation controls work fine in Firefox.

This is the only question Firefox complains about.  
<tr>
<td>
64.
	<asp:RadioButtonList ID="radWithin2YearTransitional" runat="server" RepeatDirection="Horizontal"
						 RepeatLayout="Flow" TabIndex="872" onclick="SetFollowingQuestionsNA(this.id); DisableDatesIfQuestion64IsNo(); DisableValidation();">
		<asp:ListItem>Y</asp:ListItem>
		<asp:ListItem>N</asp:ListItem>
		<asp:ListItem>N/A</asp:ListItem>
	</asp:RadioButtonList>
	<asp:RequiredFieldValidator ID="valWithin2YearTransitional" runat="server" ControlToValidate="radWithin2YearTransitional"
		ErrorMessage="Answer on #64 is Required">* 
	</asp:RequiredFieldValidator>
</td>
<td>
	Is the customer still within their 2 year transitional period? <!-- For NO or N/A set 65, 66, 67 and 68 to N/A and disable. -->
</td>
</tr>

Open in new window

Source:
<tr>
	<td>
64.
		<span id="radWithin2YearTransitional" onclick="SetFollowingQuestionsNA(this.id); DisableDatesIfQuestion64IsNo(); DisableValidation();">
		<input id="radWithin2YearTransitional_0" type="radio" name="radWithin2YearTransitional" value="Y" tabindex="872" />
			<label for="radWithin2YearTransitional_0">Y</label>
		<input id="radWithin2YearTransitional_1" type="radio" name="radWithin2YearTransitional" value="N" tabindex="872" />
			<label for="radWithin2YearTransitional_1">N</label>
		<input id="radWithin2YearTransitional_2" type="radio" name="radWithin2YearTransitional" value="N/A" tabindex="872" />
			<label for="radWithin2YearTransitional_2">N/A</label></span>
		<span id="valWithin2YearTransitional" style="color:Red;visibility:hidden;">*</span>
	</td>
	<td>
		Is the customer still within their 2 year transitional period? <!-- For NO or N/A set 65, 66, 67 and 68 to N/A and disable. -->
	</td>
</tr>

Open in new window

0
 
megninAuthor Commented:
You know, I don't need to disable validation on questions 65 and 66, I'm setting their value automatically with your original function.
0
 
megninAuthor Commented:
I removed the function call from question #64, but validation is still not firing in IE, it is still firing in Firefox.  I also noticed that I had forgotting to put (this.id) in the onclick function call for question #64.  That doesn't matter now since I've taken it out.  The validation is still a mistery.
0
 
megninAuthor Commented:
Thank you very much.  Your solution is good.  I've found that where you put JavaScript and what order you put different JavaScript and/or jQuery functions can affect how and if they work the way you expect.  For example, if I try to disable or make any modification to a control, like a TextBox, but put the JavaScript in such a place that it fires before the page has rendered the TextBox I get an error, but moving the script to the end of the page or using documentReady fixes the problem.  :-)  Thanks again.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 18
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now