DaniWeb IT Discussion Community - Storing a selected item into a global variable

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - Storing a selected item into a global variable (http://www.daniweb.com/forums/thread129981.html)

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>        

                <br>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>

                <br>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...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.

Re: Storing a selected item into a global variable

C'mon folks! Can't anyone help?

Re: Storing a selected item into a global variable

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.

Re: Storing a selected item into a global variable

Quote:

Originally Posted by ~s.o.s~ (Post 633023)

Sounds like a good idea.

If I have the following code:

<select id="lstOtherStuff" multiple="multiple" size="6" style="width:200px;">
</select>

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":

<form action="welcome.php" method="post">

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

Re: Storing a selected item into a global variable

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">

    <br><br>

    <input type="submit" onclick="setHidden(this.form);">

  </form>

</body>

</html>