Javascript auswahlfeld aufrufen

Gersch

Grünschnabel
Liebe Gemeinde

Erstmal ein HALLO an all die freiwilligen Helfer und hilfesuchenden in diesem Forum.
Ich habe ein Boniersystem für unsere Vereine gebastelt, das auch schon im Einsatz war und gut funktioniert hat. Jedoch sind jetzt einige verbesserungsvorschläge gekommen, bei denen ich eure Hilfe bauche. ich muß dazusagen, dass ich vor ca 1.Jahr mich das erste mal mit dieser Materie beschäftigt habe und mein Wissen mir mir viel lesen und "learnig by doing" angeeignet habe. Ich bin mir sicher, das es einigen von euch bei manchen meiner Codepassagen die Haare aufstellen wird, aber es funktioniert.
Nun zu meinem Problem. Ich hole mir aus einer SQL-DB die einzelnen Artikel. (z.B: Bier , Cola, Orangensaft, usw) und lasse diese mit Buttons in eine WEBSQL- DB eintragen. Zusätzlich hole ich mir von der SQL.DB sogenannte Zusatzwünsche, z.B: mit Leitungswasser, mit Strohhalm, warm, usw. Bis jetzt habe ich das so gemacht. Das wenn jemand z.B einen Orangensaft mit Leitungswasser wollte, man zuerst den Zusatzwunsch "mit Leitungswasser" auswählen mußte und danach den Button Orangensaft gedrückt hat.
Hier mal der wichtigste Code als Beispiel:

PHP:
<td width="30%">
                <form name="zusatztrinken" method="post">
                    <select style='height:40px; width:100%;' name ="Zusatz"  onchange="trinkzusatz('<? echo $anzeige;?>','<? echo $zusatzanzeige;?>')" multiple>
                    <option value='Zusatz' selected> <? echo $anzeige;?></option>
                    <option value='<?echo $zusatz1;?>'><?echo $zusatz1;?></option>
                    <option value='<?echo $zusatz2;?>'><?echo $zusatz2;?></option>
                    <option value='<?echo $zusatz3;?>'><?echo $zusatz3;?></option>
                    <option value='<?echo $zusatz4;?>'><?echo $zusatz4;?></option>
                    <option value='<?echo $zusatz5;?>'><?echo $zusatz5;?></option>
                    <option value='<?echo $zusatz6;?>'><?echo $zusatz6;?></option>
                    <option value='<?echo $zusatz7;?>'><?echo $zusatz7;?></option>
                    <option value='<?echo $zusatz8;?>'><?echo $zusatz8;?></option>
                    <option value='<?echo $zusatz9;?>'><?echo $zusatz9;?></option>
                    <option value='<?echo $zusatz10;?>'><?echo $zusatz10;?></option>
                </select>
            </form>   
            </td></tr></table>
            <script language="javascript" type="text/javascript"> 

       function trinkzusatz(anzeige, item) {
   
            if(!db)
            {                
                return;                
            }
            var name1 = anzeige;
            var a = document.forms.zusatztrinken;
            var zusatz = "";
   
            for (x=1; x < a.Zusatz.length; x++) {
                if (a.Zusatz[x].selected) {
                    zusatz += a.Zusatz[x].value + ", ";
                    //a.Zusatz[x].selected = false;
                }
            }
            document.getElementById ("zws1").value = zusatz;

        } 

  </script>
        echo "<input type='button' style='height: 40px; width: 32%; BACKGROUND-COLOR: $farbe;' id='$anzeige' value ='$anzeige' onclick='$artikel()' >";
       
    ?>
   
    <script language="javascript" type="text/javascript"> 

    function <?echo $artikel;?>() {
            if(!db)
            {                
                return;                
            }
            var name = document.getElementById("<?echo $anzeige;?>").value;
            var g;
            g = "g"; 
            var zusatz = document.getElementById("zws1").value;
            db.transaction(function (t) { //t = transaction
                t.executeSql("INSERT INTO myTable1('name','zws','was') values('" + name + "','" + zusatz + "','" + g + "');", [], null, null);
                selRows();
            });
           
            var c = document.forms.zusatztrinken;
            for (x=1; x < c.Zusatz.length; x++) {
                if (c.Zusatz[x].selected) {
                    c.Zusatz[x].selected = false;
                }
            }
           
            var a = document.getElementById("zws1");
            a.value = "";
        }

Die Function selRows() - Zeile 59, zeigt mir dann die bonierten Sachen an.

PHP:
        function selRows() {
           
            var q = "select * from myTable1";
            var z = 0;
            db.transaction(function (t) { //t = transaction
                t.executeSql(q, null, function (t, data) {
                  var html = "<table width='100%' border='1'><tr><td width='30%'>Artikel</td><td width='40%'>Zusatz</td><td width='10%'>Auswählen</td><td width='20%'>Löschen</td></tr>"; 
                    for(var i = data.rows.length-1;i>=0;i--){
                html += "<tr><td>" + data.rows.item(i).id + "</td><td>" + data.rows.item(i).name + "</td><td>" + data.rows.item(i).zws + "</td><td>" + data.rows.item(i).was + "</td><td><input type='button' style='height: 25px; width: 80px;' id='" + data.rows.item(i).name + "' value ='löschen' onclick='loeschen(" + data.rows.item(i).id + ")' /></td></tr>";      

                    }
                       
                    html += "</table>";
                    var el = document.getElementById("ausgabe");
                    el.innerHTML = html;
           
                });
            });
        }

Soweit geht ja alles. Jetzt möchte ich aber gerne in dieser Tabelle einen Button einbauen, der mir die zusatzwünsche öffnet und diese dann updatet.
Habe mal folgendes in sellRows versucht.

PHP:
html += "<tr><td>" + data.rows.item(i).name + "</td><td>" + data.rows.item(i).zws + "</td><td><input type='button' style='height: 25px; width: 53px;' id='" + data.rows.item(i).name + "' value ='zusatz' onclick='auswahl(" + data.rows.item(i).id + ")' /></td><td><input type='button' style='height: 25px; width: 65px;' id='" + data.rows.item(i).name + "' value ='löschen' onclick='loeschen(" + data.rows.item(i).id + ")' /></td></tr>";

Hier wird der Button Zusatz erzeugt und bei onclick die id der Tabelle übergeben, damit ich dann weiß, in welche zeile das update gemacht werden soll. Nur weiß ich jetzt leider nicht, wie ich mein Auswahlfeld mit den Zusatzwünschen aufrufen kann.
Habe mal folgendes Probiert:
PHP:
    function auswahl(rowid) {
            if(!db)
            {      
                return;                
            }
            alert(rowid);
           
            var htmlt= "<form name='zusatztrinken' method='post'>"+
                    "<select style='height:40px; width:100%;' name ='Zusatz'  onchange='trinkzusatz('<? echo $anzeige;?>','<? echo $zusatzanzeige;?>')' multiple>"+
                    "<option value='Zusatz' selected> <? echo $anzeige;?></option>"+
                    "<option value='<?echo $zusatz1;?>'><?echo $zusatz1;?></option>"+
                    "<option value='<?echo $zusatz2;?>'><?echo $zusatz2;?></option>"+
                    "<option value='<?echo $zusatz3;?>'><?echo $zusatz3;?></option>"+
                    "<option value='<?echo $zusatz4;?>'><?echo $zusatz4;?></option>"+
                    "<option value='<?echo $zusatz5;?>'><?echo $zusatz5;?></option>"+
                    "<option value='<?echo $zusatz6;?>'><?echo $zusatz6;?></option>"+
                    "<option value='<?echo $zusatz7;?>'><?echo $zusatz7;?></option>"+
                    "<option value='<?echo $zusatz8;?>'><?echo $zusatz8;?></option>"+
                    "<option value='<?echo $zusatz9;?>'><?echo $zusatz9;?></option>"+
                    "<option value='<?echo $zusatz10;?>'><?echo $zusatz10;?></option>"+
                    "</select>"+
                    "</form>";
        var el = document.getElementById("ausgabe");
                    el.innerHTML = htmlt;
            alert('Geht noch');

Wenn ich bei dem Alert in Zeile 26 anstehe, sehe ich im hintergrund, dass ein Auswahlfeld im div ausgabe angezeigt wird, sobald ich aber ok drücke, ist es wieder weg. Ich hätte aber gerne, das dies nicht angezeigt wird, sondern gleich geöffnet wird und ich zur auswahl der zusatzwünsche komme.
Ich hoffe, ihr wisst was ich meine. Könnte mir da bitte jemand einen Denkanstoss geben, da ich leider nicht einmal weiß. nach welchen begriff ich da googlen muß um zu dem gewünschten Erfolg zu kommen.
 
Zurück