dynamische Anzahl von Inputfeldern mit Autosuggest & Autocomplete

r3d_redlabs

Grünschnabel
Schönen guten Abend ich bastel mit gerade eine kleine Lagerverwaltung die ein Verleihsystem beinhaltet.
Zum Vereihen von einen oder mehreren Artikeln habe ich pro Zeile 3 Inputfelder : Artikelnummer , Anzahl , Verleihpreis
Die Artikel wird mithilfe von Ajax beim Tippen ( Autosuggest lie google suche ) aus der DB geholt , ist die Artikelnr gewähl gibt es eine Button wenn an den klickt wird die Anzahl und der Preis per onClick aus der DB geholt und ins jeweilige Inputfeld geschreiben.

Der Code dafür sieht folgender maßen aus:

HTML:
<td>Artikel : <input type="text" name="artikel[]" id="artikel" value="" style="width:100px;" onChange="onSelectChange(this.form.artikel.value);"><input type="button" value="=>" onClick="onSelectChange(this.form.artikel.value);">
                                                                        <div id="results" class="autocomplete"></div>
                                                                       <script type="text/javascript">
                                                                         $(function(){
                                                                         setAutoComplete("artikel", "results", "./bin/srch_artnr.php?artnr=");
                                                                         });

                                                                         function onSelectChange(){
                                                                                 var getArtNr = document.getElementById("artikel").value;


                                                                                 if (getArtNr != 0) {

                                                                                 $.ajax({
                                                                                         type: "GET",
                                                                                         url: "./bin/srch_anzahl.php?artnr="+getArtNr,
                                                                                         data: "data",
                                                                                         success: function(data)
                                                                                         {
                                                                                                 $('#anzahl').empty();
                                                                                                 document.getElementById("anzahl").value = data;
                                                                                         }
                                                                                         });

                                                                                 $.ajax({
                                                                                         type: "GET",
                                                                                         url: "./bin/srch_preis.php?artnr="+getArtNr,
                                                                                         data: "data",
                                                                                         success: function(data)
                                                                                         {

                                                                                                 document.getElementById("preis").value = data;
                                                                                         }
                                                                                         });

                                                                                 } else {

                                                                                 document.getElementById("anzahl").value = "";
                                                                                 document.getElementById("preis").value = "1";

                                                                                 }

                                                                                 }
                                                                         </script></td>
                                                         <td>Anzahl : <input type="text" name="anzahl[]" id="anzahl" value="" style="width:50px;">
                                                         </td>
                                                         <td>Preis : <input type="text" name="preis[]" id="preis" value="" style="width:50px;" ></td>

Jetzt hab ich noch eine JavaScriptfunktion mit der das Form geklont werden kan um mehr als einen Artikel zu Verleiehen.

HTML:
                    <span id="newartikel" style="display: none;">
                                         <table>
                                                 <tr>
                                                         <td>Artikel : <input type="text" name="artikel[]" value="" style="width:100px;" id="artikel1" onChange="onSelectChange(this.form.artikel.value);"><input type="button" value="=>" onClick="onSelectChange(this.form.artikel.value);">
                                                                         <div id="results1" class="autocomplete"></div>
                                                                         <script type="text/javascript">
                                                                         $(function(){
                                                                         setAutoComplete("artikel1", "results1", "./bin/srch_artnr.php?artnr=");
                                                                         });

                                                                         function onSelectChange(){
                                                                                 var getArtNr = document.getElementById("artikel").value;


                                                                         </script>
                                                         </td>
                                                         <td>Anzahl : <input type="text" name="anzahl[]" value="" style="width:50px;" id="anzahl"></td>
                                                         <td>Preis : <input type="text" name="preis[]" value="" style="width:50px;" id="preis"></td>
                                                         <td><input type="button" value="<?php echo $lang['per_entf']; ?>" onclick="removeField(this.parentNode.parentNode.parentNode);" /></td>
                                                 </tr>
                                         </table>
                                 </span>

                                 <span id="add"></span>
                                 <input type="button" value="<?php echo $lang['per_add']; ?>" onclick="javascript:moreFields();" />

Ich habe den geklonten inputs die gleichen IDs zugewiesen wie dem ersten Form. Aber das Autosuggest und Autocomplete funktioniert dort nicht. Jetzt ist meine Frage habt ihr Tips wie ich meinen Code so umschreiben kann das egal wie oft das Form geklont wurde ,Autosuggest und Autocomplete funktionieren?

Danke schon mal für eure Tips
R3D
 

Neue Beiträge

Zurück