Jump to content

Multiple selection

shage

By shage
in Javascript Help

Recommended Posts

shage Regular Member

shage

Posted
Posted 

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/paginator/assets/skins/sam/paginator.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/json/json-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/paginator/paginator-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datatable/datatable-min.js"></script>
<script src="YUI/2.6.0/build/button/button-min.js" type="text/javascript"></script>


<!--begin custom header content for this example-->
<style type="text/css">
    #toolbar
{
	width:800px;
	height:100px;
}
#paginated {
        text-align: center;
    }
    #paginated table {
        margin-left:auto; margin-right:auto;
    }
    #paginated, #paginated .yui-dt-loading {
        text-align: center; background-color: transparent;
    }
</style>

<!--end custom header content for this example-->

<!--<link href="YUI/2.6.0/build/fonts/fonts-min.css" rel="stylesheet" type="text/css">
<link href="YUI/2.6.0/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css">-->


<!--<body class="yui-skin-sam">-->

<div id="contentcontainer" class="content fix"> 
<div id="contentborder">
<div id="maincontent" class="fullwidth">
<div class="copy fix">
<span style="font-family:Georgia, 'Times New Roman', Times, serif"><p>In  1835, Santiago  do Iguape had 959* households: groups of people living together in the same  domestic space.  This search engine lets  you examine how the race, sex, and marital status of the head of household  shaped other characteristics of the group that lived there.  Choose any of the following variables encoded  by the census taker to see the characteristics of households that meet your  queries.<br>
      <em>* this total excludes the households identified as headed by slaves</em></p>
<p><strong>How to Search:</strong></p>
<p>You may choose to limit your search by any of the filters  below, choosing as many or as few as you wish. [in development]  </p>
After all the households matching your search criteria display, click the column headings to further sort your responses. 
</span>
</div>
<p> </p>
<hr>
<p> </p>
<div id="toolbar" align="center">

    <fieldset style="width:100px;text-align:left;float:left;position:relative;">
<legend>Sex</legend>
<input type="checkbox" name="chkMale" id="chkMale" value="male">Male<br>
<input type="checkbox" name="chkFeMale" id="chkFeMale" value="female">Female
</fieldset>

<fieldset style="width:100px;text-align:left;float:left;position:relative;">
<legend>Racial Category</legend>
<input type="checkbox" name="chkBranco" id="chkBranco" value="branco">Branco<br>
<input type="checkbox" name="chkPardo" id="chkPardo" value="pardo">Pardo<br>
<input type="checkbox" name="chkPreto" id="chkPreto" value="preto">Preto<br>
<input type="checkbox" name="chkCabra" id="chkCabra" value="cabra">Cabra<br>
</fieldset>

	<fieldset style="width:100px;text-align:left;float:left;position:relative;">
<legend>Civil Satus</legend>
<input type="checkbox" name="chkFree" id="chkFree" value="free">Free<br>
<input type="checkbox" name="chkFreed" id="chkFreed" value="freed">Freed<br>
</fieldset>

  	<fieldset style="width:100px;text-align:left;float:left;position:relative;">
<legend>Marital Status</legend>
<input type="checkbox" name="chkSingle" id="chkSingle" value="single">Single<br>
<input type="checkbox" name="chkMarried" id="chkMarried" value="married">Married<br>
<input type="checkbox" name="chkWidow" id="chkWidow" value="widow(ed)">Widow(ed)<br>
</fieldset>

<label for="filter">Filter by Name:</label> <input type="text" id="filter" value="">
</div>

<p> </p>
<!-- Form buttons rendered here -->
<!--Datatable rendered here-->
<div id="paginated" class="yui-skin-sam"></div>

<!--BEGIN SOURCE CODE FOR TABLE =============================== -->

<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
    
