Member Avatar for mgt

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

  • 2 Contributors
  • 4 Replies
  • 944 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by ~s.o.s~
Member Avatar for mgt

C'mon folks! Can't anyone help?

commented: This forum is not 24/7 service, to get anything and anytime time you wish -2
Member Avatar for ~s.o.s~

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.

Member Avatar for mgt

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:


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

Member Avatar for ~s.o.s~

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.