Jump to content

Using various # of select boxes instead of a set #

CRypt1k

By CRypt1k
in Javascript Help

Recommended Posts

CRypt1k Newbie

CRypt1k

Posted
Posted

I'm working on this script which work perfect for a set number of select boxes but need some help changing it to work so that I can give the script any number from say 1 to 300 and have it do the same thing to the select boxes. Number of select boxes options needs to equal the number of select boxes.

 

ajax_select_script.php

<script>
function submitSelection()
{
httpObject = getHTTPObject();

select1 = getElement("select_1");
select2 = getElement("select_2");
select3 = getElement("select_3");
select4 = getElement("select_4");
select5 = getElement("select_5");

select1submit = encodeURIComponent(select1.value);
select2submit = encodeURIComponent(select2.value);
select3submit = encodeURIComponent(select3.value);
select4submit = encodeURIComponent(select4.value);
select5submit = encodeURIComponent(select5.value);

//For Debugging purposes
//alert("s1="+select1submit+"&s2="+select2submit+"&s3="+select3submit+"&s4="+select4submit+"&s5="+select5submit);

if (httpObject != null)
    {
	httpObject.open("GET", "load_select.php?s1="+select1submit+"&s2="+select2submit+"&s3="+select3submit+"&s4="+select4submit+"&s5="+select5submit, true);
	httpObject.send(null);
	httpObject.onreadystatechange = 
function() { setOutput("outputID"); }
}
}


function getHTTPObject()
{
    var xhr; 
    try
    {  
        xhr = new ActiveXObject('Msxml2.XMLHTTP');
        return xhr;
    }
catch (e) 
    {
        try
        {   
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
            return xhr;
        }
        catch (e2) 
        {
            try 
            {  
                xhr = new XMLHttpRequest();
                return xhr;
            }
            catch (e3)
            {
                xhr = false;
                return xhr;
        	}
        }
    }
}

function getElement(id)
{
if (document.getElementById)
    {
	// this is the way the standards work
	var elmnt = document.getElementById(id);
}
    else if (document.all)
    {
	// this is the way old msie versions work
	var  elmnt = document.all[id];
}
    else if (document.layers)
    {
	// this is the way nn4 works
	var elmnt = document.layers[id];
}
return elmnt;
}


function setOutput(id)
{
var output = getElement(id);
if(httpObject.readyState == 4)
    {
	output.innerHTML = httpObject.responseText;
}
else if(httpObject.readyState < 4)
{
	output.innerHTML = 
"Loading...readyState_"+httpObject.readyState;
}
//For Debugging purposes
//alert(output.innerHTML);
}

</script>

<br />
<br />
<div id="outputID">
Select1: <select id="select_1" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
</select>   
Select2: <select id="select_2" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
</select>   
Select3: <select id="select_3" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
</select>   
Select4: <select id="select_4" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
</select>   
Select5: <select id="select_5" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
</select>   
</div>
<br />

 

load_select.php

<?php
$select[1] = $_GET['s1'];
$select[2] = $_GET['s2'];
$select[3] = $_GET['s3'];
$select[4] = $_GET['s4'];
$select[5] = $_GET['s5'];

for ($chk_null=1;$chk_null<=5;$chk_null++)
{
if (!isset($select[$chk_null]))
{
	echo "Invalid data";
	exit;
}
}

for ($list=1;$list<=5;$list++)
{
$select_text .= "Select".$list.": <select id='select_".$list."'  onChange='submitSelection()'>\n";
for ($options=0;$options<=5;$options++)
{
	if ($options==0)
	{
		$select_text .= "<option value='-'>-</option>\n";
	}
	else if ($options == $select[$list])
	{
		$select_text .= "<option value='".$options."' selected>".$options."</option>\n";
	}
	else if ($options == $select[1] || $options == $select[2] || $options == $select[3] || $options == $select[4] || $options == $select[5])
	{
		$select_text .= "";
	}
	else
	{
		$select_text .= "<option value='".$options."'>".$options."</option>\n";
	}
}
$select_text .= "</select>   \n";
}
echo $select_text;
?>

 

Hope this make sense to someone. Thnx!

DarkSuperHero Newbie

DarkSuperHero

Posted
Posted

if i understood correctly...look into...

 

document.getElementsByTagName('select');

 

