Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1639
  • Last Modified:

JavaScript auto-populate checkboxes based on dropdown selection

Hi all,

I am currently using the following code to auto-populate a second dropdown box based on the selection of the first box.

The code is from http://www.plus2net.com/javascript_tutorial/dropdown-list.php

How can I modify the code so that the second dropdown is a checkbox list instead of a dropdown allowing multiple selections?

I need to use a client side script as the site is on a CMS that will not allow server side scripting.

If it can't be done using a checkbox list can you suggest an alternative way to do it that will allow multiple selections of the second list?

Also is there a nicer way to achieve this with maybe jQuery or some other option?

Thank you.

GW.
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>(Type a title for your page here)</title>
<script language="javascript" src="list.js"></script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fillCategory();">
<FORM name="drop_list" action="yourpage.php" method="POST" >
<SELECT  NAME="Category" onChange="SelectSubCat();" >
<Option value="">Category</option>
</SELECT>&nbsp;
<SELECT id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>
</SELECT>
</form>
</body>
</html>
 
 
 
// And in the list.js file
function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.drop_list.Category, "Fruits", "Fruits", "");
addOption(document.drop_list.Category, "Games", "Games", "");
addOption(document.drop_list.Category, "Scripts", "Scripts", "");
}
 
function SelectSubCat(){
// ON selection of category this function will work
 
removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");
 
if(document.drop_list.Category.value == 'Fruits'){
addOption(document.drop_list.SubCat,"Mango", "Mango");
addOption(document.drop_list.SubCat,"Banana", "Banana");
addOption(document.drop_list.SubCat,"Orange", "Orange");
}
if(document.drop_list.Category.value == 'Games'){
addOption(document.drop_list.SubCat,"Cricket", "Cricket");
addOption(document.drop_list.SubCat,"Football", "Football");
addOption(document.drop_list.SubCat,"Polo", "Polo", "");
}
if(document.drop_list.Category.value == 'Scripts'){
addOption(document.drop_list.SubCat,"PHP", "PHP");
addOption(document.drop_list.SubCat,"ASP", "ASP");
addOption(document.drop_list.SubCat,"Perl", "Perl");
}
 
}
////////////////// 
 
function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}
 
 
function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;
 
	selectbox.options.add(optn);
}

Open in new window

0
GhostWerx
Asked:
GhostWerx
  • 4
  • 4
4 Solutions
 
GhostWerxAuthor Commented:
Hi all,

perhaps a solution could integrate the idea at http://c82.net/samples/checklist-samples.html where they have scrollable check-boxes.

My JavaScript knowledge is not the best so any help would be appreciated.

Thanks,

GW.
0
 
quincydudeCommented:
This may help

First change the select on line 12-14 of your code to a div

<div id="bb">
</div>

then try the following functions instead
<script type="text/javascript">
 
function SelectSubCat(){
// ON selection of category this function will work
 
removeAllOptions("SubCat");
 
addOption("SubCat","sub","Mango", "Mango");
addOption("SubCat","sub","Banana", "Banana");
addOption("SubCat","sub","Orange", "Orange");
 
}
 
function addOption(id, name ,value, text)
{
 
var b = document.getElementById(id);
 
var newcheck= document.createElement('input');
var span= document.createElement('span');
var br = document.createElement('br');
 
newcheck.setAttribute('type','checkbox');
newcheck.setAttribute('name', name);
newcheck.setAttribute('value', value);
 
span.innerHTML = text;
 
b.appendChild(br);
b.appendChild(span);
b.appendChild(newcheck);
}
 
function removeAllOptions(div)
{
  var b = document.getElementById(div);
  b.innerHTML = "";
}
</script>

Open in new window

0
 
quincydudeCommented:
the div should be named with id SubCat in my example
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
fsze88Commented:
tested on ie6,ff3
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>(Type a title for your page here)</title>
<script language="javascript" src="list.js"></script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fillCategory();">
<FORM name="drop_list" action="yourpage.php" method="POST" >
<SELECT  NAME="Category" onChange="SelectSubCat2();" >
<Option value="">Category</option>
</SELECT> 
<SELECT id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>
</SELECT>
</form>
</body>
</html>
 
 
 <script language="javascript">
// And in the list.js file
 
