Hallo,
ich habe ein HTML-Formular, mit dem man Daten aus einer Datenbank auslesen kann. Es gibt auch die Möglichkeit mittels Javascript-Funktion zusätzliche input-Felder für die Abfrage zu erzeugen. Hier ist mein Code, der auch wunderbar funktioniert:
Mit der folgenden Javascript-Funktion wird der in der option-Liste gewählte Wert im ersten input-Feld angezeigt.
Wie bekomme ich nun den nächsten gewählten Wert in das 2. input-Feld usw.? Und in weiterer Folge auch in die zusätzlich erzeugten input-Felder?
Vielen Dank für Eure Hilfe!
ich habe ein HTML-Formular, mit dem man Daten aus einer Datenbank auslesen kann. Es gibt auch die Möglichkeit mittels Javascript-Funktion zusätzliche input-Felder für die Abfrage zu erzeugen. Hier ist mein Code, der auch wunderbar funktioniert:
HTML-Code:
<table> <tr><td> <input type="text" id="productinput" name="productinput[]" class="awesomplete" list="productselect" size="20"/> </td></tr> <tr><td> <input type="text" id="productinput2" name="productinput[]" class="awesomplete" list="productselect" size="20"/> </td></tr> <tr><td> <input type="text" id="productinput3" name="productinput[]" class="awesomplete" list="productselect" size="20"/> </td></tr> </table>
Code:
<script> var counter = 1; var limit = 10; function addInput(divName){ if (counter == limit) { alert("You have reached the limit of adding " + counter + " inputs"); } else { // Create new div var newdiv = document.createElement('div'); newdiv.innerHTML = '<br><input type="text" name="productinput[]" class="awesomplete" list="productinputselect" size="20"/>'; document.getElementById(divName).appendChild(newdiv); // Re instantiate Awesomplete new Awesomplete(newdiv.querySelector('input'), { list: document.querySelector('#productinputselect') }); // Set counter counter++; } } </script>
HTML-Code:
<div id="dynamicInput"> <b></b><input type="text" id="productinput4" name="productinput[]" class="awesomplete" list="productinputselect" size="20"/> </div> <input type="button" value="Additional Input Field" onClick="addInput('dynamicInput');"> <select name="productselect" id="productselect" size="9" onclick="sendproductnameinput()">
PHP-Code:
<?php
include("../files/zugriff.inc.php"); // database access
$sql = "SELECT * FROM product_main ORDER BY Name";
$result = mysqli_query($db, $sql);
while ($row = mysqli_fetch_assoc($result)) {
echo '<option class="optproducts" value='. $row['Name'] . '>' . $row['Name']. '</option>';
echo '<br>';
}
mysqli_close($db);
?>
HTML-Code:
</select>
Mit der folgenden Javascript-Funktion wird der in der option-Liste gewählte Wert im ersten input-Feld angezeigt.
Code:
function sendproductnameinput() { document.formdatabase.productinput.value = document.formdatabase.productselect.value; }
Vielen Dank für Eure Hilfe!