Solved

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

Posted on 2006-11-21
11
697 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

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 is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Suggested Courses

628 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