Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 5044

Jun 18th, 2008

Storing a selected item into a global variable

Expand Post »

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

JavaScript Syntax (Toggle Plain Text)
/* 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]));
        }
      }
    }
  }
}
/* 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 Syntax (Toggle Plain Text)
<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>
<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<b></b>:selectAll('lstStuff', true);">all</a> |
		<a href="javascript<b></b>:selectAll('lstStuff', false);">none</a>
		<p>
		<select id="lstOtherStuff" multiple="multiple" size="6" style="width:200px;">
		</select>
		<br>Select: 
		<a href="javascript<b></b>:selectAll('lstOtherStuff', true);">all</a> |
		<a href="javascript<b></b>: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.

Last edited by peter_budo; Jun 20th, 2008 at 9:18 am. Reason: Keep It Organized - please use [code] tags

mgt

Reputation Points: 8

Solved Threads: 0

Light Poster

Offline

28 posts
since Jun 2008

Permalink

Jun 19th, 2008

-1

Re: Storing a selected item into a global variable

C'mon folks! Can't anyone help?

mgt

Reputation Points: 8

Solved Threads: 0

Light Poster

Offline

28 posts
since Jun 2008

Permalink

Jun 23rd, 2008

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.

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 719

Failure as a human

Offline

8,871 posts
since Jun 2006

Permalink

Jun 24th, 2008

Re: Storing a selected item into a global variable

Click to Expand / Collapse Quote originally posted by ~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.

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.

mgt

Reputation Points: 8

Solved Threads: 0

Light Poster

Offline

28 posts
since Jun 2008

Permalink

Jun 24th, 2008

Re: Storing a selected item into a global variable

Here is a sample script (untested):

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!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>
<!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>

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 719

Failure as a human

Offline

8,871 posts
since Jun 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Need help with form submission

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Onclick to pass a variable to a PHP script

DaniWeb Message

Cancel Changes

User Name
Password