Solved

Form Drop down selection places checks in multiple checkboxes, changing with each drop down selection

Posted on 2006-11-21
11
695 Views
Last Modified: 2010-04-06
I have hopefully a simple question, but haven't found the answer.

I am looking to create "Groups" in a drop down list which corruspond to selected checkboxes, which change when the user selects a different group from the dropdown.

Example

<html>
<head>
</head>
<body>
<form>

    <select name="type" id="dd">
      <option>Select group</option>
      <option></option>
<option>Group number one</option>
<option>Group number two</option>
<option>Group number three</option>
<option>Group number Four</option>
<option>Group number five</option>
<option>Group number six</option>
<option>Group number seven</option>
</select><p>

&nbsp; <input type="checkbox" name="reports" value="group1">Report 1<br>
&nbsp; <input type="checkbox" name="reports" value="group2">Report 2<br>
&nbsp; <input type="checkbox" name="reports" value="group3">Report 3<br>

&nbsp; <input type="checkbox" name="reports" value="group">Report 4<br>
&nbsp; <input type="checkbox" name="reports" value="">Report 5<br>
&nbsp; <input type="checkbox" name="reports" value="">Report 6<br>
&nbsp; <input type="checkbox" name="reports" value="">Report 7<br>

     </p>

</form>
</body>
</html>


Group one from drop down may consist of  Report 1, Report 4, and Report 5
Group two from drop down may consist of Report 3, Report 4, and Report 7

How would I do that?

0
Comment
Question by:mrslate1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 2
11 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17988705
mrslate1,

I'm not exactly sure what you want.  Do you want the select list to be grouped (i.e. split in subsections)?  That isn't supported by browsers, with the exception of Safari I believe but I haven't used it.

If that isn't it then are you asking about using script to change checkboxes when an option (i.e. group) is selected from the list?  That can be done with the onchange event in the select tag to read the value and then checkboxes.  This would use Javascript.  If this is what you want then I can provide an example.

If neither is correct then please clarify.  Let me know if you have any questions or need more information.

b0lsc0tt
0
 

Author Comment

by:mrslate1
ID: 17990020
Thanks for the reply,

Yes I am looking for some sort of Javascript that the certian check boxes to be selected depending on which drop down selection is made.

This is for mock up purposes as I know this is a database thing, which will enable the groupings to be made.

So the second option you described is the one I am looking for.  An example of that would be great.

Thanks for your help.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17992133
You select tag is the easy part.  Add an onchange event to call the function.  It passes the selected value to the function.

<select name="type" id="dd" onchange="checkBoxes(this.value);">

Now depending on the way the checkboxes are set up and how they relate to the select list this can be really easy or a little more difficult.  I'll give a basic example and assume that the value from the select list equals the unique id for one checkbox.  This function would check that box.

function checkBoxes(sel) {
  document.getElementById(sel).checked=true;
}

That is the simplest scenario.  If you still need help please let me know how the select relates to the boxes.  I'll need details of the html for the list and the boxes.  It will probably be easier if each checkbox has a unique id attribute assigned.

bol
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:mrslate1
ID: 17993280
What I am actually doing is creating more then one  Grouping for the check boxes for printing purposes. But I do not want to go that deep, just have the ablilty to select one goup from the drop down list, and three or four or five check boxes will be automatically checked. (Up to seven) Then the next drop down group will have only three boxes checked, and so on.

A user may want one group of 1,3,5 boxes checked, (Group 1) and another grouping of 2,3,4 checked (Group 2) for printing purposes. A user can have up to 7 groupings.

Hope this makes sense, and thanks for your help.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17993920
b0lsc0tt: for maximum compatibility use
onchange="checkBoxes(this.value)
instead of
onchange="checkBoxes(this.options[this.selectedIndex].value)

or better
onchange="checkBoxes(this)
and have checkBoxes function use the passed select and its .form attribute
0
 

Author Comment

by:mrslate1
ID: 17996260
Sorry for being ignorant, but what would this look like put together? Say if I only had 3 check boxes for a simpler example?

For instance group one is check boxes 1 and 3 and group 2 is 1, 2, 3?

<html>
<head>
</head>
<body>
<form>

    <select name="type" id="dd">
     <option>Select group</option>
     <option></option>
<option>Group number one</option>
<option>Group number two</option>
<option>Group number three</option>
</select><p>

&nbsp; <input type="checkbox" name="reports" value="1">Report 1<br>
&nbsp; <input type="checkbox" name="reports" value="2">Report 2<br>
&nbsp; <input type="checkbox" name="reports" value="3">Report 3<br>

</form>
</body>
</html>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17996359
<html>
<head>
<script>
function checkEm(theSel) {
  var val = theSel.options[theSel.selectedIndex].value;
  for (var i=0;i<theSel.form.elements.length;i++) {
    if (theSel.form.elements[i].name=='reports') {
      theSel.form.elements[i].checked=(val==theSel.form.elements[i].value)?true:false;
    }
  }
}
</script>
</head>
<body onLoad="checkEm(document.forms[0].elements["type"])>
<form>

    <select name="type" id="dd" onChange="checkEm(this)">
     <option value="">Select group</option>
<option value="1">Group number one</option>
<option value="2">Group number two</option>
<option value="3">Group number three</option>
</select><p>

&nbsp; <input type="checkbox" name="reports" value="1">Report 1<br>
&nbsp; <input type="checkbox" name="reports" value="2">Report 2<br>
&nbsp; <input type="checkbox" name="reports" value="3">Report 3<br>

</form>
</body>
</html>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17996364
oops give me another minute
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 17996398
<html>
<head>
<script>
function checkEm(theSel) {
  var vals = "|"+theSel.options[theSel.selectedIndex].value+"|";
  for (var i=0;i<theSel.form.elements.length;i++) {
    if (theSel.form.elements[i].name=='reports') {
      var val = "|"+theSel.form.elements[i].value+"|";
      theSel.form.elements[i].checked=(vals.indexOf(val)!=-1)?true:false;
    }
  }
}
</script>
</head>
<body onLoad="checkEm(document.forms[0].elements["type"])>
<form>

    <select name="type" id="dd" onChange="checkEm(this)">
     <option value="">Select group</option>
<option value="1|3">Group number one</option>
<option value="1|2|3">Group number two</option>
<option value="3">Group number three</option>
</select><p>

&nbsp; <input type="checkbox" name="reports" value="1">Report 1<br>
&nbsp; <input type="checkbox" name="reports" value="2">Report 2<br>
&nbsp; <input type="checkbox" name="reports" value="3">Report 3<br>

</form>
</body>
</html>
0
 

Author Comment

by:mrslate1
ID: 17997646
This was exactly what I was looking for. I did have to close the " on this line and change the " to a '

<body onLoad="checkEm(document.forms[0].elements["type"])>

to

<body onLoad="checkEm(document.forms[0].elements['type'])">

as I was getting a syntax error message, but after that it works perfectly!


Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18001528
YW - sorry about the quotes - the statement was put there as an afterthought to allow the form to reset/update after reload
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question