var Ex = YAHOO.namespace('example');

    Ex.dataSource = new YAHOO.util.DataSource("iguape_json.php?",{
        responseType : YAHOO.util.DataSource.TYPE_JSON,
        responseSchema : {
            resultsList: "records",
		fields: ["name","age","nSlaves","nKids","nIndividuals","race","sex","marital","civil","family","occupation"]
        },

        doBeforeCallback : function (req,raw,res,cb) {
            // This is the filter function
            var data     = res.results || [],
                filtered = [],
			filtered_new = [],
                i,l;

           	if (req) {
                if(req.indexOf(":")!=-1)
			{
				var aReq=req.split(":");
				var caption=aReq[0].toLowerCase();
				req=aReq[1].toLowerCase();
			}

			if(caption=="sex")
			{
				if(YAHOO.util.Dom.get("chkMale").checked && YAHOO.util.Dom.get("chkFeMale").checked)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkMale").checked==false && YAHOO.util.Dom.get("chkFeMale").checked==false)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkMale").checked)
				{
					req="male";
				}
				else if(YAHOO.util.Dom.get("chkFeMale").checked)
				{
					req="female";
				}
			}
                if(caption=="civil")
			{
				if(YAHOO.util.Dom.get("chkFree").checked && YAHOO.util.Dom.get("chkFreed").checked)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkFree").checked==false && YAHOO.util.Dom.get("chkFreed").checked==false)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkFree").checked)
				{
					req="free";
				}
				else if(YAHOO.util.Dom.get("chkFreed").checked)
				{
					req="freed";
				}
			}
			if(caption=="race")
			{
				if(YAHOO.util.Dom.get("chkBranco").checked && YAHOO.util.Dom.get("chkPardo").checked && YAHOO.util.Dom.get("chkPreto").checked && YAHOO.util.Dom.get("chkCabra").checked)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkBranco").checked==false && YAHOO.util.Dom.get("chkPardo").checked==false && YAHOO.util.Dom.get("chkPreto").checked==false && YAHOO.util.Dom.get("chkCabra").checked==false)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkBranco").checked)
				{
					req="branco";
				}
				else if(YAHOO.util.Dom.get("chkPardo").checked)
				{
					req="pardo";
				}
				else if(YAHOO.util.Dom.get("chkPreto").checked)
				{
					req="preto";
				}
				else if(YAHOO.util.Dom.get("chkCabra").checked)
				{
					req="cabra";
				}
			}

if(caption=="marital")
			{
				if(YAHOO.util.Dom.get("chkSingle").checked && YAHOO.util.Dom.get("chkMarried").checked && YAHOO.util.Dom.get("chkWidow").checked)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkSingle").checked==false && YAHOO.util.Dom.get("chkMarried").checked==false && YAHOO.util.Dom.get("chkWidow").checked==false)
				{
					req="";
				}
				else if(YAHOO.util.Dom.get("chkMarried").checked)
				{
					req="married";
				}
				else if(YAHOO.util.Dom.get("chkSingle").checked)
				{
					req="single";
				}
				else if(YAHOO.util.Dom.get("chkWidow").checked)
				{
					req="widow(ed)";
				}
			}

			if(req)
			{
				req = req.toLowerCase();

				if(caption!="sex" && YAHOO.util.Dom.get("chkMale").checked==true && YAHOO.util.Dom.get("chkFeMale").checked==false)
				{
					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].sex.toLowerCase()=="male") 
						{
							filtered.push(data[i]);
						}
					}
					data=filtered;
					if(filtered_new)
					{
						filtered=filtered_new;
					}
					else
					{
						filtered_new=filtered;
						filtered=[];
					}
				}
				if(caption!="sex" && YAHOO.util.Dom.get("chkFeMale").checked==true && YAHOO.util.Dom.get("chkMale").checked==false)
				{
					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].sex.toLowerCase()=="female") 
						{
							filtered.push(data[i]);
						}
					}
					data=filtered;
					if(filtered_new)
					{
						filtered=filtered_new;
					}
					else
					{
						filtered_new=filtered;
						filtered=[];
					}
				}
				if(caption!="race" && YAHOO.util.Dom.get("chkBranco").checked==true && YAHOO.util.Dom.get("chkPardo").checked==false && YAHOO.util.Dom.get("chkPreto").checked==false && YAHOO.util.Dom.get("chkCabra").checked==false)
				{
					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].race.toLowerCase()=="branco") 
						{
							filtered.push(data[i]);
						}
					}
					data=filtered;
					if(filtered_new)
					{
						filtered=filtered_new;
					}
					else
					{
						filtered_new=filtered;
						filtered=[];
					}
				}
				if(caption!="race" && YAHOO.util.Dom.get("chkBranco").checked==false && YAHOO.util.Dom.get("chkPardo").checked==true && YAHOO.util.Dom.get("chkPreto").checked==false && YAHOO.util.Dom.get("chkCabra").checked==false)
				{
					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].race.toLowerCase()=="pardo") 
						{
							filtered.push(data[i]);
						}
					}
					data=filtered;
					if(filtered_new)
					{
						filtered=filtered_new;
					}
					else
					{
						filtered_new=filtered;
						filtered=[];
					}
				}                    
									if(caption!="race" && YAHOO.util.Dom.get("chkBranco").checked==false && YAHOO.util.Dom.get("chkPardo").checked==false && YAHOO.util.Dom.get("chkPreto").checked==false && YAHOO.util.Dom.get("chkCabra").checked==true)
				{
					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].race.toLowerCase()=="cabra") 
						{
							filtered.push(data[i]);
						}
					}
					data=filtered;
					if(filtered_new)
					{
						filtered=filtered_new;
					}
					else
					{
						filtered_new=filtered;
						filtered=[];
					}
				} 

				if(caption=="name")
				{

					for (i = 0, l = data.length; i < l; ++i) {
					if (data[i].name.toLowerCase().indexOf(req)!=-1) {
						filtered.push(data[i]);
					}
				}
				}
			if(caption=="civil")
				{
					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].civil.toLowerCase()==req) 
						{
							filtered.push(data[i]);
						}
					}
				}
       if(caption=="marital")
				{

					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].marital.toLowerCase()==req) 
						{
							filtered.push(data[i]);
						}
					}
				}
				if(caption=="sex")
				{

					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].sex.toLowerCase()==req) 
						{
							filtered.push(data[i]);
						}
					}
				}
                    	if(caption=="race")
				{

					for (i = 0, l = data.length; i < l; ++i) 
					{
						if (data[i].race.toLowerCase()==req) 
						{
							filtered.push(data[i]);
						}
					}
				}

				res.results = filtered;
			}
            }

            return res;
        }
    });

    Ex.cols = [
        {key:"name", label:"Name",sortable:true,width:108},
            {key:"age", label:"Age",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true,width:40},
		{key:"nSlaves", label:"N Slaves",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true,width:40},
		{key:"nKids", label:"N Kids",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true,width:40},
		{key:"nIndividuals", label:"N Individuals",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true,width:60},
            {key:"race", label:"Racial Category",sortable:true,width:110},
		{key:"sex", label:"Sex",sortable:true,width:40},
		{key:"marital", label:"Marital Status",sortable:true,width:80},
		{key:"civil", label:"Civil Status",sortable:true,width:40},
		{key:"family", label:"Family Structure",sortable:true,width:80},
		{key:"occupation", label:"Occupation",sortable:true,width:100}
    ];

    Ex.paginator = new YAHOO.widget.Paginator({
        rowsPerPage   : 10,
        pageLinks     : 10
    });

    Ex.conf = {
        paginator : Ex.paginator,
        sortedBy: {key:'name', dir:YAHOO.widget.DataTable.CLASS_ASC}
    };

    Ex.dataTable = new YAHOO.widget.DataTable('paginated',Ex.cols,Ex.dataSource,Ex.conf);

    Ex.filterTimeout = null;
    Ex.updateFilter  = function (control, caption) {
	// Reset timeout
        Ex.filterTimeout = null;

        // Reset sort
        var sKey = Ex.dataTable.getState();
            sKey.sortedBy = {key:'name', dir:YAHOO.widget.DataTable.CLASS_ASC};

	var val="";
	if(control)
	{
		val= YAHOO.util.Dom.get(control).value;
	}
	var passValue=caption+":"+val;

        // Get filtered data
        Ex.dataSource.sendRequest(passValue,{
            success : Ex.dataTable.onDataReturnInitializeTable,
            failure : Ex.dataTable.onDataReturnInitializeTable,
            scope   : Ex.dataTable,
            argument: caption
        });
    };

    YAHOO.util.Event.on('filter','keyup',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('filter', 'name'),600);
    });
