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

[Haitashi]

<?php
    //phpinfo();
    include_once('json/JSON.php');
$json = new Services_JSON();
 
$con = mysql_connect("localhost","clas_installer","installerpass");
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());
 
 
echo $json->encode($arr)
?>

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!

[acoder]

Do you want to assign a value to the hidden field after you select a option from a drop down?

[gits]

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:

document_ref.getElementById('response').innerHTML 
 

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

[Haitashi]

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:

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

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

[gregerly]

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:

<select name='somename'>
<option value='value1'>Text that will be the dropdown</option>
<option value='value2'>The next option in the drop down</option>
</select>
 

[pbmods]

Heya, Haitashi.

Let's pretend that the AJAX call returns this value:

[{"county":"Autauga County"},{"county":"Someother County"}]
 

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:

<select id="response"></select>
 

Ok. The first thing we have to do is delete anything that's already there:

if(var $select = document.getElementById('response')) {
    //    Remove existing options.
    while($select.firstChild)
        $select.removeChild($select.firstChild);
.
.
.
 

So far so good. Now, to create an option, we'll use the document.createElement method:

.
.
.
    // Parse the response into an object.
    var $response = eval('(' + response + ')');
 
    for(var $entry in $response) {
        var $option = document.createElement('option');
        $option.value = $entry.county;
        $option.text = $entry.county;
 
.
.
.
 

And finally, to display the new option:

.
.
.
        $select.appendChild($option);
    }
}
 

[gits]

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

/**
 * ;) adapt the load-method with an ajax-call ... and use it as it is ...
 * it should work then ... you may try it first without an ajax-call
 * 
 * it has some interesting things in it: oo-javascript, how to handle scope,
 * encapsulated eventhandling (have a look at the util-class _add_event),
 * object-detection instead of browser-detection, ...
 * 
 * successfully tested in: FF 2, IE 6 Win, Safari, Opera 9 
 * :: IE 5 for Mac will not work ;(
 * 
 * good luck ... and kind regards
 */
function CHAINED_MENULISTS(state_container_id, county_container_id, docroot) {
    this.states_list_id   = state_container_id;
    this.counties_list_id = county_container_id;
    this.docroot          = docroot;
    this.util             = new CHAINED_MENULISTS_UTIL;
 
    this.states   = {};
    this.counties = {};
 
    this._load();
}
 
CHAINED_MENULISTS.prototype._load = function() {
    var me = this;
    var response = this.docroot.getElementById('response').innerHTML;
 
    var callback = function(response) {
        var js_response = eval(response);
 
        for (var i in js_response) {
            var row = js_response[i];
 
            if (typeof me.states[row.stateid] == 'undefined') {
                me.states[row.stateid] = {
                    stateid: row.stateid, 
                    state: row.state
                };
            }
 
            if (typeof me.counties[row.countyid] == 'undefined') {
                me.counties[row.countyid] = {
                    countyid: row.countyid,
                    stateid : row.stateid,
                    county  : row.county
                };
            }
        }
 
        me.build_states_list();
    };
 
    // we simulate the call now - when having your ajax-call you may 
    // remove this
    callback(response);
}
 
CHAINED_MENULISTS.prototype.build_states_list = function() {
    var me   = this;
    var list = this.docroot.getElementById(this.states_list_id);
 
    this.clean_up_list(list);
 
    var county_list_built = false;
 
    for (var i in this.states) {
        var row    = this.states[i];
        var option = this.docroot.createElement('option');
 
        option.innerHTML = row.state;
        option.value     = row.stateid;
 
        if (!county_list_built) {
            this.build_county_list(option.value);
            county_list_built = true;
        }
 
        list.appendChild(option);
    }
 
    var _change_handler = function(e) { me.build_county_list_event(e); };
    this.util._add_event(list, 'change', _change_handler);
}
 
// don't know why event gets the gap between n & t ... here in code-view
// note it and correct it in case of using the code (the same for value)
 
CHAINED_MENULISTS.prototype.build_county_list_event = function(e) {
    this.build_county_list(this.util.get_target(e).value);
}
 
CHAINED_MENULISTS.prototype.build_county_list = function(val) {
    var list = this.docroot.getElementById(this.counties_list_id);
 
    this.clean_up_list(list);
 
    for (var i in this.counties) {
        var row    = this.counties[i];
 
        if (row.stateid != val) {
            continue;
        }
 
        var option = this.docroot.createElement('option');
 
        option.innerHTML = row.county;
        option.value     = row.countyid;
 
        list.appendChild(option);
    }
}
 
CHAINED_MENULISTS.prototype.clean_up_list = function(list) {
    var nodes = list.getElementsByTagName('option');
 
    while (nodes.length > 0) {
        var node = nodes[0];
 
        list.removeChild(node);
 
        nodes = list.getElementsByTagName('option');
    }
}
 
function CHAINED_MENULISTS_UTIL() {
}
 
CHAINED_MENULISTS_UTIL.prototype._add_event = function(obj, e, handler) {
    if (typeof window.addEventListener != 'undefined') {
        obj.addEventListener(e, handler, false);
    } else if (typeof window.attachEvent != 'undefined' 
            && typeof document.attachEvent != 'undefined') {
        obj.attachEvent('on' + e, handler);
    } else {
        // in that case we weren't able to attach the event
        // do whatever you want then ;) we give the util here a flag
        // you might ask that later on to respond to it
        this.fatal_abort = true;
    }
}
 
CHAINED_MENULISTS_UTIL.prototype.get_target = function(e) {
    var target = null;
 
    if (typeof e.target != 'undefined') {
        target = e.target.nodeType != 3 ? e.target : e.target.parentNode;
    } else if (typeof e.srcElement != 'undefined') {
        target = e.srcElement;
    }
 
    return target;
}
 

<html>
    <head>
        <title>chained_menulists</title>
        <script type="text/javascript" src="chained_menulists.js"></script>
    </head>
    <body onload="this.lists = new CHAINED_MENULISTS('states', 'counties', document)">
        <form action="">
            <span>
                States
                <select id="states"></select>
            </span>
            <span>
                Counties
                <select id="counties"></select>
            </span>
        </form>
    </body>
</html>
 

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

[gits]

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

[Haitashi]

Gits, thank you SO much for all your help. I really couldn't have done it without you.
^_^

[gits]

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