Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2006-11-21
11
Medium Priority
?
698 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 2000 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

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…
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…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

688 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