How to populate HTML select list using javascript - php

Question

I'm pretty new to HTML and javascript. I know this code already exist on internet but I can't have it working for me. I'm stuck on this issue for 2-3 days. I would be really glad if you could help me out.
Here is my problem
I want to populate the optCategory select list based on the selected entry of optPostAppliedFor. For that I called a function change_categoriees(key) when I click the optPostAppliedFor list. The code is here as follows
<tr>
<td width="40%" align="right" nowrap>
<strong>
Post Applied for<span class="text11red">*</span> :
</strong>
</td>
<td width="60%">
<select name="optPostAppliedFor" class="flat" onclick="change_categories(0);" />
<option value="">--Select--</option>
<?php
foreach($App['post_applied_for'] as $key => $val){
echo '<option value="'.($key).'">'.$val.'</option>';
}
?>
</select>
</td>
</tr>
Here is php code for default enteries of optPostAppliedFor and optCategory
$App['post_applied_for'] = array(
'Lecturer' => 'Lecturer',
'Business Analyst' => 'Business Analyst',
'Deepender good' => 'Deepender good'
);
$App['category'] = array(
'Category1' => 'Category1',
'Category2' => 'Category2',
'Category3' => 'Category3'
);
Please tell me how can I make this function, so that my purpose is achieved. I tried this but all in vain.
function change_categoriees(key) {
alert('asdasd');
var z = document.getElementById('optCategory');
var x = document.getElementById('optPostAppliedFor');
var y = document.createElement('option');
var display = x.options[x.selectedIndex].text;
var option = x.options[x.selectedIndex].value;
y.text = display;
y.value = option;
try {
z.add(y,null);
} catch(ex) {
z.add(y);
}
z.options[0].text = '* '+(z.length-1)+' selected *';
}

Answer 1

I'm not really sure, but...
These two lines in your change_categoriees method look problematic:
var z = document.getElementById('optCategory');
var x = document.getElementById('optPostAppliedFor');
For these statements to return some value, your HTML needs to have id attributes with the names optCategory and optPostAppliedFor:
<select id="optPostAppliedFor">
Also note that the PHP code runs on the back end, in the server. There's no way that the javascript running in the browser can call PHP directly.

Answer 2

If I interpret your code correctly, you do have a slight problem : you're putting variable in the PHP code, that you'd like the client (the browser) to use. It's not the way it works. Variable in PHP are only stored on the server-side. So the Javascript (which is on the browser side) cannot use it in any way, if you only store them as variables : they'll be on the server memory, not on the client's. There are two solutions here :
1°) You put the variable you're going to use in the web page that PHP generates. You could go with hidden fields, for instance, and then "unhide" the relevant fields. But if you got a lot of variables, it's not very practical.
2°) You could go with an AJAX solution : basically, the idea is that through Javascript, you call a PHP script that is going to send back information (formatted as pure text, XML or JSON). Here, when the user clicks on the first list, you send a request (POST or GET) where you'll inform the server about the choice of the user. For instance, you'll ask for the categories connected to the "Business Analyst" choice. The PHP script we'll analyse the "post applied for" and send the content of the category list accordingly. Since everything is done through Javascript & PHP, the page will not be reloaded during this time, so it's relatively fluid.
I would recommend the use of a Javascript library to make things a bit easier. JQuery being one of the most popular choice, you will find a lot of help and example on the web.

Answer 3

May be you are searching for AJAX methods? E.g. you send request to some of your PHP files with GET or POST variable for your key (which user selects in optPostAppliedFor) and that PHP script echo'es the needed result, so JS could use it.
For example, with jQuery this would look like this:
$("select[name=optCategory]").load("myUberScript.php", { key: $("select[name=optPostAppliedFor]").attr("selected") });
myUberScript.php:
<?php
$key = $_POST['key'];
if (isset($key))
{
if ($key == 'moo')
echo "<option>moo</option>"; else
if ($key == 'foo')
echo "<option>foo</option>";
}
?>
I think this would be the best way, but i'm really not sure with my .attr("selected") selector. And i recommend you to read something 'bout AJAX and jQuery - these are very useful when web-developing =)
So, what does this JS do? It finds your select tag with name optPostAppliedFor, gets all its 'selected' items (be sure to verify that code - i am not sure about it), sends POST request to myUberScript.php passing that values as $_POST['key'] argument, gets response, finds div named optCategory and sets its inner HTML code to PHP's response. Pretty nice, huh? =)
I recommend this way beacause it is not always good for user to get all the internal data within javascript - user could see that data and if there is a lot of data, the page would load slooowly. Second: you can manage/edit/update/modify (choose the right one) your PHP code whenever you want. Third: PHP code has more features for secure verifying user' data and lots more. But there is one great disadvantage: if user disables JS support in his browser, you would not be able to do this sort of trick. Notice: this is a very rare case when user disables JS =)

Answer 4

As a first problem, in your PHP code, you improperly close the select tag, like this,
<select ... />
...
</select>
That will probably cause some errors. It should be like this, without the extra /,
<select ... >
...
</select>
As another problem, you spell your function call like this,
onclick="change_categories(0);"
but you misspell your function name like this,
function change_categoriees(key) {...}
Notice the extra "e" in "categoriees". So you're not actually calling the function properly.
It looks like other people have some answers too, so I'll just finish by offering some suggestions for dev tools and documentation. For development tools, Firefox Firebug is excellent, it will let you debug css, html, and javascript. I've also heard good things about the development tools in Chrome. In fact, all the newest browser versions have development tools of some sort, and they're all pretty good.
Next, the Mozilla docs are a good resource for web-development. You might also be interested in checking out the resources mentioned at w3fools.com.
Also, in the future, when sharing code on Stack Overflow, you should consider sharing a live example with jsFiddle.
Oh wait, before I forget, you should also use a text editor or an IDE that does syntax highlighting, and maybe even syntax correction, for you. I use a simple text-editor called Notepad++ for Windows, though there are many others.