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 Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Values of checkboxes to select list 1

Status
Not open for further replies.
dmears1

dmears1

Technical User
Joined
Jun 18, 2003
Messages
208
Location
US
I need to be able to populate a dropdown list with values that are selected (checked) in checkboxes. Here's what I have so far:

Code: 
<script type="text/javascript">
<!--
	function moveIt(numboxes){
		var boxes = new Array(numboxes)
		for (var j = 0; j < numboxes; ++j) {
			boxes[j] = document.forms['updateuser'].usergroup[j].value;
		}
				
		for (var i = 0; i < numboxes; ++i) {
			if (document.forms['updateuser'].elements[i].checked){
				addOption(document.forms['updateuser'].primarygroup,boxes[i],boxes[i]);
			}
		}

	}

	function addOption(selectbox,text,value ){
		var optn = document.createElement("OPTION");
		optn.text = text;
		optn.value = value;
		selectbox.options.add(optn);
	}
//-->
</script>
<form name="updateuser">
<table border="0" cellpadding="0" cellspacing="2">
	<tr>
		<th>User Groups</th>
	</tr>
	<tr>
		<td>
			<input type="checkbox" name="usergroup" value="first" onclick="if(this.checked){ moveIt(2);}"> first<br />
			<input type="checkbox" name="usergroup" value="second" onclick="if(this.checked){ moveIt(2);}"> second<br />
			<br /><br /><h4>Primary Group</h4><br />
			<select name="primarygroup">
				<option value="">none</option>
			</select>
		</td>
	</tr>
</table>
</form>

It works in the most basic of ways, but I need to be able to prevent duplicates and/or remove values from the list if a box is unchecked. Any help would be appreciated.

 
Sort by date Sort by votes
Why not just have an onclick event for each checkbox that calls a function to test if that box is checked, if it is to add the option to the select and if it is not remove the option from the select?
You should never end up with duplicates because you cannot check the same box twice and if you uncheck it the option gets removed.

If this approach does not work then explain why and I can give another approach.


It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
Thanks for the help NiteOwl. With you pointing me in the right direction and this FAQ I was able to come up with this solution:
Code: 
<html>
<head>
	<title>Testing</title>
</head>
<body>
<script type="text/javascript">
	function moveIt(numboxes) {
		var boxes = new Array(numboxes)
		clearSelect()
		for (i = 0; i < numboxes ; ++i) {
			if (document.forms['updateuser'].usergroup[i].checked == true) {
				boxes[i] = document.forms['updateuser'].usergroup[i].value
				addOption(document.forms['updateuser'].primarygroup, boxes[i], boxes[i])
			}
		}
	}

	function addOption(selectbox,text,value ){
		var optn = document.createElement("OPTION");
		optn.text = text;
		optn.value = value;
		selectbox.options.add(optn);
	}

	function clearSelect(){
		while (document.forms['updateuser'].primarygroup.options.length > 1) {
			document.forms['updateuser'].primarygroup.remove(1)
		}
	}

</script>
<form name="updateuser">
<table border="0" cellpadding="0" cellspacing="2">
	<tr>
		<th>User Groups</th>
	</tr>
	<tr>
		<td>
			<input type="checkbox" name="usergroup" value="first" onclick="moveIt(2)"> first<br />
			<input type="checkbox" name="usergroup" value="second" onclick="moveIt(2)"> second<br />
			<br /><br /><h4>Primary Group</h4><br />
			<select name="primarygroup">
				<option value="">none</option>
			</select>
		</td>
	</tr>
</table>
</form>
</body>
</html>

 
Upvote 0 Downvote
Glad to see you got it working.

One thing that might help you using this script in the future though is a way to get around passing in the number of checkboxes it has to loop through.

Using getElementsByName('usergroup') you can retrieve the entire set of checkboxes named usergroup as an array rather than having to know the number ahead of time and manually creating an array.

Code: 
  function moveIt() {
    var boxes = document.getElementsByName('usergroup');
    clearSelect()
    for (i = 0; i < boxes.length ; ++i) {
      if (document.forms['updateuser'].usergroup[i].checked) {
        var boxval = document.forms['updateuser'].usergroup[i].value
        addOption(document.forms['updateuser'].primarygroup, boxval, boxval)
      }
    }
  }

It works essentially the same but it a bit more flexible if you expand on the page later on. You will no longer need to pass in the value from the onclick event.
You could pass in the name of the checkbox if you wanted and use that in the getElementsByName call thus making the function capable of running for any set of checkboxes on your page as well.

You do not have to use == true in the if statement. It is OK to do so but the checked value is returned as true or false anyway so saying:
if (document.forms['updateuser'].usergroup.checked) will evaluate to true of false all by itself without the need for the comparison.


It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
1K
xwb
xwb
malpa
  • Locked
  • Question Question
Graph the selection of a html table row
Replies
0
Views
1K
malpa
malpa
Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer

Part and Inventory Search

Sponsor

Back
Top