Been kinda stuck with this one for awhile.
I need my code to create 2 elements on a click of a button (Text input and Select). The Select element needs to be populated with values from a database. So far I've got this:
<!DOCTYPE html>
<html>
<head>
var counter = 1;
var dynamicInput=[];
function removeInput(){
var elem = document.getElementById('ingredients');
elem.removeChild(elem.lastChild);
/*return elem.parentNode.removeChild(elem);*/
counter--;
}
function addInput(){
var newdiv = document.createElement('div');
newdiv.id = dynamicInput[counter];
newdiv.innerHTML = "Entry " + (counter) + " <br><input type='text' name='quantities[]'><select name='products[]'></select>";
counter++;
document.getElementById('ingredients').appendChild(newdiv);
}
</script>
<?php
$link = mysqli_connect("localhost", "root", "", "cocktails");
// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>
</head>
<body>
<form method="POST">
Ingredients:<br>
<div id="ingredients">
<div id="dynamicInput[0]">
<input type="text" name="quantities[]">
<select name="products[]">
<?php
$sql = mysqli_query($link, "SELECT name FROM inventory");
while ($row = $sql->fetch_assoc()){
echo "<option value=\"".$row['name']."\">" . $row['name'] . "</option>";
}
?>
</select>
<button type="button" onClick="addInput();">+</button>
<button type="button" onClick="removeInput();">-</button>
</div>
</div>
</form>
</body>
</html>
How can I populate the select that's created on a click of the button?
Of course whatever the user selects I will need to work with. How can I work with those values after?
Any pointers in the right direction will be greatly appreciated.