YAHOO.util.Event.on('condition','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('condition', 'civil'),600);
    });
YAHOO.util.Event.on('civil','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('civil', 'marital'),600);
    });

//Sex Area

YAHOO.util.Event.on('chkMale','change',function (e) {
        clearTimeout(Ex.filterTimeout);
		setTimeout(Ex.updateFilter('chkMale', 'sex'),600);

    });
YAHOO.util.Event.on('chkFeMale','change',function (e) {
       clearTimeout(Ex.filterTimeout);
	setTimeout(Ex.updateFilter('chkFeMale', 'sex'),600);
});


// RACE AREA

YAHOO.util.Event.on('chkBranco','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkBranco', 'race'),600);
    });

YAHOO.util.Event.on('chkPardo','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkPardo', 'race'),600);
    });

YAHOO.util.Event.on('chkPreto','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkPreto', 'race'),600);
    });

YAHOO.util.Event.on('chkCabra','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkCabra', 'race'),600);
    });
    
    // Civil AREA

YAHOO.util.Event.on('chkFree','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkFree', 'civil'),600);
    });

YAHOO.util.Event.on('chkFreed','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkFreed', 'civil'),600);
    });
    
        // Marraige AREA

YAHOO.util.Event.on('chkSingle','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkSingle', 'marital'),600);
    });

YAHOO.util.Event.on('chkMarried','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkMarried', 'marital'),600);
    });
    	YAHOO.util.Event.on('chkWidow','change',function (e) {
        clearTimeout(Ex.filterTimeout);
        setTimeout(Ex.updateFilter('chkWidow', 'marital'),600);
    });

});

</script>

<div class="copy fix">
<p>Original Source for the Database:
</p>
<p>
Arquivo Público do Estado da Bahia, Salvador. “Relação de Fogos e Moradores da Freguesia de Santiago Maior do Iguape, da comarca da Vila da Cachoeira,” Seção Provincial e Colonial, maço 6175-1.
</p>
</div>


</div>



	<?php //include (THEME_LIB . '/_contentfooter.php'); ?>
	<div class="clear"></div>
</div>
</div>

 

This is what i have for my code, for some reason i cant get it to allow multiple selections for say marriage or race and output all that is checked, thanks

 

example site is

Link to comment
https://forums.phpfreaks.com/topic/209817-multiple-selection/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.