By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,442 Members | 1,319 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,442 IT Pros & Developers. It's quick & easy.

How can I assign value to a hidden field from a select?

Haitashi
P: 96
Expand|Select|Wrap|Line Numbers
  1. <?php
  2.     //phpinfo();
  3.     include_once('json/JSON.php');
  4. $json = new Services_JSON();
  5.  
  6. $con = mysql_connect("localhost","clas_installer","installerpass");
  7. if (!$con)
  8.   {
  9.   die('Could not connect: ' . mysql_error());
  10.   }
  11.  
  12. $selected = mysql_select_db("clas_registration",$con) 
  13.     or die("Could not select registration");
  14.  
  15. $arr = array();
  16. $rs = mysql_query("SELECT county FROM cities_counties WHERE stateabbreviation='AL' ORDER BY county");
  17.  
  18. while($obj = mysql_fetch_object($rs)) {
  19.     $arr[] = $obj;
  20.  } 
  21.            echo (mysql_error());
  22.  
  23.  
  24. echo $json->encode($arr)
  25. ?>
After I use JSON on the result of the query I want to assign it to a hidden field. How can I code that? THANKS!
Jun 25 '07 #1
Share this Question
Share on Google+
9 Replies


acoder
Expert Mod 15k+
P: 16,027
Do you want to assign a value to the hidden field after you select a option from a drop down?
Jun 25 '07 #2

gits
Expert Mod 5K+
P: 5,390
hi ...

good preparation for later ajax-calls ... use phps print to write the json-string enclosed in a regular input-field type='hidden' with an id lets say 'response' ... into your document, then you may retrieve the json-string for example with:

Expand|Select|Wrap|Line Numbers
  1. document_ref.getElementById('response').innerHTML 
  2.  
kind regards ...

ps: and in case you want to use our 'secretly' ;) developed menulist-js-object ... it would be better to create a sql that retrieves all data at once ... so we avoid server-turn-arounds for every option that causes page-reloads when not using ajax ... so we store the data in our hidden field ... when it works ... we may publish the solution here ... i think its a common task and then it may be that it will be much improved with the help of the guys here ;)
Jun 25 '07 #3

Haitashi
P: 96
Ok.

I changed it to this:
[PHP]include_once('json/JSON.php');
$json = new Services_JSON();

$con = mysql_connect("localhost","clas_installer","instal lerpass");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

$selected = mysql_select_db("clas_registration",$con)
or die("Could not select registration");

$arr = array();
$rs = mysql_query("SELECT county FROM cities_counties WHERE stateabbreviation='AL' ORDER BY county");

while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo (mysql_error());


$response = $json->encode($arr)[/PHP]

I print the $response variable like this:
Expand|Select|Wrap|Line Numbers
  1. <input type="text" id="response" value="<?php print $response?>">
