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!

Form Validation - if any checkbox ticked listbox cant be selected

Status
Not open for further replies.
mrkipling

mrkipling

Technical User
Apr 26, 2001
16
GB
I have a repeating region withing an asp page, within each repeating region there is a form with 3 checkboxes and a listbox.

I need some js that will only allow either

- any or all of the checkboxes to be ticked.
- or a selection made from the listbox.
- or no checkbox or list selection chosen.

can anyone point me in the right direction ?

thanks in advance.
 
Sort by date Sort by votes

So what you want is not to allow anything to be chosen from the list box if any checkbox is selected and vice-versa?

Dan



The answers you get are only as good as the information you give!

 
Upvote 0 Downvote

Sorry - I hadn't read the title of your post. I was trying to clarify from the points in your post.

This should work for you:

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		var selDisabled = cbsDisabled = false;

		function setCheckboxState(disabledValue) {
			var cbs = document.forms['myForm'].getElementsByTagName('input');
			for (var loop=0; loop<cbs.length; loop++) {
				if (cbs[loop].type == 'checkbox') {
					cbs[loop].disabled = disabledValue;
					cbs[loop].checked = false;
				}
			}
		}

		function checkChanged(cbObj) {

			var cbs = document.forms['myForm'].getElementsByTagName('input');
			var  anyChecked = false;
			for (var loop=0; loop<cbs.length; loop++) {
				if (cbs[loop].type == 'checkbox' && cbs[loop].checked) {
					anyChecked = true;
					break;
				}
			}

			if (selDisabled && !anyChecked) {
				selDisabled = false;
				document.forms['myForm'].elements['mySelect'].disabled = false;
				document.forms['myForm'].elements['mySelect'].selectIndex = 0;
			} else {
				selDisabled = true;
				document.forms['myForm'].elements['mySelect'].disabled = true;
			}
		}

		function selChanged(selValue) {
			if (selValue == 'opt0' && cbsDisabled) {
				cbsDisabled = false;
				setCheckboxState(false);
			} else {
				cbsDisabled = true;
				setCheckboxState(true);
			}
		}
	//-->
	</script>
</head>

<body>
	<form name="myForm">
		<input type="checkbox" name="myCheck1" onclick="checkChanged(this);" />Checkbox 1<br />
		<input type="checkbox" name="myCheck2" onclick="checkChanged(this);" />Checkbox 2<br />
		<select name="mySelect" onchange="selChanged(this.value);">
			<option value="opt0" selected="selected"></option>
			<option value="opt1">Option 1</option>
			<option value="opt2">Option 2</option>
		</select>
	</form>
</body>
</html>

Hope this helps,
Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
Thanks for your help Dan,

It sort of works but i realise I incorrectly desribed my initial problem, My asp repeat region lies within the form, each set of form elements for each record is being assigned a unique ID by using a counter function in asp - So if I check one check box it disables all the list boxes for every record.

so for example, the checkbox below will have the name "31.front" as the asp variable appends a unique number to each set of form componenets

<input name="<%=iCnt%>.front" onclick="checkChanged(this);" type="checkbox">

Is there a way to pass theis variable into the javascript so that it only disables the listbox on that record etc ?

Hope you understand

Thanks again

Mark
 
Upvote 0 Downvote

If you give your forms different names, then this will work (a few small additions - basically passing the form name around):

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		var selDisabled = cbsDisabled = false;

		function setCheckboxState(disabledValue, formName) {
			var cbs = document.forms[formName].getElementsByTagName('input');
			for (var loop=0; loop<cbs.length; loop++) {
				if (cbs[loop].type == 'checkbox') {
					cbs[loop].disabled = disabledValue;
					cbs[loop].checked = false;
				}
			}
		}

		function checkChanged(cbObj) {
			var formName = cbObj.form.name;

			var cbs = document.forms[formName].getElementsByTagName('input');
			var  anyChecked = false;
			for (var loop=0; loop<cbs.length; loop++) {
				if (cbs[loop].type == 'checkbox' && cbs[loop].checked) {
					anyChecked = true;
					break;
				}
			}

			if (selDisabled && !anyChecked) {
				selDisabled = false;
				document.forms[formName].elements['mySelect'].disabled = false;
				document.forms[formName].elements['mySelect'].selectIndex = 0;
			} else {
				selDisabled = true;
				document.forms[formName].elements['mySelect'].disabled = true;
			}
		}

		function selChanged(selValue, formName) {
			if (selValue == 'opt0' && cbsDisabled) {
				cbsDisabled = false;
				setCheckboxState(false, formName);
			} else {
				cbsDisabled = true;
				setCheckboxState(true, formName);
			}
		}
	//-->
	</script>
</head>

<body>
	<form name="myForm1">
		<input type="checkbox" name="myCheck1" onclick="checkChanged(this);" />Checkbox 1<br />
		<input type="checkbox" name="myCheck2" onclick="checkChanged(this);" />Checkbox 2<br />
		<select name="mySelect" onchange="selChanged(this.value, this.form.name);">
			<option value="opt0" selected="selected"></option>
			<option value="opt1">Option 1</option>
			<option value="opt2">Option 2</option>
		</select>
	</form>

	<form name="myForm2">
		<input type="checkbox" name="myCheck1" onclick="checkChanged(this);" />Checkbox 1<br />
		<input type="checkbox" name="myCheck2" onclick="checkChanged(this);" />Checkbox 2<br />
		<select name="mySelect" onchange="selChanged(this.value, this.form.name);">
			<option value="opt0" selected="selected"></option>
			<option value="opt1">Option 1</option>
			<option value="opt2">Option 2</option>
		</select>
	</form>
</body>
</html>

Hope this helps,
Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
There is only one form, the form elements inside are created dynamically I'm not sure if this is going to be possible using js.

Thanks alot for your help anyway.

mark
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
733
Mike Lewis
Mike Lewis
JPSeo
  • Locked
  • Question
--How to implement req.body.param validation
Replies
0
Views
71
JPSeo
JPSeo
damipera
  • Locked
  • Question
Checkboxes - At Least 1 is Selected? 1
Replies
2
Views
102
damipera
damipera
CoolBreeze007
  • Locked
  • Question
jquery ui radio buttons will not accept selected checkbox
Replies
1
Views
99
Offera
Offera
obtur
  • Locked
  • Question
function below calculates day of the week for any given date. not returning correctly, plz help
Replies
2
Views
99
obtur
obtur

Part and Inventory Search

Sponsor

Back
Top