The behavior I need to control is that when the page initially loads the Label, TextBox, and RequiredFieldValidator need to be loaded but not visible or active until the user clicks the checkbox with the label text "Other". Checking this checkbox should turn on the Label, TextBox and RequiredFieldValidator and unchecking the checkbox should turn them off. There is also a 'continue' liink button further down the page that should allow the user to advance to the next page (which is really a user control that is loaded) ONLY IF the 'Other' checkbox is unchecked. If the 'Other' checkbox is checked, the RequiredFieldValidator will keep the user on the page until he/she enters something in the TextBox.
I have begun constructing a JavaScript (I'm new at JavaScript) to find the specific checkbox and add a onclick event. This is as far as I have gotten with the JavaScript:
<script language="javascript" type="text/javascript">
var CheckBoxList = document.getElementById("<%=QualifyingEvents.ClientID %>");
var CheckBox = CheckBoxList.getElementsByTagName("input");
for(var i = 0; i < CheckBox.length; i++) {
if(CheckBox[i].getAttribute("type") == "checkbox") {
var value = CheckBox[i].getElementsByTagName("label");
alert(value.innerText);
}
}
</script>
At the moment, my final alert comes back as 'undefined'. So I'm stuck. The reason I'm not using JQuery is because I don't hardly know JavaScript, and for now JQuery personally causes me more confusion because it is more cryptic to me. I'll learn JQuery
eventually, but at the moment it is more timely for me to just write a JavaScript.
first lets hide/disable your textboxes and rfv. you do not need to set visibility on your controls since we're wrapping them in a div and hiding it that way. on the checkboxlist checked function, we get all the items from the checkbox list, and iterate through
each to see if one is checked. if that happens, we up the count. then we check the count, and see if the div is visible or not (this will prevent showing and hiding the div each time one is checked), and determine whether or not to enable the rfv and show/hide
the div (your controls).
$(document).ready(function () {
$('#someDiv').hide(); // wrap your label,textbox, and rfv in a div
$('#<%=OtherEventRequiredFieldValidator.ClientID%>').attr('disabled','disabled');
// checkboxlist checked function
$('#<%=QualifyingEvents.ClientID%>').click( function () {
var items = $('#<%=QualifyingEvents.ClientID%> input:checkbox');
var count = 0;
for (var i = 0; i < items.length; i++) {
if (items[i].checked == true) {
count++;
}
}
// show the div and enable rfv if not already visible
if (count > 0 && $('#someDiv').not(':visible')) {
$('#someDiv').slideDown();
$('#<%=OtherEventRequiredFieldValidator.ClientID%>').removeAttr('disabled');
}
else {
$('#someDiv').hide();
$('#<%=OtherEventRequiredFieldValidator.ClientID%>').attr('disabled','disabled');
}
});
});
Please post your code for us to help!!
Mark Answered if it helps - Good luck!
Cheers!
Design And Align - Rob
It hides and shows the div for every checkbox, and the behavior I need is to hide and show the div
for only a specific checkbox in the CheckBoxList. In the case of this example, I only want the hide/show functionality if the checkbox labeled "Other" is checked or unchecked. I don't want anything to happen if any of the other checkboxes
are checked or unchecked, just the one called "Other".
ah my fault. didn't read your post correctly. try this:
$(document).ready(function () {
$('#someDiv').hide(); // wrap your label,textbox, and rfv in a div
$('#<%=OtherEventRequiredFieldValidator.ClientID%>').attr('disabled','disabled');
// checkboxlist checked function
$('#<%=QualifyingEvents.ClientID%>').click( function () {
var items = $('#<%=QualifyingEvents.ClientID%> input:checkbox');
for (var i = 0; i < items.length; i++) {
// check if value is "Other" and is checked and the div is not visible
if (items[i].value == "Other") {
if (items[i].checked == true && $('#someDiv').not(':visible')) {
$('#someDiv').slideDown();
$('#<%=OtherEventRequiredFieldValidator.ClientID%>').removeAttr('disabled');
}
else {
$('#someDiv').hide();
$('#<%=OtherEventRequiredFieldValidator.ClientID%>').attr('disabled','disabled');
}
}
}
});
});
Please post your code for us to help!!
Mark Answered if it helps - Good luck!
Cheers!
Design And Align - Rob
RandyHJ
Member
1 Points
25 Posts
Toggling Label, Textbox, and Required Field Validator based on specific CheckBoxList checkbox bei...
May 15, 2012 01:13 PM|LINK
I am a contractor working on an enrollment application.
The page loads a CheckBoxList programmatlcally that is defined like this:
and renders like this:
<span id="QualifyingEvents"> <input id="QualifyingEvents_0" type="checkbox" name="QualifyingEvents$0" /> <label for="QualifyingEvents_0">1</label><br /> <input id="QualifyingEvents_1" type="checkbox" name="QualifyingEvents$1" /> <label for="QualifyingEvents_1">2</label><br /> <input id="QualifyingEvents_2" type="checkbox" name="QualifyingEvents$2" /> <label for="QualifyingEvents_2">3</label><br /> <input id="QualifyingEvents_3" type="checkbox" name="QualifyingEvents$3" /> <label for="QualifyingEvents_3">4</label><br /> <input id="QualifyingEvents_4" type="checkbox" name="QualifyingEvents$4" /> <label for="QualifyingEvents_4">5</label><br /> <input id="QualifyingEvents_5" type="checkbox" name="QualifyingEvents$5" /> <label for="QualifyingEvents_5">6</label><br /> <input id="QualifyingEvents_6" type="checkbox" name="QualifyingEvents$6" /> <label for="QualifyingEvents_6">Other</label><br /> </span>The CheckBoxList is immediately followed by an asp:Label, asp:TextBox and RequiredFieldValidator that are defined thus:
The behavior I need to control is that when the page initially loads the Label, TextBox, and RequiredFieldValidator need to be loaded but not visible or active until the user clicks the checkbox with the label text "Other". Checking this checkbox should turn on the Label, TextBox and RequiredFieldValidator and unchecking the checkbox should turn them off. There is also a 'continue' liink button further down the page that should allow the user to advance to the next page (which is really a user control that is loaded) ONLY IF the 'Other' checkbox is unchecked. If the 'Other' checkbox is checked, the RequiredFieldValidator will keep the user on the page until he/she enters something in the TextBox.
I have begun constructing a JavaScript (I'm new at JavaScript) to find the specific checkbox and add a onclick event. This is as far as I have gotten with the JavaScript:
<script language="javascript" type="text/javascript"> var CheckBoxList = document.getElementById("<%=QualifyingEvents.ClientID %>"); var CheckBox = CheckBoxList.getElementsByTagName("input"); for(var i = 0; i < CheckBox.length; i++) { if(CheckBox[i].getAttribute("type") == "checkbox") { var value = CheckBox[i].getElementsByTagName("label"); alert(value.innerText); } } </script>At the moment, my final alert comes back as 'undefined'. So I'm stuck. The reason I'm not using JQuery is because I don't hardly know JavaScript, and for now JQuery personally causes me more confusion because it is more cryptic to me. I'll learn JQuery eventually, but at the moment it is more timely for me to just write a JavaScript.
robwscott
Star
8079 Points
1491 Posts
Re: Toggling Label, Textbox, and Required Field Validator based on specific CheckBoxList checkbox...
May 15, 2012 01:32 PM|LINK
first lets hide/disable your textboxes and rfv. you do not need to set visibility on your controls since we're wrapping them in a div and hiding it that way. on the checkboxlist checked function, we get all the items from the checkbox list, and iterate through each to see if one is checked. if that happens, we up the count. then we check the count, and see if the div is visible or not (this will prevent showing and hiding the div each time one is checked), and determine whether or not to enable the rfv and show/hide the div (your controls).
$(document).ready(function () { $('#someDiv').hide(); // wrap your label,textbox, and rfv in a div $('#<%=OtherEventRequiredFieldValidator.ClientID%>').attr('disabled','disabled'); // checkboxlist checked function $('#<%=QualifyingEvents.ClientID%>').click( function () { var items = $('#<%=QualifyingEvents.ClientID%> input:checkbox'); var count = 0; for (var i = 0; i < items.length; i++) { if (items[i].checked == true) { count++; } } // show the div and enable rfv if not already visible if (count > 0 && $('#someDiv').not(':visible')) { $('#someDiv').slideDown(); $('#<%=OtherEventRequiredFieldValidator.ClientID%>').removeAttr('disabled'); } else { $('#someDiv').hide(); $('#<%=OtherEventRequiredFieldValidator.ClientID%>').attr('disabled','disabled'); } }); });Mark Answered if it helps - Good luck!
Cheers!
Design And Align
- Rob
RandyHJ
Member
1 Points
25 Posts
Re: Toggling Label, Textbox, and Required Field Validator based on specific CheckBoxList checkbox...
May 15, 2012 04:01 PM|LINK
Rob,
Thank you for taking the time to answer this.
Your code works great except for one thing:
It hides and shows the div for every checkbox, and the behavior I need is to hide and show the div for only a specific checkbox in the CheckBoxList. In the case of this example, I only want the hide/show functionality if the checkbox labeled "Other" is checked or unchecked. I don't want anything to happen if any of the other checkboxes are checked or unchecked, just the one called "Other".
Thanks again,
Randy
robwscott
Star
8079 Points
1491 Posts
Re: Toggling Label, Textbox, and Required Field Validator based on specific CheckBoxList checkbox...
May 15, 2012 04:50 PM|LINK
ah my fault. didn't read your post correctly. try this:
$(document).ready(function () { $('#someDiv').hide(); // wrap your label,textbox, and rfv in a div $('#<%=OtherEventRequiredFieldValidator.ClientID%>').attr('disabled','disabled'); // checkboxlist checked function $('#<%=QualifyingEvents.ClientID%>').click( function () { var items = $('#<%=QualifyingEvents.ClientID%> input:checkbox'); for (var i = 0; i < items.length; i++) { // check if value is "Other" and is checked and the div is not visible if (items[i].value == "Other") { if (items[i].checked == true && $('#someDiv').not(':visible')) { $('#someDiv').slideDown(); $('#<%=OtherEventRequiredFieldValidator.ClientID%>').removeAttr('disabled'); } else { $('#someDiv').hide(); $('#<%=OtherEventRequiredFieldValidator.ClientID%>').attr('disabled','disabled'); } } } }); });Mark Answered if it helps - Good luck!
Cheers!
Design And Align
- Rob
robwscott
Star
8079 Points
1491 Posts
Re: Toggling Label, Textbox, and Required Field Validator based on specific CheckBoxList checkbox...
May 15, 2012 04:56 PM|LINK
or perhaps since we're only checking one.... i don't know if this will work since it's a checkboxlist but it's rendering like you have (6) checkboxes.
<span id="QualifyingEvents"> <input id="QualifyingEvents_0" type="checkbox" name="QualifyingEvents$0" /> <label for="QualifyingEvents_0">1</label><br /> <input id="QualifyingEvents_1" type="checkbox" name="QualifyingEvents$1" /> <label for="QualifyingEvents_1">2</label><br /> <input id="QualifyingEvents_2" type="checkbox" name="QualifyingEvents$2" /> <label for="QualifyingEvents_2">3</label><br /> <input id="QualifyingEvents_3" type="checkbox" name="QualifyingEvents$3" /> <label for="QualifyingEvents_3">4</label><br /> <input id="QualifyingEvents_4" type="checkbox" name="QualifyingEvents$4" /> <label for="QualifyingEvents_4">5</label><br /> <input id="QualifyingEvents_5" type="checkbox" name="QualifyingEvents$5" /> <label for="QualifyingEvents_5">6</label><br /> <input id="QualifyingEvents_6" type="checkbox" name="QualifyingEvents$6" /> <label for="QualifyingEvents_6">Other</label><br /> </span>$(document).ready(function () { $('#someDiv').hide(); var $rfv = $('#<%=OtherEventRequiredFieldValidator.ClientID%>'); $rfv.attr('disabled','disabled'); // get checkbox ending in "$6" $('input[name$="$6"]').click( function () { if ($(this).is(':checked')) { $('#someDiv').show(); $rfv.removeAttr('disabled'); } else { $('#someDiv').hide(); $rfv.attr('disabled','disabled'); } }); });Mark Answered if it helps - Good luck!
Cheers!
Design And Align
- Rob