This will return an array of all your 'select' tags in this instance, which will allow for that flexibility in having various select boxes...

 

http://www.w3schools.com/HTMLDOM/met_doc_getelementsbytagname.asp

CRypt1k Newbie

CRypt1k

Posted
  • Author
Posted

I've been working with PHP for a few years now but I haven't play with javascript much at all. Here's what I came up with but none of it works. Can someone tell me what I'm doing wrong?

 

ajax_select_script.php

<script>

function submitSelection()
{
httpObject = getHTTPObject();

var x=document.getElementsByTagName("select");

for(i=0;i<x;i++)
{
	var selectbox[i] = getElement("select_"+i);
}

for(i=0;i<x;i++)
{
	var selectboxsubmited[i] = encodeURIComponent(selectbox[i].value);
}

//For Debugging purposes
//alert("s1="+select1submit+"&s2="+select2submit+"&s3="+select3submit+"&s4="+select4submit+"&s5="+select5submit);

if (httpObject != null)
    {
	var params = "";
	for(i=0;i<x;i++)
	{
		var params += "s"+i+"="+selectboxsubmited[i]+"&";
	}
	httpObject.open("GET", "load_select.php?"+params, true);
	httpObject.send(null);
	httpObject.onreadystatechange = function() { setOutput("outputID"); }
}
}


function getHTTPObject()
{
    var xhr; 
    try
    {  
        xhr = new ActiveXObject('Msxml2.XMLHTTP');
        return xhr;
    }
catch (e) 
    {
        try
        {   
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
            return xhr;
        }
        catch (e2) 
        {
            try 
            {  
                xhr = new XMLHttpRequest();
                return xhr;
            }
            catch (e3)
            {
                xhr = false;
                return xhr;
        	}
        }
    }
}

function getElement(id)
{
if (document.getElementById)
    {
	// this is the way the standards work
	var elmnt = document.getElementById(id);
}
    else if (document.all)
    {
	// this is the way old msie versions work
	var  elmnt = document.all[id];
}
    else if (document.layers)
    {
	// this is the way nn4 works
	var elmnt = document.layers[id];
}
return elmnt;
}


function setOutput(id)
{
var output = getElement(id);
if(httpObject.readyState == 4)
    {
	output.innerHTML = httpObject.responseText;
}
else if(httpObject.readyState < 4)
{
	output.innerHTML = 
"Loading...readyState_"+httpObject.readyState;
}
//For Debugging purposes
//alert(output.innerHTML);
}

</script>

<br />
<br />
<div id="outputID">
Select1: <select id="select_1" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
  <option value ="6">6</option>
</select>   
Select2: <select id="select_2" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
  <option value ="6">6</option>
</select>   
Select3: <select id="select_3" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
  <option value ="6">6</option>
</select>   
Select4: <select id="select_4" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
  <option value ="6">6</option>
</select>   
Select5: <select id="select_5" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
  <option value ="6">6</option>
</select>   
Select6: <select id="select_6" onChange="submitSelection()">
  <option value ="0">-</option>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
  <option value ="6">6</option>
</select>   
</div>
<br />

 

load_select.php

<script>
function getNumElements()
{
var x=document.getElementsByTagName("select");
return(x.length);
}
</script>

<?php
select_num = getNumElements();
for ($i=1;$i<=$select_num;$i++)
{
$select[$i] = $_GET['s'.$i];
}

for ($chk_null=1;$chk_null<=5;$chk_null++)
{
if (!isset($select[$chk_null]))
{
	echo "Invalid data";
	exit;
}
}

for ($list=1;$list<=$select_num;$list++)
{
$select_text .= "Select".$list.": <select id='select_".$list."'  onChange='submitSelection()'>\n";
for ($options=0;$options<=5;$options++)
{
	if ($options==0)
	{
		$select_text .= "<option value='-'>-</option>\n";
	}
	else if ($options == $select[$list])
	{
		$select_text .= "<option value='".$options."' selected>".$options."</option>\n";
	}
	else if ($options == $select[1] || $options == $select[2] || $options == $select[3] || $options == $select[4] || $options == $select[5])
	{
		$select_text .= "";
	}
	else
	{
		$select_text .= "<option value='".$options."'>".$options."</option>\n";
	}
}
$select_text .= "</select>   \n";
}
echo $select_text;
?>

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.