Now all I see is a textbox with the characters: [{ in it

And yes, I want to change that textbox to a dropdown menu.

But if I change the input type to this:
Expand|Select|Wrap|Line Numbers
  1. <select id="response" value="<?php print $response?>"></select>
then nothing comes up.


The [{ are from the result of the query: the first like reads: [{"county":"Autauga County"},...

So, the query is working fine. How can I make a dropdown out of that result? [{"county":"Autauga County"},
Jun 25 '07 #4

gregerly
Expert 100+
P: 192
The HTML select element needs options. I don't do much with JSON, so I'm not exactly sure what the proper corse of action would be, but you need to loop thru the results of your PHP query, and echo out OPTIONS such as:

Expand|Select|Wrap|Line Numbers
  1. <select name='somename'>
  2. <option value='value1'>Text that will be the dropdown</option>
  3. <option value='value2'>The next option in the drop down</option>
  4. </select>
  5.  
Jun 25 '07 #5

pbmods
Expert 5K+
P: 5,821
Heya, Haitashi.

Let's pretend that the AJAX call returns this value:
Expand|Select|Wrap|Line Numbers
  1. [{"county":"Autauga County"},{"county":"Someother County"}]
  2.  
I always was one for descriptive naming conventions :)

Anyway, let's also assume that we have a select with an id of 'response' that we want to alter:

Expand|Select|Wrap|Line Numbers
  1. <select id="response"></select>
  2.  
Ok. The first thing we have to do is delete anything that's already there:
Expand|Select|Wrap|Line Numbers
  1. if(var $select = document.getElementById('response')) {
  2.     //    Remove existing options.
  3.     while($select.firstChild)
  4.         $select.removeChild($select.firstChild);
  5. .
  6. .
  7. .
  8.  
So far so good. Now, to create an option, we'll use the document.createElement method:

Expand|Select|Wrap|Line Numbers
  1. .
  2. .
  3. .
  4.     // Parse the response into an object.
  5.     var $response = eval('(' + response + ')');
  6.  
  7.     for(var $entry in $response) {
  8.         var $option = document.createElement('option');
  9.         $option.value = $entry.county;
  10.         $option.text = $entry.county;
  11.  
  12. .
  13. .
  14. .
  15.  
And finally, to display the new option:
Expand|Select|Wrap|Line Numbers
  1. .
  2. .
  3. .
  4.         $select.appendChild($option);
  5.     }
  6. }
  7.  
Jun 26 '07 #6

gits
Expert Mod 5K+
P: 5,390
hey ...

we use a encapsulated js-control for building the menulists it works the following way - and at the moment we try to avoid an ajax-call ... since the page goes its way through php already ... and the idea is to simulate the json-response through writing the json-string into a hidden field (with id="response") from where the CHAINED_MENULISTs _load-method can retrieve the data that can be evaluated ... we use the following code ... that works really slick ;) ... its a lot of code for the purpose but it works for itself and handles its own events too ;) have a look at the simple usage in the html-code ;)

Expand|Select|Wrap|Line Numbers
  1. /**
  2.  * ;) adapt the load-method with an ajax-call ... and use it as it is ...
  3.  * it should work then ... you may try it first without an ajax-call
  4.  * 
  5.  * it has some interesting things in it: oo-javascript, how to handle scope,
  6.  * encapsulated eventhandling (have a look at the util-class _add_event),
  7.  * object-detection instead of browser-detection, ...
  8.  * 
  9.  * successfully tested in: FF 2, IE 6 Win, Safari, Opera 9 
  10.  * :: IE 5 for Mac will not work ;(
  11.  * 
  12.  * good luck ... and kind regards
  13.  */
  14. function CHAINED_MENULISTS(state_container_id, county_container_id, docroot) {
  15.     this.states_list_id   = state_container_id;
  16.     this.counties_list_id = county_container_id;
  17.     this.docroot          = docroot;
  18.     this.util             = new CHAINED_MENULISTS_UTIL;
  19.  
  20.     this.states   = {};
  21.     this.counties = {};
  22.  
  23.     this._load();
  24. }
  25.  
  26. CHAINED_MENULISTS.prototype._load = function() {
  27.     var me = this;
  28.     var response = this.docroot.getElementById('response').innerHTML;
  29.  
  30.     var callback = function(response) {
  31.         var js_response = eval(response);
  32.  
  33.         for (var i in js_response) {
  34.             var row = js_response[i];
  35.  
  36.             if (typeof me.states[row.stateid] == 'undefined') {
  37.                 me.states[row.stateid] = {
  38.                     stateid: row.stateid, 
  39.                     state: row.state
  40.                 };
  41.             }
  42.  
  43.             if (typeof me.counties[row.countyid] == 'undefined') {
  44.                 me.counties[row.countyid] = {
  45.                     countyid: row.countyid,
  46.                     stateid : row.stateid,
  47.                     county  : row.county
  48.                 };
  49.             }
  50.         }
  51.  
  52.         me.build_states_list();
  53.     };
  54.  
  55.     // we simulate the call now - when having your ajax-call you may 
  56.     // remove this
  57.     callback(response);
  58. }
  59.  
  60. CHAINED_MENULISTS.prototype.build_states_list = function() {
  61.     var me   = this;
  62.     var list = this.docroot.getElementById(this.states_list_id);
  63.  
  64.     this.clean_up_list(list);
  65.  
  66.     var county_list_built = false;
  67.  
  68.     for (var i in this.states) {
  69.         var row    = this.states[i];
  70.         var option = this.docroot.createElement('option');
  71.  
  72.         option.innerHTML = row.state;
  73.         option.value     = row.stateid;
  74.  
  75.         if (!county_list_built) {
  76.             this.build_county_list(option.value);
  77.             county_list_built = true;
  78.         }
  79.  
  80.         list.appendChild(option);
  81.     }
  82.  
  83.     var _change_handler = function(e) { me.build_county_list_event(e); };
  84.     this.util._add_event(list, 'change', _change_handler);
  85. }
  86.  
  87. // don't know why event gets the gap between n & t ... here in code-view
  88. // note it and correct it in case of using the code (the same for value)
  89.  
  90. CHAINED_MENULISTS.prototype.build_county_list_event = function(e) {
  91.     this.build_county_list(this.util.get_target(e).value);
  92. }
  93.  
  94. CHAINED_MENULISTS.prototype.build_county_list = function(val) {
  95.     var list = this.docroot.getElementById(this.counties_list_id);
  96.  
  97.     this.clean_up_list(list);
  98.  
  99.     for (var i in this.counties) {
  100.         var row    = this.counties[i];
  101.  
  102.         if (row.stateid != val) {
  103.             continue;
  104.         }
  105.  
  106.         var option = this.docroot.createElement('option');
  107.  
  108.         option.innerHTML = row.county;
  109.         option.value     = row.countyid;
  110.  
  111.         list.appendChild(option);
  112.     }
  113. }
  114.  
  115. CHAINED_MENULISTS.prototype.clean_up_list = function(list) {
  116.     var nodes = list.getElementsByTagName('option');
  117.  
  118.     while (nodes.length > 0) {
  119.         var node = nodes[0];
  120.  
  121.         list.removeChild(node);
  122.  
  123.         nodes = list.getElementsByTagName('option');
  124.     }
  125. }
  126.  
  127. function CHAINED_MENULISTS_UTIL() {
  128. }
  129.  
  130. CHAINED_MENULISTS_UTIL.prototype._add_event = function(obj, e, handler) {
  131.     if (typeof window.addEventListener != 'undefined') {
  132.         obj.addEventListener(e, handler, false);
  133.     } else if (typeof window.attachEvent != 'undefined' 
  134.             && typeof document.attachEvent != 'undefined') {
  135.         obj.attachEvent('on' + e, handler);
  136.     } else {
  137.         // in that case we weren't able to attach the event
  138.         // do whatever you want then ;) we give the util here a flag
  139.         // you might ask that later on to respond to it
  140.         this.fatal_abort = true;
  141.     }
  142. }
  143.  
  144. CHAINED_MENULISTS_UTIL.prototype.get_target = function(e) {
  145.     var target = null;
  146.  
  147.     if (typeof e.target != 'undefined') {
  148.         target = e.target.nodeType != 3 ? e.target : e.target.parentNode;
  149.     } else if (typeof e.srcElement != 'undefined') {
  150.         target = e.srcElement;
  151.     }
  152.  
  153.     return target;
  154. }
  155.  
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>chained_menulists</title>
  4.         <script type="text/javascript" src="chained_menulists.js"></script>
  5.     </head>
  6.     <body onload="this.lists = new CHAINED_MENULISTS('states', 'counties', document)">
  7.         <form action="">
  8.             <span>
  9.                 States
  10.                 <select id="states"></select>
  11.             </span>
  12.             <span>
  13.                 Counties
  14.                 <select id="counties"></select>
  15.             </span>
  16.         </form>
  17.     </body>
  18. </html>
  19.  
have a look at the load-method ... its very simple to adapt it with an ajax-call - simply use the callback in case of successful response ... and you may simply extend it in any way ...

kind regards ...
Jun 26 '07 #7

gits
Expert Mod 5K+
P: 5,390
and it is working online now ;) ... some tweaks are evident:

- we should remove the hidden div that stores the data temporary ... when our object is loaded we don't need it any longer ... that will clean up the page-source

- may be we may sort the data or allow to have them sorted per list ... would be a new feature ;)

- the object is cool besides the advantages mentioned earlier ;) - when we have the instance loaded we may pass it to all pages that need this widget ... so we may avoid requests for the same data

kind regards ...
Jul 1 '07 #8

Haitashi
P: 96
Gits, thank you SO much for all your help. I really couldn't have done it without you.
^_^
Jul 13 '07 #9

gits
Expert Mod 5K+
P: 5,390
Gits, thank you SO much for all your help. I really couldn't have done it without you.
^_^
you are always welcome to ask more questions ;) ... glad to be able to help you ...

kind regards
Jul 14 '07 #10

Post your reply

Sign in to post your reply or Sign up for a free account.