How to send more than one value to JavaScript using selection?

Question

I am currently building a small entry form where a user will enter in a subcategory under a business unit category. On the main php page there is a table. The first prompts the user to select a business unit via a drop down. I have a JS function which takes the value, and passes it to another page which then prompts the user to make another selection. The user can select to add a subcategory, or update an existing subcategory. I want to use the same onchange event to send both the value from the second drop down, along with the variable passed from the previous page. See code below.

$get_bus=$_GET['bus_id'];
$get_cat=mysql_query("SELECT subcat_id, subcat_name FROM subcategories WHERE bus_id='{$get_bus}' ORDER BY subcat_name ASC");
$dept_count = mysql_num_rows($get_cat);

if($dept_count==true)
{
echo'
<select id="subcat" name="subcat" class="textinput1" style="width:175px; height: 25px;" tabindex="8" onchange="showSubCategoryThree(this.value);" onfocus="showSubCategoryThree(this.value);" >
<option value = "">Select </option>
<option value = "Add">Add Subcategory</option>
<optgroup label="Update Subcategory Name"></optgroup>
';
while(($cat =  mysql_fetch_assoc($get_cat)))
{
    echo '
    <option value="'.$cat['subcat_id'].'">'.$cat['subcat_name'].'</option>
    ';
}
echo '
</select>
</div>
';
}

Below is my current JavaScript code. Please advise on if it possible to send $get_bus along with this.value.

 function showSubCategoryThree(cat_id)
 {
 if (subcat_id=="")
 {
   document.getElementById("DeptContainer").innerHTML="";
   return;
 } 
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
   document.getElementById("DeptContainer").innerHTML=xmlhttp.responseText;
 }
 }
 xmlhttp.open("GET","/includes/adminPages/selectCatDept.php?cat_id="+cat_id,true);
 xmlhttp.send();
 }

Answer 1

I recommend constructing an object (an array, for instance) of variables that you want to be used in the back-end.

I also recommend using POST, instead of GET, since it's (for many reasons, including easy manipulating in URL) more secure (nothing is secure enough without a high lvl SSL though, and validations of some sorts).

I normally use jQuery and AJAX to perform this behavior, something like this would do:

$.ajax(
{
    // Post select to url.
    type : 'post',
    url : 'url/script.php',
    dataType : 'json', // expected returned data format.
    data : 
    {
        'selectedValueOne' : value1, // the variable 1 you're posting.
        'selectedValueTwo' : value2 // the variable 1 you're posting.
    },
    success : function(data)
    {
         // Handle what happens after the success, you CAN parse the data object, if you returned an object to work with.
    },
    complete : function(data)
    {
        // do something, Optional.
    }
});

You can do this without the jQuery specific notation.

In the backend you can access the variables like this:

$var1 = isset($_POST['selectedValueOne']) ? $_POST['selectedValueOne'] : '';
$var2 = isset($_POST['selectedValueTwo']) ? $_POST['selectedValueTwo'] : '';

Answer 2

Sure it is, change the PHP to this:

echo'
<select id="subcat" name="subcat" class="textinput1" style="width:175px; height: 25px;" tabindex="8" onchange="showSubCategoryThree(this.value,'.$get_bus.');" onfocus="showSubCategoryThree(this.value,'.$get_bus.');" >
<option value = "">Select </option>
<option value = "Add">Add Subcategory</option>
<optgroup label="Update Subcategory Name"></optgroup>
';

And the javascript function definition to this:

 function showSubCategoryThree(cat_id, get_bus_value) {