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

x
?
Solved

Looking for help with using checkboxes to populate a select list.

Posted on 2011-05-10
9
Medium Priority
?
173 Views
Last Modified: 2012-05-11
Part of a form I'm working on consiss of several checkboxes that represent program levels.  For the sake of this question, say the checkboxes are labelled:
All, Freshman, Sophomore, Junior & Senior  (in reality, there are 7 checkboxes, including the 'All' option)

Since there are over 200 documents to deal with, the client wants to be able click on a checkbox and have a list of documents populate a select list later on down the page - if they checked on sophomore, the select list would populate only with those documents relevant to sophomores, select juniors and show only junior related docs.

Ideally, the client would like the list to build as successive checkboxes are checked, but, in the interest of sanity, I've got them to settle for just showing all programs if more than one checkbox is checked.

I got a solution to a previous quesiton - it is selecting from one select box to populate another.  I'm looking for something similar just with checkboxes initally

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_26987251.html

Many thanks in advance.
0
Comment
Question by:saabStory
  • 5
  • 2
  • 2
9 Comments
 
LVL 3

Expert Comment

by:magadesign_sviluppo
ID: 35735302
hi,
try this:

<script type="text/javascript">
	CustomObjectOptions = {
		id: 0,
		title: "",
		type: 0
	};
	CustomObject = function(opt) {
		this.Opt = {};
		var obj = this;
		obj.Opt = $.extend(obj.Opt, CustomObjectOptions, opt);
	}
	CustomTypeOptions = {
		id: 0,
		control: "",
		title: ""
	};
	CustomType = function(opt) {
		this.Opt = {};
		var obj = this;
		obj.Opt = $.extend(obj.Opt, CustomObjectOptions, opt);
	}
	CustomObjectList = new Array();
	CustomTypeList = new Array();
	function FilterList(){
		var _selectedTypes = new Array();
		for (var i = 0; i < CustomTypeList.length; i++) {
			var _type = CustomTypeList[i];
			if($("#"+_type.Opt.control).is(":checked"))_selectedTypes.push(""+_type.Opt.id);
		}
		$("#CustomObjectListCont option").remove();
		for (var i = 0; i < CustomObjectList.length; i++) {
			var _object = CustomObjectList[i];
			if ($.inArray("" + _object.Opt.type, _selectedTypes) != -1) {
				$("#CustomObjectListCont").append("<option value='" + _object.Opt.id + "'>" + _object.Opt.title + "</option>")
			}
		}
	}
</script>
<?
//populate list object
//loop the type
for (var i =0; i<5; i++){
?>
<script type="text/javascript">
CustomTypeList.push(new CustomType(id: <?echo i;?>,title: '<?echo "type_".i;?>', control: '<?echo "type_control_".i;?>' ));
</script>
<input type="checkbox" id="<?echo "type_control_".i;?>" onclick="FilterList()" />
<?
}
//end type loop
//loop the object
for (var i =0; i<5; i++){
?>
<script type="text/javascript">
CustomObjectList.push(new CustomObject(id: <?echo i;?>,title: '<?echo "object_".i;?>', type: '<?echo i;//type of the object one of the list obove?>' ));
</script>
<?
}
//end object loop
?>
<select id="CustomObjectListCont">
</select>

Open in new window

0
 
LVL 3

Expert Comment

by:magadesign_sviluppo
ID: 35735305
P.S.
need jQuery to use this
hope helps
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 35737345
This script demonstrates some the design pattern for using checkboxes in HTML, JavaScript and PHP.  In the example, we use a "toggle all" box and four boxes that are generated dynamically from the array at line 12.  If you wanted to add, for example, "Graduates" you would just add that to the array following the pattern shown in the code snippet.

The action script starts on line 23.  If the submit button was fired, we examine our array of options and if the option was set in the POST [choice] array, we set the value in $options to checked.  This lets us remember the status of the checkboxes from one instance of the form to the next.

The action script is completed at line 38.  Obviously it could have done something a lot more interesting than just report and remember the checkboxes.  That would have happened near line 32.

The form script starts at line 43 with a heredoc definition.  It contains some JavaScript to give us the toggle all capability.  This only defines the top of the form.  It ends at line 59.

The second part of the form script is generated dynamically from the $options array (lines 62-79).  

At line 81 we add the submit button and close the form, then we write the HTML string to the browser on the last line of the script.

You can install this and run it to see the moving parts, or you can test it on my server here:
http://www.laprbass.com/RAY_temp_saabstory.php