function SelectSubCat2(){
 
var i;
var container = document.drop_list;
var cn = container.childNodes;
 
  for (var i = 0; i < cn.length; i++){
//    alert(cn[i].nodeName);
    if (cn[i].type == 'checkbox' || cn[i].nodeName == 'DIV'){
      container.removeChild(container.childNodes[i]);
      i-=1;
    }
  }
  
  if (container.Category.value == 'Fruits'){
    addCheckBox(container, 'Fruits','Mango');
    addCheckBox(container, 'Fruits','Banana');
    addCheckBox(container, 'Fruits','Orange');
  }
  if (container.Category.value == 'Games'){
    addCheckBox(container, 'Games','Cricket');
    addCheckBox(container, 'Games','Football');
    addCheckBox(container, 'Games','Polo');
  }
  if (container.Category.value == 'Scripts'){
    addCheckBox(container, 'Scripts','PHP');
    addCheckBox(container, 'Scripts','ASP');
    addCheckBox(container, 'Scripts','Perl');
  }
}
 
function addCheckBox(formObj, vName, vValue ){
  var newDiv = document.createElement("div");
  newDiv.innerHTML = vValue;
  formObj.appendChild(newDiv);
  var newCheckBox = document.createElement("input");
  newCheckBox.type = 'checkbox';
  newCheckBox.name = vName;
  newCheckBox.value = vValue;
  formObj.appendChild(newCheckBox);
}
 
function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.drop_list.Category, "Fruits", "Fruits", "");
addOption(document.drop_list.Category, "Games", "Games", "");
addOption(document.drop_list.Category, "Scripts", "Scripts", "");
}
 
function SelectSubCat(){
// ON selection of category this function will work
 
removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");
 
if(document.drop_list.Category.value == 'Fruits'){
addOption(document.drop_list.SubCat,"Mango", "Mango");
addOption(document.drop_list.SubCat,"Banana", "Banana");
addOption(document.drop_list.SubCat,"Orange", "Orange");
}
if(document.drop_list.Category.value == 'Games'){
addOption(document.drop_list.SubCat,"Cricket", "Cricket");
addOption(document.drop_list.SubCat,"Football", "Football");
addOption(document.drop_list.SubCat,"Polo", "Polo", "");
}
if(document.drop_list.Category.value == 'Scripts'){
addOption(document.drop_list.SubCat,"PHP", "PHP");
addOption(document.drop_list.SubCat,"ASP", "ASP");
addOption(document.drop_list.SubCat,"Perl", "Perl");
}
 
}
////////////////// 
 
function removeAllOptions(selectbox)
{
        var i;
        for(i=selectbox.options.length-1;i>=0;i--)
        {
                //selectbox.options.remove(i);
                selectbox.remove(i);
        }
}
 
 
function addOption(selectbox, value, text )
{
        var optn = document.createElement("OPTION");
        optn.text = text;
        optn.value = value;
 
        selectbox.options.add(optn);
}
</script>

Open in new window

0
 
GhostWerxAuthor Commented:
Hi quincydude,

Major help so far. Its all working.

Just one last thing I need help with.

How can I add an option to the check boxes such as onchange="collectSelections();"

so that collectSelections() collects the values of all the selected checkboxes and combines them together in the format "selection 1, selection 2, etc..." and then copies that value into a hidden text input field for submission?

Thank you for your help so far.

GW.
0
 
quincydudeCommented:
say you have the hidden field like
<input type="hidden" name="hidinput" id="hidinput">

and check box named 'sub'

you can use the following function on onclick on all checkboxes
onclick="collectSelections(this.form);"


function collectSelections(theform)
{
var selected = '';
 
for(var i=0; i < theform.sub.length; i++){
if(theform.sub[i].checked)
 if(selected == '')
    selected = theform.sub[i].value;
 else
    selected = selected + ',' + theform.sub[i].value;
}
 
  theform.hidinput.value = selected;
 
}

Open in new window

0
 
GhostWerxAuthor Commented:
Alright I think we're almost there.

How do I append the onclick="collectSelections(this.form);" to the check boxes??

Thanks.
0
 
quincydudeCommented:
just add this line to the addOption() function at line 26 I posted above will do

newcheck.setAttribute('onclick', 'collectSelections(this.form)');
0
 
GhostWerxAuthor Commented:
You are awesome. Thanks heaps!!
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now