I'm trying to work this form so when the first radio button is selected, run a certain validation. When the second radio button is selected, run a different validation, etc. Currently using Alerts to check the functionality, but whichever radio button I choose I do not receive any feedback.
javascript function
<script type="text/javascript">
function validateDays() {
if (document.form1.radio1[0].checked == true) {
alert("You have selected Option 1");
}
else if (document.form1.radio1[1].checked == true) {
alert("You have selected Option 2");
}
else if (document.form1.radio1[2].checked == true) {
alert("You have selected Option 3");
}
else {
// DO NOTHING
}
}
}
</script>
html input code
<input name="radio1" type="radio" value="option1" id="option1" onClick="validateDays();">
<input name="radio1" type="radio" value="option2" id="option2" onClick="validateDays();">
<input name="radio1" type="radio" value="option3" id="option3" onClick="validateDays();">
How do I get a different alert depending on which radio button is checked?
Eventually, each radio button will limit the number of checkboxes further down the form the user is able to select - which is why I cannot work this validation purely in to the onClick()
MORE FULL CODE - ON REQUEST
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery('#3daypass').click(function mattcode() {
jQuery('#other_2 , #other_3 , #other_4').prop('checked', true);
});
jQuery('#2daypass , #1daypass').click(function mattcode() {
jQuery('#other_2 , #other_3 , #other_4').prop('checked', false);
});
});
</script>
<script type="text/javascript">
function validateDays() {
if (document.getElementById('3daypass').checked) {
alert("You have selected Option 1");
}
else if (document.getElementById('2daypass').checked) {
alert("You have selected Option 2");
}
else if (document.getElementById('1daypass').checked) {
alert("You have selected Option 3");
}
else {
// DO NOTHING
}
}
}
</script>
<tr>
<td colspan="5" align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="65%" valign="top"><table width="100%" height="100%" border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td height="18" colspan="2" align="left" bgcolor="#000000"><span class="boxheader"><strong> Conference Pass</strong></span> <span class="bodycopyWhite"> - (Please select a day pass below)</span></td>
</tr>
<tr valign="middle">
<td colspan="2" align="left" bgcolor="#EBEBEB"><img src="spacer.gif" width="1" height="3"></td>
</tr>
<tr bgcolor="#EBEBEB">
<td align="center" valign="top" bgcolor="#EBEBEB"><table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="7%"><input name="other_1" type="radio" value="3daypass" id="3daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
<td width="93%" class="bodyNormal"><strong>Three-day</strong> open delegate pass</td>
</tr>
<tr>
<td><input name="other_1" type="radio" value="2daypass" id="2daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
<td class="bodyNormal"><strong>Two-day</strong> open delegate pass</td>
</tr>
<tr>
<td><input name="other_1" type="radio" value="1daypass" id="1daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
<td class="bodyNormal"><strong>One-day</strong> open delegate pass</td>
</tr>
</table></td>
</tr>
<tr valign="middle">
<td colspan="2" align="left" bgcolor="#EBEBEB"><img src="spacer.gif" width="1" height="3"></td>
</tr>
</table>
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td height="20" colspan="2" bgcolor="#000000" class="boxheader"><strong> Please select the days you will be attending</strong></td>
</tr>
<tr>
<td width="9%" bgcolor="#EBEBEB"><input name="other_2" type="checkbox" id="other_2" value="Tues 5 Feb"></td>
<td width="91%" bgcolor="#EBEBEB" class="bodycopy">Tuesday 5 February 2013 </td>
</tr>
<tr>
<td bgcolor="#EBEBEB"><input name="other_3" type="checkbox" id="other_3" value="Wed 6 Feb"></td>
<td bgcolor="#EBEBEB" class="bodycopy">Wednesday 6 February 2013 </td>
</tr>
<tr>
<td bgcolor="#EBEBEB"><input name="other_4" type="checkbox" id="other_4" value="Thurs 7 Feb"></td>
<td bgcolor="#EBEBEB" class="bodycopy">Thursday 7 February 2013 </td>
</tr>
Apologies for the messy code - This was written in 2005 by someone else (with an apparent phobia of CSS) - see what I have to work with?!
function validateDays() {
if (document.getElementById("option1").checked == true) {
alert("You have selected Option 1");
}
else if (document.getElementById("option2").checked == true) {
alert("You have selected Option 2");
}
else if (document.getElementById("option3").checked == true) {
alert("You have selected Option 3");
}
else {
// DO NOTHING
}
}
You need to use == or === for comparison. = assigns a new value.
Besides that, using == is pointless when dealing with booleans only. Just use if(foo) instead of if(foo == true).
You must use the equals operator not the assignment like
if(document.form1.radio1[0].checked == true) {
alert("You have selected Option 1");
}
Full validation example with javascript:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Radio button: full validation example with javascript</title>
<script>
function send() {
var genders = document.getElementsByName("gender");
if (genders[0].checked == true) {
alert("Your gender is male");
} else if (genders[1].checked == true) {
alert("Your gender is female");
} else {
// no checked
var msg = '<span style="color:red;">You must select your gender!</span><br /><br />';
document.getElementById('msg').innerHTML = msg;
return false;
}
return true;
}
function reset_msg() {
document.getElementById('msg').innerHTML = '';
}
</script>
</head>
<body>
<form action="" method="POST">
<label>Gender:</label>
<br />
<input type="radio" name="gender" value="m" onclick="reset_msg();" />Male
<br />
<input type="radio" name="gender" value="f" onclick="reset_msg();" />Female
<br />
<div id="msg"></div>
<input type="submit" value="send>>" onclick="return send();" />
</form>
</body>
</html>
Regards,
Fernando
Related
Hi I am developing wordpress website using php, I want to do 4 steps for single php file.If the condition is satisfied it will go to the next page.
function checketudesandformations() {
var x = document.getElementById("myTable").rows.length;
if (x < 3) {
alert("Please Select atleast 2 documents'");
document.location.reload(true);
return false;
} else {
//return true;
}
If above the conditions is satisfied then only below the jquery want fire but i am getting button fire the condition is not satisfied. So please help me any one
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#suivantsteps2").click(function(e) {
e.preventDefault();
jQuery("#candidaturetabform2").css("display", "none");
jQuery("#candidaturetabform3").css("page-break-before", "always");
jQuery("#candidaturetabform3").css("display", "block");
jQuery("#step03").addClass("active")
jQuery("#step02").removeClass("active")
return false;
});
});
</script>
Below my HTML code
<form name="etudesandformations" id="etudesandformations" method="post"
enctype="multipart/form-data" action="#" style="margin-top: 40px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<tr>
<td>
<input name="inesv6" type="hidden" value="">
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="50%" align="right">
<input class="saisie1 input" name="precedent" id="precedent" type="submit" value="Précédent" onClick="" tabindex="5">
</td>
<td align="left">
<input class="saisie1 input" name="suivantsteps" id="suivantsteps2" type="submit" value="Suivant" onClick="checketudesandformations()" tabindex="4">
</td>
</tr>
</td>
</tr>
</table>
I did not understand question properly, but u need to rectify your code first. Use single event handler for onclick event as below. If you need more help please create atleast minimum working fiddle of your code.
<script type="text/javascript">
function checketudesandformations() {
var x = document.getElementById("myTable").rows.length;
if (x < 3) {
alert("Please Select atleast 2 documents'");
document.location.reload(true);
} else {
jQuery("#candidaturetabform2").css("display", "none");
jQuery("#candidaturetabform3").css("page-break-before", "always");
jQuery("#candidaturetabform3").css("display", "block");
jQuery("#step03").addClass("active")
jQuery("#step02").removeClass("active")
}
</script>
I am a complete beginner with Javascript.
I have 4 radio buttons:
House
Flat / Apartment
Bungalow
Commercial
And 2 input fields:
Rooms:
Bedrooms:
on click of House, Flat, Bungalow, I want to hide Rooms and show the input field Bedrooms on click of commercial I want to hide Bedrooms and show Rooms.
Please see my code below:
HTML CODE:
<table id="CurrentProperty">
<tr>
<td colspan="3">
<label>Type of Property:</label>
<br/>
<input type="radio" id="showBedrooms" value="bedrooms" name="fromType" checked="checked" />House
<input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Flat / Appartment
<input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Bungalow
<input type="radio" id="showRooms" value="rooms" name="fromType" />Commercial</td>
</tr>
<tr class="showCta">
<td colspan="3">
<label>Rooms:</label>
<input name="fromRooms" lable="From Rooms" type="text" class="body" ID="fromRooms" size="10" />
</td>
</tr>
<tr class="showTr">
<td colspan="3">
<label>Bedrooms:</label>
<input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" />
</td>
</tr>
</table>
JAVASCRIPT:
$(window).load(function () {
$('#showBedrooms').on('click', function () {
$('.showCta').hide();
});
});
$(window).load(function () {
$('#showRooms').on('click', function () {
$('.showCta').show();
});
});
JS should be something like
function update (el) {
var $rooms = $('tr.showCta');
var $bedrooms = $('tr.showTr');
if (el.checked && el.value === 'bedrooms') {
$rooms.hide();
$bedrooms.show();
} else {
$rooms.show();
$bedrooms.hide();
}
}
$(function () {
//get initial state.
update($('input:checked')[0]);
$('input[name="fromType"]').change(function () {
update(this);
});
});
jsFiddle http://jsfiddle.net/bj4Lx7ms/
JAVASCRIPT:
$( document ).ready(function () {
$('#showBedrooms').on('click', function () {
$('.showCta').hide();
});
$('#showRooms').on('click', function () {
$('.showCta').show();
});
});
After the document loaded and set the onclick handlder
And I think you should set
<tr class="showCta">
to
<tr class="showCta" style="display:none;">
in your case, user change from jquery. Bind an event handler to the "change" JavaScript event, or trigger that event on an element (your radiobuttons). With $(this).val() you can get the value from the value attribute, to check is the value bedrooms. Then call the methode show or hide like in this example:
$(document).ready(function () {
$('input:radio[name="fromType"]').change(function(){
if($(this).val() == 'bedrooms'){
$('.showCta').hide();
$('.showTr').show();
}else if ($(this).val() == 'rooms'){
$('.showCta').show();
$('.showTr').hide();
}
});
});
And hide the showCta tr as default with:
<tr class="showCta" style="display:none">
Here my JsFiddle-example
$(window).load(function () { /* You don't need to call twice this function, just wrap all your function in it */
function hideRooms() {
$("#rooms").hide(0);
$("#bedrooms").fadeIn(250);
}
function hideBedrooms() {
$("#bedrooms").hide(0);
$("#rooms").fadeIn(250);
}
$("#label").text("House selected");
hideRooms(); /* Hidding at start of website */
$("#showBedrooms_house").change(function() {
$("#label").text("House selected");
if (this.checked) {
hideRooms();
}
});
$("#showBedrooms_flatAppart").change(function() {
$("#label").text("Flat / Appartment selecrted");
if (this.checked) {
hideRooms();
}
});
$("#showBedrooms_bungalow").change(function() {
$("#label").text("Bungalow selected");
if (this.checked) {
hideRooms();
}
});
$("#showRooms_commercial").change(function() {
$("#label").text("Commercial selected");
if (this.checked) {
hideBedrooms();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="CurrentProperty">
<tr>
<td colspan="3">
<label>Type of Property:</label>
<br/>
<input type="radio" id="showBedrooms_house" value="bedrooms" name="fromType" checked="checked" />House
<input type="radio" id="showBedrooms_flatAppart" value="bedrooms" name="fromType" />Flat / Appartment
<input type="radio" id="showBedrooms_bungalow" value="bedrooms" name="fromType" />Bungalow
<input type="radio" id="showRooms_commercial" value="rooms" name="fromType" />Commercial</td>
</tr>
<tr class="showCta" id = "rooms">
<td colspan="3">
<label>Rooms:</label>
<input name="fromRooms" lable="From Rooms" type="text" class="body" ID="fromRooms" size="10" />
</td>
</tr>
<tr class="showTr" id = "bedrooms">
<td colspan="3">
<label>Bedrooms:</label>
<input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" />
</td>
</tr>
<tr>
<td style ="color : blue">
<label id ="label"></label>
</td>
</tr>
</table>
Is it possible to stop one javascript file from executing from a different javascript file?
Eg.
HTML
<!doctype html>
<html>
<head>
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<!-- Javascript -->
<script src="checkout.js"></script>
<script src="dummy.js"></script>
</head>
<body>
Pickup Date: <input type="text" maxlength="10" name="Orders.Custom_Field_PickupDate" value="">
<br />
Return Date: <input type="text" maxlength="10" name="Orders.Custom_Field_ReturnDate" value="">
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#EEEEEE" id="table_checkout_cart0">
<tr>
<td align="left">
<br>
</td>
</tr>
<tr>
<td> <span id="span_Shopping_Cart_UnEditable">
<table border="0" cellpadding="10" cellspacing="1" id="v65-onepage-CartSummary">
<tr>
<td>
<table id="v65-onepage-ordersummary-items" border=0 cellpadding=2 cellspacing=1 width="580"><tr id="v65-onepage-ordersummary-header-row">
<td class="v65-onepage-ordersummary-itemcode v65-onepage-ordersummary-header" style="color:#000000;font-weight:bold">
Code
</td>
<td class="v65-onepage-ordersummary-itemname v65-onepage-ordersummary-header" style="color:#000000;font-weight:bold">
Name
</td>
<td class="v65-onepage-ordersummary-itemprice v65-onepage-ordersummary-header" style="color:#000000;font-weight:bold">
Price
</td>
<td class="v65-onepage-ordersummary-itemqty v65-onepage-ordersummary-header" style="color:#000000;font-weight:bold">
Qty
</td>
<td class="v65-onepage-ordersummary-itemtotal v65-onepage-ordersummary-header" style="color:#000000;font-weight:bold">
Total
</td>
</tr>
<tr>
<td class="v65-onepage-ordersummary-itemcode" style="color:#666666">
K10306
</td>
<td class="v65-onepage-ordersummary-itemname" style="color:#666666">
MYT Works 4ft Large Slider Kit
</td><td class="v65-onepage-ordersummary-itemprice" style="color:#666666">
$160.00
<br />
exc Tax
</td>
<td class="v65-onepage-ordersummary-itemqty" style="color:#666666">
1
</td>
<td class="v65-onepage-ordersummary-itemtotal" style="color:#666666">
$160.00
<br />10% Tax = $16.00
</td>
</tr>
<tr>
<td class="v65-onepage-ordersummary-itemcode" style="color:#666666">
C10881
</td>
<td class="v65-onepage-ordersummary-itemname" style="color:#666666">
Apurture V-Control USB Remote Focus
</td>
<td class="v65-onepage-ordersummary-itemprice" style="color:#666666">
$18.00
<br />
exc Tax
</td>
<td class="v65-onepage-ordersummary-itemqty" style="color:#666666">
1
</td>
<td class="v65-onepage-ordersummary-itemtotal" style="color:#666666">
$18.00
<br />
10% Tax = $1.80
</td>
</tr>
</table>
<div id="IncompletePickupDate-Dialog" title="Incomplete Pickup Date">Please enter pickup date.</div>
<div id="IncompleteReturnDate-Dialog" title="Incomplete Return Date">Please enter return date.</div>
<br />
<input type="button" value="Place Order" id="btnSubmitOrder">
<br />
</body>
</html>
JS 01 - checkout.js
function checkItems() {
var returnValue = 0;
$('#v65-onepage-ordersummary-items tr').each(function() {
$this = $(this);
var code = $.trim($this.find(".v65-onepage-ordersummary-itemcode").html());
if ( code.charAt(0) == 'K' ) {
returnValue = 1;
return false;
}
});
return returnValue;
}
$(function() {
$('input[name="Orders.Custom_Field_PickupDate"]').datepicker({
dateFormat:'dd/mm/yy', showButtonPanel: true
});
$('input[name="Orders.Custom_Field_ReturnDate"]').datepicker({
dateFormat:'dd/mm/yy', showButtonPanel: true
});
$( "#IncompletePickupDate-Dialog").dialog({
autoOpen: false,
});
$( "#IncompleteReturnDate-Dialog").dialog({
autoOpen: false,
});
$( "#btnSubmitOrder" ).click(function(e) {
var pickupDate = $('input[name="Orders.Custom_Field_PickupDate"]').val().length;
var returnDate = $('input[name="Orders.Custom_Field_ReturnDate"]').val().length;
if (checkItems()) {
if (pickupDate == 0) {
e.preventDefault();
$( "#IncompletePickupDate-Dialog" ).dialog( "open" );
}
else if (returnDate == 0) {
e.preventDefault();
$( "#IncompleteReturnDate-Dialog" ).dialog( "open" );
}
}
if ((pickupDate !=0 && returnDate != 0) || checkItems() == 0) {
// TODO: Direct to Complete.html which displays just text saying Done.
}
console.log(checkItems());
});
});
JS 02 - dummy.js
$(function() {
$( "#btnSubmitOrder" ).click(function(e) {
window.location.replace("http://www.google.com");
});
});
What I want to do is, if pickupDate or returnDate is equal to zero (code in checkout.js), I want to stop all javascript files from running, and I don't want dummy.js to execute. If pickupDate and returnDate are not equal to 0, then I want to continue with the execution.
I am trying to help a friend during my uni break on his website. I can't combine the two files because the software is proprietary software, and there are a lot of limitations. I can't edit their code because it is hard coded, but I can upload html, css, javascript or jQuery files.
On his website he sells and rents products - all rental products start with the letter "K", and all sale products start with something else. On his checkout page he currently has to enter a pickup date and return date for sale and rental products, but he only wants users to enter pickup or return date for rental products.
The code I wrote above only executes when the "btnSubmitOrder" is clicked, and currently there is default functionality for this button, which I do not have access to.
So to achieve this, I thought about putting a javascript file above the default functionality, and attempt what I want to do.
Note: Files above are just some testing I'm doing locally, the real files are too large to paste here.
If this does not make sense, or more info is required please let me know.
Thanks in advance.
I have a sign up form on my site which works OK in IE but does not work in Firefox or Chrome. I have tried looking through other forum posts here with similar problems but still can't get my head round this silly problem. (I am not a code writer).
Here is the code
<script type="text/JavaScript">
function validate_form(){
{validation_text}
else{
return true;
}
}
var str_vars = '';
function all_fields(){
str_vars = '';
el = document.form1;
for (var i = 0; i < el.elements.length; i++) {
if (el.elements[i].value != '')
str_vars += el.elements[i].name+'='+el.elements[i].value+'&';
}
str_vars = str_vars.substr(0,str_vars.length-15);;
}
</script>
<div id="div_form" name="div_form">
<form id="form1" name="formx" method="{send_method}" action="{form_switch}">
<p> </p>
<table border="0" width="100%" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
{error}
{signup_list}
<tr>
<td align="right">{description_country} </td>
<td>{shiping_country_list}{required_country}</td>
</tr>
<tr><td align="right"> {promo}</td></tr>
{code_signup}
<tr>
<td colspan="2"><div align="center">
<input name="terms" id="terms" value="1" type="checkbox">
<label for="terms">I accept the terms & conditions</label>
</div></td>
</tr>
<tr>
<td colspan="2"><div align="center">
{captcha}</td>
</tr>
{arp_fields}
<tr>
<td><div align="right">*</div><br></td>
<td width="332">Denotes required</td>
</tr>
<tr>
<td>
<div align="right">
<input name="Submit" value="Submit" type="button" onclick="{request}{request_email}{form2items}">
</div></td>
<td> <br></td>
</tr>
</table>
</form>
</div>
</div>
Any help would be appreciated.
Maybe instead of
el = document.form1;
try
el = document.getElementById('form1');
I can't see all the JS so it is hard to guess, but one other thing to try is to change the name of the submit button from name="Submit" to something else like name="submitForm". If form.submit() is getting called somewhere in the script this can cause problems.
Your validate function should look something like this:
function validate_form(){
var form = document.getElementById('form1');
err = 'The following fields are not correct filled:\n';
if (form.first_name.value == ''){
err += 'No First Name.\n';
}
if (emailCheck(form.email.value) == false){
err += 'No Valid email.\n';
}
if (form.terms.checked != true){
err += 'You did not agree with the terms.\n';
}
if (err != 'The following fields are not correct filled:\n'){
alert (err);
return false;
}
else{
return true;
}
}
Lastly, change your submit button to this:
<input name="Submit" value="Submit" type="button" onclick="if (validate_form()) document.getElementById('form1').submit();">
I have a form in asp.net 3.5 , which has a master page and a child page (content page). The form has several questions, I am using the asp.net checkboxlist for a questions, since multiple options can be selected, if the user selects 'Other' on one of the selections, then they have to enter data into a textbox field.
I made the following client side javascript to validate this but, the code doesnt seem to check wheter the Other option value is selected, I believe it has to do with the way the html is rendered on the page,,,
Can you please suggest how to do this?
Thanks in advance.
Rendered Javascript
//Here I am trying to get the text property of the label rendered for the texbox
// and set my validation arguments
<script language='javascript' type='text/javascript'>
function checkOther2(oSrc, args) {
{
var elementRef =
document.getElementById('ctl00_Content_CheckBoxList1');
var checkBoxArray = elementRef.getElementsByTagName('input');
var checkedValues = '';
for (var i = 0; i < checkBoxArray.length; i++) {
var checkBoxRef = checkBoxArray[i];
if (checkBoxRef.checked == true) {
// You can only get the Text property, which
will be in an HTML label element.
var labelArray =
checkBoxRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
if (checkedValues.length > 0)
checkedValues += ',';
checkedValues += labelArray[0].innerHTML.text;
if (checkedValues == 'Other') {
args.IsValid = !(args.Value == "")
// test
alert("Hello");
}
}
else {
args.IsValid = true;
}
}
}
}
}
// HTML Rendered
<tr>
<td style="height: 20px">
</td>
</tr>
<tr>
<td style="font-weight: 700">
2.- What did you like most about working here?<strong>
Check all that apply
<span id="ctl00_Content_CheckBoxListValidator1"
style="color:Red;display:none;"></span>
</strong><br /> </td>
</tr>
<tr>
<td>
<table id="ctl00_Content_CheckBoxList1"
class="myradioButton" border="0">
<tr>
<td><input id="ctl00_Content_CheckBoxList1_0" type="checkbox"
name="ctl00$Content$CheckBoxList1$0" /><label
for="ctl00_Content_CheckBoxList1_0">Staff</label></td>
</tr><tr>
<td><input id="ctl00_Content_CheckBoxList1_1" type="checkbox"
name="ctl00$Content$CheckBoxList1$1" /><label
for="ctl00_Content_CheckBoxList1_1">Facility</label></td>
</tr><tr>
<td><input id="ctl00_Content_CheckBoxList1_2" type="checkbox"
name="ctl00$Content$CheckBoxList1$2" /><label
for="ctl00_Content_CheckBoxList1_2">Pay</label></td>
</tr><tr>
<td><input id="ctl00_Content_CheckBoxList1_3" type="checkbox"
name="ctl00$Content$CheckBoxList1$3" /><label
for="ctl00_Content_CheckBoxList1_3">Other</label></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
If other, please elaborate:<br />
<input name="ctl00$Content$txt2other"
type="text" id="ctl00_Content_txt2other" class="txtOther" />
<span id="ctl00_Content_CustomValidator3"
style="color:Red;font-weight:700;visibility:hidden;">Please enter a
comment in question #2.</span>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td style="font-weight: 700">
2.- What did you like most about working here?<strong>
Check all that apply
<cc1:CheckBoxListValidator
ID="CheckBoxListValidator1" runat="server"
ControlToValidate="CheckBoxList1" Display="None"
ErrorMessage="Question 2 is
Required"></cc1:CheckBoxListValidator>
</strong><br /> </td>
</tr>
<tr>
<td>
----------- Actual Markup on asp.net form
<asp:CheckBoxList ID="CheckBoxList1"
runat="server" CssClass="myradioButton">
<asp:ListItem Text="Staff"
Value="Staff">Staff</asp:ListItem>
<asp:ListItem Text="Facility"
Value="Facility">Facility</asp:ListItem>
<asp:ListItem Text="Pay"
Value="Pay">Pay</asp:ListItem>
<asp:ListItem Text="Other"
Value="Other">Other</asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td>
If other, please elaborate:<br />
<asp:TextBox ID="txt2other" runat="server"
CssClass="txtOther"></asp:TextBox>
<asp:CustomValidator
ID="CustomValidator3" runat="server"
ClientValidationFunction="checkOther2"
ControlToValidate="txt2other"
ErrorMessage="Please enter a comment in
question #2." style="font-weight: 700"
ValidateEmptyText="True"></asp:CustomValidator>
</td>
</tr>
Your JS looks rather complicated. Try a more simple approach...
function isValid(f)
{
var cb = document.getElementById('<%=CheckBoxList1_3.ClientID%>');
if(cb && cb.checked)
{
var tb = document.ElementById('<%=txt2other.ClientID%>');
if(tb && tb.value.length > 0)
{
f.submit();
}
else
{
alert('Please enter a comment in question #2.');
}
}
}
If you have a lot of these, try setting a property on the checkbox like value=other so when you loop through your checkboxes, you can use if(cb.checked && cb.value == 'other')