Solved

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

Posted on 2006-11-21
11
692 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
  • 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
ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

777 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