Storing a selected item into a global variable

An item is selected from a list and then used as a variable in a PHP script to identify and retrieve some data from a specific record in a MySQL database.

Here's the code for the select script (first a javascript external file, then an html file) :

/* This is placed in an external file, addingOptions.js */

var otherStuff = {
   "item 1" : [ "subitem 1.1", "subitem 1.2", "subitem 1.3", "subitem 1.4" ],
   "item 2" : [ "subitem 2.1", "subitem 2.2" ],
   "item 4" : [ "subitem 4" ],
   "item 6" : [ "subitem 6.1", "subitem 6.2" ]
};

function selectAll(listName, selected) {
  var listBox = document.getElementById(listName);
  for(i=0; i<listBox.length; i++) {
    listBox.options[i].selected=selected;
  }
  if( listBox.onchange ) {
    listBox.onchange();
  }
}

function lstStuff_OnChange() {
  var listBox = document.getElementById("lstStuff");
  var subListBox = document.getElementById("lstOtherStuff");
  subListBox.options.length=0;
  for(i=0; i<listBox.length; i++) {
    if( listBox.options[i].selected ) {
      var key = listBox.options[i].text;
      if(otherStuff[key]) {
        for(j=0; j<otherStuff[key].length; j++) {
        subListBox.options.add(new Option(otherStuff[key][j],otherStuff[key][j]));
        }
      }
    }
  }
}

Here's the main .html code/file:

<html>
<head>

<script type="text/javascript" src="addingOptions.js"></script>

</head>

<body>
<form>
		<select id="lstStuff" multiple="multiple" onChange="lstStuff_OnChange()" size="6" style="width:200px;">
 			<option>item 1</option>
 			<option>item 2</option>
 			<option>item 3 (No Sub-Items)</option>
 			<option>item 4</option>
 			<option>item 5 (No Sub-Items)</option>
 			<option>item 6</option>			
		</select>	
		Select: 
		<a href="javascript:selectAll('lstStuff', true);">all</a> |
		<a href="javascript:selectAll('lstStuff', false);">none</a>
		<p>
		<select id="lstOtherStuff" multiple="multiple" size="6" style="width:200px;">
		</select>
		Select: 
		<a href="javascript:selectAll('lstOtherStuff', true);">all</a> |
		<a href="javascript:selectAll('lstOtherStuff', false);">none</a>
</form>


</body>

</html>

URL for script above: http://javascript.internet.com/forms/adding-options-2.html

You'll notice that this produces two select boxes, one with categories and one with subcategories. I'd like to be able to store the selection of a subcategory (by an end user) into a variable (I'm guessing a global variable, since I want to pass it on to a PHP script) and then take that variable and use it in a PHP script, within the main html file, in order to identify a particular record within a MySQL database.

How do I do this?

Any assistance will be greatly appreciated and I'll be happy to publish the final complete code once I get this thing to work.

mgt

Light Poster

28 posts since Jun 2008

Reputation Points: 8

Solved Threads: 0

3 Years Ago

Show Comments

-1

C'mon folks! Can't anyone help?

mgt

Light Poster

28 posts since Jun 2008

Reputation Points: 8

Solved Threads: 0

3 Years Ago

Keep a hidden form element on your page which will be populated / updated whenever the user submits the form / changes the value of the secondary drop down. This hidden field can then be read using PHP at the server in the same way you read normal text fields.

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 733

3 Years Ago

Keep a hidden form element on your page which will be populated / updated whenever the user submits the form / changes the value of the secondary drop down. This hidden field can then be read using PHP at the server in the same way you read normal text fields.

Sounds like a good idea.

If I have the following code:

and I need to pass the variable (an element in an array), "1stOtherStuff", to a PHP script, how do I do that? You mentioned putting it in a hidden form element....can you provide the syntax please?

If I use the following code, I can access the file "welcome.php":

Id like to also use an "onclick" command to initiate the action.

mgt

Light Poster

28 posts since Jun 2008

Reputation Points: 8

Solved Threads: 0

3 Years Ago

Here is a sample script (untested):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv"Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Example</title>
    <script type="text/javascript">
    // This function sets the hidden field value to the value of the drop
    // down contents in the form of comma separated values. Read this 
    // hidden variable at teh server just like any normal form field, parse
    // it and pick out its contents.
    function setHidden(frm) {
      if(!frm) {
        return;
      }
      var selBox = frm.elements["sel"];
      var selValue = "";
      for(var i = 0, maxI = selBox.options.length; i < maxI; ++i) {
        var opt = selBox.options[i];
        if(opt.selected) {
          selValue += opt.value + ",";
        }
      }      
      var hiddenElem = frm.elements["hiddenParam"];
      hiddenElem.value = selValue;
      window.alert("The value to be submitted is: " + selValue);
      frm.submit();
    }
    </script>
</head>
<body>
  <form id="frm" name="frm" action="#">
    <select name="sel" id="sel" multiple="multiple">
      <option value="one">1</option>
      <option value="two">2</option>
      <option value="three">3</option>
      <option value="four">4</option>
    </select>
    <input type="hidden" name="hiddenParam" id="hiddenParam">
    
    <input type="submit" onclick="setHidden(this.form);">
  </form>
</body>
</html>

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 733

This article has been dead for over three months

You