the following script allows the user to select fields in a database. the selection follows the database tree, ie database/table/field.
it all works as expected except for one issue. after selecting table, the fields are displayed but the table selection jumps back to the first option. this makes it impossible to select tables.
i'm a javascript novice so this might be real simple. i hope it is...
Code:
<?php
print_r($_POST);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<script type="text/javascript">
function setOptions(chosenDb, chosenTbl){
var selbox1 = document.formName.table;
selbox1.options.length = 0;
var selbox2 = document.formName.searchfield;
selbox2.options.length = 0;
var selbox3 = document.formName.searchorder;
selbox3.options.length = 0;
if (chosenDb == " ") {
selbox1.options[selbox1.options.length] = new Option('No database selected',' ');
selbox2.options[selbox2.options.length] = new Option('No database selected',' ');
selbox3.options[selbox3.options.length] = new Option('No database selected',' ');
}
if (chosenDb == "1") {
selbox1.options[selbox1.options.length] = new Option('table one, choise one','1');
selbox1.options[selbox1.options.length] = new Option('table one, choise two','2');
selbox1.options[selbox1.options.length] = new Option('table one, choise three','3');
selbox1.options[selbox1.options.length] = new Option('table one, choise four','4');
selbox1.options[selbox1.options.length] = new Option('table one, choise five','5');
selbox2.options[selbox2.options.length] = new Option('table one, choise one','oneone');
selbox2.options[selbox2.options.length] = new Option('table one, choise two','onetwo');
selbox3.options[selbox3.options.length] = new Option('table one, choise one','onetwo');
selbox3.options[selbox3.options.length] = new Option('table one, choise two','onetwo3131e');
if (chosenTbl == " ") {
document.getElementById("checkbox1").innerHTML= "text not set";
document.getElementById("checkbox2").innerHTML= "text not set";
}
if (chosenTbl == "1") {
document.getElementById("checkbox1").innerHTML= "text 1";
document.getElementById("checkbox2").innerHTML= "text 1";
}
if (chosenTbl == "2") {
document.getElementById('checkbox1').innerHTML= '<input type="checkbox" name="chkbx1[field1]" value="korv1" />';
document.getElementById("checkbox2").innerHTML= '<input type="checkbox" name="chkbx1[field2]" value="korv2" />';
}
if (chosenTbl == "3") {
document.getElementById("checkbox1").innerHTML= "text 3";
document.getElementById("checkbox2").innerHTML= "text 3";
}
if (chosenTbl == "4") {
document.getElementById("checkbox1").innerHTML= "text 4";
document.getElementById("checkbox2").innerHTML= "text 4";
}
if (chosenTbl == "5") {
document.getElementById("checkbox1").innerHTML= "text 5";
document.getElementById("checkbox2").innerHTML= "text 5";
}
}
if (chosenDb == "2") {
selbox1.options[selbox1.options.length] = new Option('table two, choise one','1');
selbox1.options[selbox1.options.length] = new Option('table two, choise two','2');
selbox1.options[selbox1.options.length] = new Option('table two, choise three','3');
selbox1.options[selbox1.options.length] = new Option('table two, choise four','4');
selbox2.options[selbox2.options.length] = new Option('table two, choise one','twoone');
selbox2.options[selbox2.options.length] = new Option('table two, choise two','twotwo');
selbox2.options[selbox2.options.length] = new Option('table two, choise three','twothree');
selbox2.options[selbox2.options.length] = new Option('table two, choise four','twofour');
selbox3.options[selbox3.options.length] = new Option('table two, choise four','twofour');
if (chosenTbl == " ") {
document.getElementById("checkbox1").innerHTML= "text not set";
document.getElementById("checkbox2").innerHTML= "text not set";
}
if (chosenTbl == "1") {
document.getElementById("checkbox1").innerHTML= "text 1";
document.getElementById("checkbox2").innerHTML= "text 1";
}
if (chosenTbl == "2") {
document.getElementById('checkbox1').innerHTML= '<input type="checkbox" name="chkbx1[field1]" value="korv1" />';
document.getElementById("checkbox2").innerHTML= '<input type="checkbox" name="chkbx1[field2]" value="korv2" />';
}
if (chosenTbl == "3") {
document.getElementById("checkbox1").innerHTML= "text 3";
document.getElementById("checkbox2").innerHTML= "text 3";
}
if (chosenTbl == "4") {
document.getElementById("checkbox1").innerHTML= "text 4";
document.getElementById("checkbox2").innerHTML= "text 4";
}
if (chosenTbl == "5") {
document.getElementById("checkbox1").innerHTML= "text 5";
document.getElementById("checkbox2").innerHTML= "text 5";
}
}
if (chosenDb == "3") {
selbox1.options[selbox1.options.length] = new Option('third choice - option one','threeone');
selbox1.options[selbox1.options.length] = new Option('third choice - option two','threetwo');
selbox2.options[selbox2.options.length] = new Option('third choice - option one','threeone');
selbox2.options[selbox2.options.length] = new Option('third choice - option two','threetwo');
selbox3.options[selbox3.options.length] = new Option('third choice - option one','threeone');
}
}
</script>
<form name="formName" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<select name="database" size="1" onchange="setOptions(document.formName.database.options[document.formName.database.selectedIndex].value, null);">
<option value=" " selected="selected"></option>
<option value="1">Database 1</option>
<option value="2">Database 2</option>
<option value="3">Database 3</option>
</select>
<br /><br />
<select name="table" size="1" onchange="setOptions(document.formName.database.options[document.formName.database.selectedIndex].value, document.formName.table.options[document.formName.table.selectedIndex].value);">
<option value=" " >No database selected</option>
</select>
<br /><br />
<select name="searchfield" size="1">
<option value=" " selected="selected">No database selected</option>
</select>
<br /><br />
<select name="searchorder" size="1">
<option value=" " selected="selected">No database selected</option>
</select>
<br /><br />
<input type="submit" />
<div id="checkbox1">Select from the list to change this box</div>
<div id="checkbox2">Select from the list to change this box</div>
</form>
</body>
</html>
You could make that code a whole lot shorter and easier to maintain by putting the different values in arrays, or even arrays within arrays to skip the chosen==smtng if-statements. Then use a loop to create the options.
Another tip, create a variable to hold the references to checkbox1 and checkbox2, like you do with the selectboxes, makes it a lot easier to change the names etc.
Linear Mode