HTH, ~Ray
<?php // RAY_temp_saabstory.php
error_reporting(E_ALL);
echo "<pre>" . PHP_EOL;



// DEMONSTRATE HOW TO SUBMIT CHECKBOXES



// THESE ARE THE NAMES OF THE CHECKBOXES
$options
= array
( 'Freshman'  => NULL
, 'Sophomore' => NULL
, 'Junior'    => NULL
, 'Senior'    => NULL
)
;


// IF THE FORM HAS BEEN SUBMITTED
if (!empty($_POST["sb"]))
{
    echo "CHOICES:";

    // SHOW THE CHOICES THAT WERE SELECTED
    foreach ($options as $opt => $status)
    {
        if (isset($_POST["choice"][$opt]))
        {
            // THIS IS WHERE YOU MIGHT DO THE PROCESSING FOR THE SELECTED CHOICE
            $options[$opt] = " checked ";
            echo PHP_EOL . $opt;
        }
    }
}
// END OF PHP PROCESSING - USE HTML AND JAVASCRIPT TO PUT UP THE FORM



// THE FIRST PART OF THE HTML DEFINED IN HEREDOC NOTATION
$html = <<<ENDHTML
<script language="JavaScript">
function toggle(formName, arrayName, YesNo)
{
    var xbox=document.getElementsByName(formName)[0].getElementsByTagName('input');
    for(i=0; i<xbox.length; i++)
    {
        if (xbox[i].name.substr(0,arrayName.length) == arrayName) xbox[i].checked=YesNo;
    }
}
</script>

<form method="post" name="checkForm">
SELECT A GRADE:
<input type="checkbox" onClick="toggle('checkForm', 'choice', this.checked)"> TOGGLE ALL

ENDHTML;

// THE SECOND PART OF THE HTML CREATED DYNAMICALLY FROM $opts
foreach ($options as $opt => $status)
{
    $html
    .= '<input '         // START THE INPUT CONTROL TAG
    . 'name="choice'     // ASSIGN THE NAME AS AN ARRAY [choice][]
    . '['                // USE BRACKET NOTATION
    . $opt               // THE ARRAY KEY
    . ']'                // CLOSE THE ARRAY BRACKET NOTATION
    . '" '               // CLOSE THE NAME ATTRIBUTE
    . 'type="checkbox"'  // THE INPUT CONTROL TYPE ATTRIBUTE
    . 'value="'          // THE VALUE ATTRIBUTE
    . $opt               // THE NAME OF THE CHOICE
    . '" '               // CLOSE THE VALUE ATTRIBUTE
    . $status            // CHECKED OR NULL
    . " /> $opt"         // TEXT FOR THE CLIENT TO SEE
    . PHP_EOL
    ;
}

// ADD THE END OF THE DOCUMENT
$html .= '<input name="sb" type="submit" value="MAKE SELECTION" />' . PHP_EOL;
$html .= '</form>' . PHP_EOL;

// WRITE THE FORM
echo $html;

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:saabStory
ID: 35738416
Megadesign - getting an error off line 45 and 55 indicating both are missing a right parens - but I'm not seeing.  My screen shows the checkbox then  onclick="FilterList()" /> with an empty select list.

Any ideas??


Ray_Paseur - any way to do yours without the button and make the list that appears selectable as well.  People will check on the grade level and then check on the courses they want/need in the list that is created.

Thanks to you both.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 35738483
I would design this as two separate web pages.  The first web page might present links that say Freshman, Sophomore, etc.  When these links are fired, they would take the client to a new web page that had the information they might select from.

Others might design it as a single page using jQuery.
0
 
LVL 3

Expert Comment

by:magadesign_sviluppo
ID: 35738753
con you post the script that you have, so ! can see the error,
cuz my example was very generic
0
 
LVL 3

Accepted Solution

by:
magadesign_sviluppo earned 2000 total points
ID: 35745586
hi,
another solution could be using ajax
try scripts included
 dinamic-select.zip
hope helps
0
 
LVL 3

Expert Comment

by:magadesign_sviluppo
ID: 35745592
the file is .rar I've renamed to .zip to upload, if can't open just rename to .rar
0
 

Author Closing Comment

by:saabStory
ID: 35760625
Wow - that is a really slick bit of work.  I had talked myself into just showing the whole list and letting it go at that but this is really slick.  Just what I need for this project and client.

Many, many thanks.
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

578 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