Menu
Hello, I’m currently doing development using a controller and also doing some frontend work with javascript. When I say controller, i refer to something used in Apache’s Catalyst framework, which is based on the MVC architecture.
Basically I am trying to create adjacent drop down menus, Menu1 and Menu2.
If I select something in Menu1, Menu2 will be populated accordingly.
Since in my case, Menu1 was a short list, I hardcoded the list in HTML (yes not so smart). However, Menu2 uses a javascript to have it populated.
HTML excerpt:
[code=html]
<form action=”add_action.html” name=”cat_form”>
…
<select name=’first_category’ class=”input” onChange=”secondDisplay()”>
<option value=”>(Select a Category)</option>
…(categories hardcoded here)
</select>
</td>
<td id=”second_category_td”>
<select name=’second_category’ class=’input’>
<option value=’0′>(Select a Category)</option>
</select>
</td>
</tr>
…
<tr class=’main’ valign=’top’>
<td> </td>
<td><br><input type=’submit’ name=’s’ value=”save” id=”save” class=’button’></td>
</tr>
</table>
</form>
javascript:
[CODE]function secondDisplay(){
var td = document.getElementById(‘second_category_td’);
var select = “<select class=’input’ name=’second_category’ >n”;
var i;
select = select.concat(“<option value=’0′>(Select a Category)</option>n”);
for (i = 0; i < catArray.length; i++) {
if(catArray[i].parent_category_id == document.[%form_name%].first_category.value) {
select = select.concat(“<option value='” + catArray[i].category_id + “‘>” + catArray[i].name + “</option>n”);
}
}
select = select.concat(“</select>n”);
td.innerHTML = select;
}
Here’s my problem… “second_category” doesn’t pass on to my controller and only “first_category” does, although it shows up perfectly on the webpage… anyone know why? And thanks in advance!