First let me say I don't ever use J.S. I've been trying to figure this out via google and playing with the code for over an hour. I'm working on a deadline so I am going to move on and hope I get an answer to this. If not I will have to make a static form.
What I want to do is add a drop down selection option to my form every time a button is clicked. I did something similar on another page with text fields using jSon. The items for the list is gotten from a database. The drop down that is initially on the page works so I know the data is being gotten. I originally tried to pass the values by echoing a php variable into the onclick paramater list, in made the new dropdown list but each option was one letter (A R R A Y) <-face palm.
I am now trying to make a js array on my form page and pass the array into the function, nothing happens, the dropdown isn't even created anymore
Form Page
<?php
include_once 'models/DbHandler.class.php';
$db = new DbHandler();
$db->connect();
$query = "Select * From suppliesCat";
$con=array();
$con = $db->multiSelectQuery($query);
$i=0;
?>
<script type="text/javascript">
var value = new Array();
var output = new Array();
</script>
<form action="" method="post">
<input type="text" name="item[]" />
<select name="catId[]">
<?php
foreach($con as $cat)
{
echo "<option value='". $cat[0] ."'>". $cat[1] ."</option>";
echo "<script type='text/javascript'>";
echo "value[" . $i . "]='" . $cat[0] . "';";
echo "output[" . $i . "]='" . $cat[1] . "';";
echo "</script>";
$i++;
}
?>
</select>
<div id="newInput">
</div>
<br />
<input type="button" onclick="addDropDown('newInput',value, output);" value="Add Field" />
</form>
Javascript
function addDropDown(id, value, display)
{
var output = "<select name='catId[]'>";
var container = document.createElement("div");
for(var i=0; i<display.length; i++)
{
output = output + "<option value='"+ value[i] +"'>" + display[i] +"</option>";
}
output = output + "</select>";
container.innerHTML = output;
document.getElementById(id).appendChild(container);
}
