Jump to content

Using various # of select boxes instead of a set #

CRypt1k

By CRypt1k
in Javascript Help

 Share

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!

Link to comment
Share on other sites
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;
?>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.