input Obejekt erstellen

T

TodesengelAzrael

Mitglied
Hallo,
ich hab eine Frage: Ist es möglich mithilfe von javascript inputfelder(also submitbuttons, radiobuttons usw) zu erzeugen? Also das ganze soll dann so aussehen, dass wenn man den Wert in einem Feld(<input type=text>) ändert, ein neues Feld unter dem letzen erzeugt wird. Das wiederrum soll auch ein neues erzeugen. Wie ich das mit Funktionen mache ist mir klar, nur weiß ich nicht wie ich(wenn ich die Funktion im Head-Bereich definiere) neue Felder unter den bestehenden erstellen kann. Ist das möglich?
 
Danke, das hat geholfen. Nur eine Frage hab ich noch: Ich will nur ein neues Objekt erzeugen lassen, wenn das letzte Objekt Text enthält (nicht wirklich das letze, denn das letzte ist ein Submitbutton). Das ganze kann ich ja mit if in der Funktion machen, nur klappt folgendes nicht:

PHP: 
<script type="text/javascript">
<!--
var i = 0;
var Nummerierung = "";
function Add() {
  if(document.newk.wert[i].value != "")
  {
  Nummerierung = "<p><select name=\"anzahlk[]\"><option value=\"1\">1</option></select><input name=\"wert[]\" onChange=\"Add()\"><\/p> ";
  document.all.tags("p")[document.all.tags("p").length - 1].insertAdjacentHTML("AfterEnd",Nummerierung);
  i = i + 1;
  }
}
//-->
</script>

Das Formular sieht so aus:


PHP: 
<form action="test.php" method="post" name="newk">
<p><input name="name">name</input></p> 
<p>Beschreibung:</p>
<p><textarea name="beschreibung" cols="20" rows="15"></textarea></p>
<p>Karten:</p>
<p><select name="anzahlk[]"><option value="1">1</option></select>
<input name="wert[]" onChange="Add()"></p>
<input type="submit" value="Erstellen" name="submit">
</form>

Edit: Kann keiner helfen oder braucht ihr mehr angaben?
 
Zuletzt bearbeitet:
Wie sagt man so schön? Selbst ist der Mann. Nachdem ich hier jetzt mal fast zu Tode rumprobiert habe bin ich auf ne Lösung gestoßen:

Das Formular muss so aussehen:

PHP: 
<form action="test.php" method="post" name="newk">
<p><input name="name">name</input></p> 
<p>Beschreibung:</p>
<p><textarea name="beschreibung" cols="20" rows="15"></textarea></p>
<p>Karten:</p>
<p><select name="anzahlk[]"><option value="1">1</option></select>
<input name="wert" onChange="Add()"></p>
<p><select name="anzahlk[]"><option value="1">1</option></select>
<input name="wert" onChange="Add()"></p>
<input type="submit" value="Erstellen" name="submit">
</form>

Und der Headbereich so:

PHP: 
<script type="text/javascript">
<!--
var i = 1;
var Nummerierung = "";
function Add() {
  if(document.newk.wert[i].value != "")
  {
  Nummerierung = "<p><select name=\"anzahlk[]\"><option value=\"1\">1</option></select><input name=\"wert\" onChange=\"Add()\"></p> ";
  document.all.tags("p")[document.all.tags("p").length - 1].insertAdjacentHTML("AfterEnd",Nummerierung);
  i = i + 1;
  }
}
//-->
</script>


Jedoch gibt es dabei ein Problem. Wenn ich nun die Variable Wert mit $wert[0] oder $_POST['wert'] abfragen möchte ist sie leer. Warum ist das so?
 
Zuletzt bearbeitet:
Das all Objekt ist keine wirklich schöne Methode, um auf Elemente zuzugreifen.

Dazu gibt es
getElementById
getElementsByName
getElementsByTagName
usw...


Aber zum Thema:
Es per innerHTML zu machen, bzw. indem man den HTML-Code manuell
verändert muss nicht unbedingt sein.

Viel einfacher und eleganter geht es mit den DOM-Funktionen.

Ich hab dazu mal ein Beispiel gemacht:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type"
              content="text/html; charset=iso-8859-1">
        <title>Dynamisches hinzuf&uuml;gen von Input-Boxen</title>

        <script type="text/javascript">
        var iAllInputs = 0;

        function addInput( a_iCount )
        {
            for (i=0; i<a_iCount; i++) {
                iAllInputs++;
                oBreakTag = window.document.createElement("br");
                oInputTag = window.document.createElement("input");

                oInputTag.setAttribute( "type",  "text" );
                oInputTag.setAttribute( "style", "width:100px;" );
                oInputTag.setAttribute( "name",  "input" + iAllInputs );

                window.document.getElementById("Inputs").appendChild(
                    oBreakTag );
                window.document.getElementById("Inputs").appendChild(
                    oInputTag );
            }
        }

        function delInput()
        {
            if ( iAllInputs > 0 ) {
                for (i=0; i<2; i++) {
                    window.document.getElementById("Inputs").removeChild
                    (
                        window.document.getElementById("Inputs").lastChild
                    );
                }
                iAllInputs--;
            } else {
                alert( "Keine Inputboxen mehr vorhanden!" );
            }
        }
        </script>
    </head>
    <body onLoad="addInput( 2 );">
        <h1>Dynamisches hinzuf&uuml;gen von Input-Boxen</h1>
        <form action="datei.html" method="post">
            <p id="Inputs">&nbsp;<p>

            <input type="submit" value="Weiter">
        </form>
        <br><br><br><br>
        <input type="button" value="Neues Input-Feld hinzuf&uuml;gen"
               onClick="addInput( 1 );">
        <input type="button" value="Letztes Input-Feld l&ouml;schen"
               onClick="delInput();">
    </body>
</html>

htht
 
Danke für das Beispiel, aber wie kann ich das jetzt so machen, das nur ein neues input Feld erzeugt wird, wenn das letzte Erzeugte bei onChange Daten enthält. Wenn es leer ist dann soll nichts gemacht werden. Ich hab das zwar schonmal hingekriegt, aber dann hat sich auch ein neues input Feld hinzugefügt wenn ich ein vorheriges input Feld geändert hab.
Am Ende soll es so aussehen. Der Endnutzer gibt Daten in die Text-input-Felder ein. Wenn er etwas in das letzte Feld eingetragen hat und es verlässt(also das Ereignis onChange eingetreten ist), dann soll ein weiteres darunter erzeugt werden, so dass er immer weiter eingeben kann. Wenn er allerdings merkt, dass er oben etwas falsch eingegeben hat und es ändert, soll trotzdem kein neues Feld erzeugt werden und das wird es eben wenn ich es wie bisher mache. Der oben angegebene Code(der von mir) hat das Problem gelöst, aber nach dem versenden ist die Variable $wert leer.

Und wie kann ich aus den erzeugten input Felder Arrays machen? Wenn ich es ohne Arrays mache muss ich ja die Anzahl der erzeugten input Felder mitsenden und wie ich das mit einem weiteren hidden input feld mit der Variablen aus dem javascript code mache weiß ich nicht.

Edit: Keine Lösung?
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück