[Erledigt] dynamisch ein input element erzeugen

xstefxanx · 03.04.2009, 20:17

hallo,
bitte berücksichtigt bei meinem eintrag das ich absoluter anfänger bin:
ich habe ein formular und möchte dynamisch wenn in einem select element etwas ausgewählt wird ein input feld an das formular anfügen.
ich habe bisher folgende funktion:

PHP-Code:

  function gast_testen(nr){

    

 
    var tbl = document.getElementById('runde_eintragen'); 

       var zeile = tbl.insertRow(8); 

    var cellRight = zeile.insertCell(nr); 

       var el = document.createElement('input'); 

       el.setAttribute('type', 'text'); 

       el.setAttribute('name', 'gastname'); 

       el.setAttribute('size', '9'); 

    cellRight.appendChild(el);

}

PHP-Code:

  ...<tr>

        <td>&nbsp;</td>

        <td><select size="1" name="spieler1" type="text" tabindex="8" onchange="gast_testen(1)">

            '.$userliste.'

            <option value="Gast">Gast</option>

            </select>

        </td>    

        <td><select size="1" name="spieler2" type="text" tabindex="9" onchange="gast_testen(2)">

            '.$userliste.'

            <option value="Gast">Gast</option>

            </select>

        </td>    

        <td><select size="1" name="spieler3" type="text" tabindex="10" onchange="gast_testen(3)">

            '.$userliste.'

            <option value="Gast">Gast</option>

            </select>

        </td>    

        <td><select size="1" name="spieler4" type="text" tabindex="11" onchange="gast_testen(4)">

            '.$userliste.'

            <option value="Gast">Gast</option>

            </select>

        </td>    

        <td><select size="1" name="spieler5" type="text" tabindex="28" onchange="gast_testen(5)">

            <option>keiner</option>

            '.$userliste.'

            <option value="Gast">Gast</option>

            </select>

        </td>

        </tr>....

wenn ich allerdings in der funktion die variable nr bei der zellenerzeugung durch 0 ersetzte funktioniert alles. warum jetzt nicht?

Manko10 · 03.04.2009, 20:19

Kannst du bitte mal erklären, was genau jetzt dein Problem ist? Wo hakt es, was geht nicht, was soll gehen, wie soll es gehen?

Zitat:

bitte berücksichtigt bei meinem eintrag das ich absoluter anfänger bin:

Dann beschäftige dich bitte ausführlich mit Einsteiger-Tutorials.

xstefxanx · 03.04.2009, 20:43

Zitat:

Zitat von Manko10

Dann beschäftige dich bitte ausführlich mit Einsteiger-Tutorials.

da bin ich ja grad dabei und in diesem zuge will ich ein dynamisches formular erstellen. nur leider erstellt er bei dem skript so keine neue tabellenzeile aber ich weiß nicht warum

Curanai · 04.04.2009, 01:48

Das Zauberwort für Dich lautet DOM bei z. B. SelfHTML - zwecks Einarbeitung. Dort findest Du createElement, appendChild und all die schönen Dingen, die Dich jetzt noch aufhalten.

Ergo: Eine dynamische Tabellenzeile startet bei mir mind. mit <tr> ... weiterhin finde ich in meinen Referenzen keine Angaben zu insertRow oder insertCell, aber hier hat Google gleich ein schönes Beispiel gefunden, in dem man sogar testen kann: Klickst Du!

xstefxanx · 04.04.2009, 10:58

Zitat:

Zitat von Curanai

Das Zauberwort für Dich lautet DOM bei z. B. SelfHTML - zwecks Einarbeitung. Dort findest Du createElement, appendChild und all die schönen Dingen, die Dich jetzt noch aufhalten.

Ergo: Eine dynamische Tabellenzeile startet bei mir mind. mit <tr> ... weiterhin finde ich in meinen Referenzen keine Angaben zu insertRow oder insertCell, aber hier hat Google gleich ein schönes Beispiel gefunden, in dem man sogar testen kann: Klickst Du!

super vielen dank werd mir das mal anschauen. mit deinen antworten kann man wenigstens was anfangen. hatte mich auch schon gewurdert dass ich die funktion da unter tr nicht finde in der objektreferenz. hatte das aber so in nem anderen forum gegoogelt und hab mal drauf vertraut dass das geht.

xstefxanx · 04.04.2009, 11:34

wie kann ich denn die 8. Zeile einer Tabelle wählen? hab folgendes probiert. scheint aber nicht wirklich zu funktionieren:

zeile = document.getElementById('runde_eintragen').tr[8];

naja habs ja auch nicht bei den objektreferenzen gefunden vondaher häts mich auch gewundert wenn es funktioniert hätte

Curanai · 04.04.2009, 12:09

Ich hab das aktuelle Manual von HTML als CHM (8.1.2) hier liegen. Suchst Du über Index, findest Du nichts (!); suchst Du textbezogen, so spuckt er tatsächlich was aus ... ich fand es auch faszinierend.

SelfHTML: table (HTML-Elementobjekt); und dort stehen mehrere Methoden für DOM1.0 und JS1.5 - und eben insertRow und insertCell.

Kannte ich auch noch nicht ... hier das Beispiel aus SelfHTML:

Code:

<html><head><title>Test</title>
<script type="text/javascript">
var Zeile = 0;
function ZeileEinfuegen () {
  if (Zeile == 0)
    document.getElementById("Tabelle").deleteRow(0);
  var TR = document.getElementById("Tabelle").insertRow(Zeile);
  Zeile += 1;
  var TD1 = document.createElement("td");
  var TD1text = document.createTextNode(document.Formular.linkerText.value);
  TD1.appendChild(TD1text);
  var TD2 = document.createElement("td");
  var TD2text = document.createTextNode(document.Formular.rechterText.value);
  TD2.appendChild(TD2text);
  TR.appendChild(TD1);
  TR.appendChild(TD2);
  document.Formular.linkerText.value = "";
  document.Formular.rechterText.value = "";
}

function Rahmen () {
  if (document.getElementsByName("Option")[0].checked == true) {
    document.getElementById("Tabelle").border = "2";
  } else {
    document.getElementById("Tabelle").border = "0";
  }
}

function Farbe () {
  if (document.getElementsByName("Option")[1].checked == true) {
    document.getElementById("Tabelle").bgColor = "#CCCCFF";
  } else {
    document.getElementById("Tabelle").bgColor = "";
  }
}
</script>
</head><body>
<form name="Formular" action="">
<input type="text" name="linkerText">
<input type="text" name="rechterText">
<input type="button" value=" OK " onclick="ZeileEinfuegen()"><br>
<input type="checkbox" name="Option" onclick="Rahmen()"> Rahmen
<input type="checkbox" name="Option" onclick="Farbe()"> Hintergrund
</form>
<table id="Tabelle">
<tr><td>Eine Tabelle</td></tr>
</table>
</body></html>

xstefxanx · 04.04.2009, 13:10

hab das ganze jetzt anders gelöst. also um das nochmal mein Vorhaben genau zu erläutern:

ich habe ein Formular mit 5 Select Feldern in denen Spieler ausgewählt werden können. wobei die zugehörigen <option> aus einer Datenbank geladen werden. zusätzlich wird noch eine <option> Gast angehängt. wenn nun also ein Gast gewählt wird soll an das Formular vor den Absendebutton eine Zeile mit einem input Feld angehängt werden in das man den Namen des Gastes eintragen kann.

das meiste funktioniert nun auch schon. allerdings ist meine lösung noch nicht so "ellegant". um den quelltext etwas zu verschönern müsste ich mehrere select elemente in ein array zusammen fassen. leider weiß ich nicht wie das geht bzw. ob das überhaupt geht.

hier mal der js teil meines quelltext.

PHP-Code:

   
<script type="text/javascript">

var tbl_laenger = false;

 
function gast_test(nr){

 
    var tbl = document.getElementById('runde_eintragen');

 
    var gast = new Array(false, false, false, false, false);

    var gast_vorhanden = false;

    

    if(document.forms[0].spieler1.value == 'Gast'){

            gast[0]=true; gast_vorhanden = true;

    }

 
    if(document.forms[0].spieler2.value == 'Gast'){

        gast[1]=true; gast_vorhanden = true;

    }

 
    if(document.forms[0].spieler3.value == 'Gast'){

        gast[2]=true; gast_vorhanden = true;

    }

 
    if(document.forms[0].spieler4.value == 'Gast'){

        gast[3]=true; gast_vorhanden = true;

    }

 
    if(document.forms[0].spieler5.value == 'Gast'){

         gast[4]=true; gast_vorhanden = true;

    }

 
 
    if(tbl_laenger == true){

        tbl.deleteRow(8);

        tbl_laenger = false;             

    }

 
    if(tbl_laenger == false && gast_vorhanden == true){

        var zeile = tbl.insertRow(8);             // Zeile 8 hinzufügen

        var zelle = new Array(6);

        for (var i = 0; i < zelle.length; i++){

            zelle[i] = zeile.insertCell(i); 

            zelle[i].innerHTML="&nbsp;";

        }

        zelle[0].innerHTML="Name";

        tbl_laenger = true;

 
        for(var i = 0; i<5; i++){

            if(gast[i] == true){

            var j = i+1;

               var el = document.createElement('input'); 

               el.setAttribute('type', 'text'); 

               el.setAttribute('name', 'gastname'+j); 

               el.setAttribute('size', '9'); 

            el.setAttribute('maxlength', '20');

            if (i != 4){

                var tab = 28 + i;

                el.setAttribute('tabindex', tab);

            }

                else{

                    el.setAttribute('tabindex', '33');

                }

            zelle[j].appendChild(el);

            }

        }

    }

 
}

 
</script>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] input 0 frmularproblem	mistermint	PHP Tipps 2009	2	30.03.2009 19:15
Links dynamisch erzeugen	philipp.p	PHP Tipps 2008	7	03.04.2008 14:31
Smarty/quickform: Variablen Namen dynamisch erzeugen ?	Toxo	HTML, Usability und Barrierefreiheit	1	31.10.2007 16:55
Tool um (Spiel)Klassen zu erzeugen	Martin13	PHP-Fortgeschrittene	6	05.09.2007 02:25
SQL Abfrage erzeugen/ string bearbeitung	easy	PHP Tipps 2007	20	28.03.2007 22:12
INPUT RADIO mit INPUT TEXT kombinieren!?!	buggybugga	HTML, Usability und Barrierefreiheit	5	20.02.2007 17:33
Checkboxen dynamisch in Tabelle erzeugen	nussbaum	PHP Tipps 2007	4	21.01.2007 16:50
Array Element vor und nach dem aktuellen Element ausgeben	NetLook	PHP Tipps 2006	2	09.05.2006 15:29
[JS/CSS] Element erst onclick sichtbar machn script.aculo.us	StatischeEntladung	HTML, Usability und Barrierefreiheit	1	06.04.2006 18:32
Pulldown Menü dynamisch aus Datei erzeugen		PHP Tipps 2005-2	14	20.10.2005 11:18
[Erledigt] Input value und Input text		PHP Tipps 2005-2	4	12.07.2005 16:46
Uploadfelder dynamisch erzeugen und abfragen		PHP Tipps 2005-2	1	03.06.2005 23:01
[Erledigt] input type's		HTML, Usability und Barrierefreiheit	4	27.03.2005 18:23
Variablenname dynamisch zusammensetzen	RoDa	PHP Tipps 2004	3	19.09.2004 14:13
textfelder dynamisch erzeugen		PHP Tipps 2004	7	19.08.2004 12:53

03.04.2009, 20:17
xstefxanx Erfahrener Benutzer Registriert seit: 11.03.2009 Beiträge: 102	[Erledigt] dynamisch ein input element erzeugen hallo, bitte berücksichtigt bei meinem eintrag das ich absoluter anfänger bin: ich habe ein formular und möchte dynamisch wenn in einem select element etwas ausgewählt wird ein input feld an das formular anfügen. ich habe bisher folgende funktion: PHP-Code: `function gast_testen(nr){ var tbl = document.getElementById('runde_eintragen'); var zeile = tbl.insertRow(8); var cellRight = zeile.insertCell(nr); var el = document.createElement('input'); el.setAttribute('type', 'text'); el.setAttribute('name', 'gastname'); el.setAttribute('size', '9'); cellRight.appendChild(el); }` PHP-Code: ...<tr> <td> </td> <td><select size="1" name="spieler1" type="text" tabindex="8" onchange="gast_testen(1)"> '.$userliste.' <option value="Gast">Gast</option> </select> </td> <td><select size="1" name="spieler2" type="text" tabindex="9" onchange="gast_testen(2)"> '.$userliste.' <option value="Gast">Gast</option> </select> </td> <td><select size="1" name="spieler3" type="text" tabindex="10" onchange="gast_testen(3)"> '.$userliste.' <option value="Gast">Gast</option> </select> </td> <td><select size="1" name="spieler4" type="text" tabindex="11" onchange="gast_testen(4)"> '.$userliste.' <option value="Gast">Gast</option> </select> </td> <td><select size="1" name="spieler5" type="text" tabindex="28" onchange="gast_testen(5)"> <option>keiner</option> '.$userliste.' <option value="Gast">Gast</option> </select> </td> </tr>.... wenn ich allerdings in der funktion die variable nr bei der zellenerzeugung durch 0 ersetzte funktioniert alles. warum jetzt nicht?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

04.04.2009, 01:48
Curanai Erfahrener Benutzer Registriert seit: 13.05.2006 Beiträge: 466	Das Zauberwort für Dich lautet DOM bei z. B. SelfHTML - zwecks Einarbeitung. Dort findest Du createElement, appendChild und all die schönen Dingen, die Dich jetzt noch aufhalten. Ergo: Eine dynamische Tabellenzeile startet bei mir mind. mit <tr> ... weiterhin finde ich in meinen Referenzen keine Angaben zu insertRow oder insertCell, aber hier hat Google gleich ein schönes Beispiel gefunden, in dem man sogar testen kann: Klickst Du! __________________ Manche Menschen sind wie Schnitzel - nicht zäh, aber beidseitig bekloppt!

04.04.2009, 11:34
xstefxanx Erfahrener Benutzer Registriert seit: 11.03.2009 Beiträge: 102	wie kann ich denn die 8. Zeile einer Tabelle wählen? hab folgendes probiert. scheint aber nicht wirklich zu funktionieren: zeile = document.getElementById('runde_eintragen').tr[8]; naja habs ja auch nicht bei den objektreferenzen gefunden vondaher häts mich auch gewundert wenn es funktioniert hätte

04.04.2009, 13:10
xstefxanx Erfahrener Benutzer Registriert seit: 11.03.2009 Beiträge: 102	hab das ganze jetzt anders gelöst. also um das nochmal mein Vorhaben genau zu erläutern: ich habe ein Formular mit 5 Select Feldern in denen Spieler ausgewählt werden können. wobei die zugehörigen <option> aus einer Datenbank geladen werden. zusätzlich wird noch eine <option> Gast angehängt. wenn nun also ein Gast gewählt wird soll an das Formular vor den Absendebutton eine Zeile mit einem input Feld angehängt werden in das man den Namen des Gastes eintragen kann. das meiste funktioniert nun auch schon. allerdings ist meine lösung noch nicht so "ellegant". um den quelltext etwas zu verschönern müsste ich mehrere select elemente in ein array zusammen fassen. leider weiß ich nicht wie das geht bzw. ob das überhaupt geht. hier mal der js teil meines quelltext. PHP-Code: <script type="text/javascript"> var tbl_laenger = false; function gast_test(nr){ var tbl = document.getElementById('runde_eintragen'); var gast = new Array(false, false, false, false, false); var gast_vorhanden = false; if(document.forms[0].spieler1.value == 'Gast'){ gast[0]=true; gast_vorhanden = true; } if(document.forms[0].spieler2.value == 'Gast'){ gast[1]=true; gast_vorhanden = true; } if(document.forms[0].spieler3.value == 'Gast'){ gast[2]=true; gast_vorhanden = true; } if(document.forms[0].spieler4.value == 'Gast'){ gast[3]=true; gast_vorhanden = true; } if(document.forms[0].spieler5.value == 'Gast'){ gast[4]=true; gast_vorhanden = true; } if(tbl_laenger == true){ tbl.deleteRow(8); tbl_laenger = false; } if(tbl_laenger == false && gast_vorhanden == true){ var zeile = tbl.insertRow(8); // Zeile 8 hinzufügen var zelle = new Array(6); for (var i = 0; i < zelle.length; i++){ zelle[i] = zeile.insertCell(i); zelle[i].innerHTML=" "; } zelle[0].innerHTML="Name"; tbl_laenger = true; for(var i = 0; i<5; i++){ if(gast[i] == true){ var j = i+1; var el = document.createElement('input'); el.setAttribute('type', 'text'); el.setAttribute('name', 'gastname'+j); el.setAttribute('size', '9'); el.setAttribute('maxlength', '20'); if (i != 4){ var tab = 28 + i; el.setAttribute('tabindex', tab); } else{ el.setAttribute('tabindex', '33'); } zelle[j].appendChild(el); } } } } </script> Geändert von xstefxanx (04.04.2009 um 14:07 Uhr).