AJAX

Storing a selected item into a global variable

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2008

Posts: 11

Reputation: mgt is an unknown quantity at this point

Solved Threads: 0

mgt

Offline

Newbie Poster

Storing a selected item into a global variable

Jun 18th, 2008

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

 Help with Code Tags 
 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:

 Help with Code Tags 
 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

•

Join Date: Jun 2008

Posts: 11

Reputation: mgt is an unknown quantity at this point

Solved Threads: 0

mgt

Offline

Newbie Poster

Re: Storing a selected item into a global variable

-1

Jun 19th, 2008

C'mon folks! Can't anyone help?

•

Join Date: Jun 2006

Posts: 7,609

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 464

~s.o.s~

Offline

Failure as a human

Re: Storing a selected item into a global variable

Jun 23rd, 2008

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.

I don't accept change; I don't deserve to live.

•

Join Date: Jun 2008

Posts: 11

Reputation: mgt is an unknown quantity at this point

Solved Threads: 0

mgt

Offline

Newbie Poster

Re: Storing a selected item into a global variable

Jun 24th, 2008

•

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.

•

Join Date: Jun 2006

Posts: 7,609

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 464

~s.o.s~

Offline

Failure as a human

Re: Storing a selected item into a global variable

Jun 24th, 2008

Here is a sample script (untested):

 Help with Code Tags 
 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>

I don't accept change; I don't deserve to live.

Quick Reply to Thread

Show Printable Version

Other Threads in the JavaScript / DHTML / AJAX Forum

Previous Thread: Need help with form submission
Next Thread: Onclick to pass a variable to a PHP script

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes