Dynamisch Input-Felder

[redbull2906]

Hallo Leute,

ich suche eine option wie ich über einen Button weitere Inputfelder meinem Form zufügen kann. Hat jemand von Euch eine Idee wie ich das umsetzen kann?

Dachte an jquery aber bin nicht richtig fündig geworden

 

[sokie]

AW: Dynamisch Input-Felder

mit jquery ist das eine ziemlich einfache sache.
du erstellst deinen html code für dein neues inputfeld, speicherst den in einer variablen.
der button bekommt ein click handler, der den code in das formular einträgt.
wenns genauer sein soll,wäre der code der seite wichtig.

 

[redbull2906]

AW: Dynamisch Input-Felder

Hallo Sokie,

hier mal mein HTML zum Forumlar

<form action="script.php" method="post">
                            <label class="formlabel">Frage *</label>
                            <input type="text" name="frage" class="inputfld" />
                            <label class="formlabel"><b>Antworten *</b></label>
                            <div class="clear"></div>
                            <label class="formlabel">AW 1 *</label>
                            <input id="input" type="text" name="aw[]" class="inputfld" />
                            <label class="formlabel">AW 2 *</label>
                            <input id="input" type="text" name="aw[]" class="inputfld" />
                            <label class="formlabel">AW 3 *</label>
                            <input id="input" type="text" name="aw[]" class="inputfld" />
                              <input type="button" value="Feld hinzuf&uuml;gen" />                       
                            <input type="submit" name="send" value="Anlegen" class="button" />
                        </form>

Da ich leider mit jquery noch nicht so vertraut bin - was meinst du mit

du erstellst deinen html code für dein neues inputfeld, speicherst den in einer variablen.

Kann ich mir das so wie in php vorstellen

$newfeld = '<input type="text" name="aw[]" class="inputfld" />';

Was kommt dann beim Button noch hinzu? onclick?

 

[crusher9001]

AW: Dynamisch Input-Felder

Dies ist ziemlich gut mit Javascript machbar.

<script language="javascript" type="text/javascript">

function neues_feld()
{
// Neues input Element wird erschaffen
    var input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("id", "neues_feld");

    var form = document.getElementbyID("neues_feld");

// das Feld wird deinem Formular untergeordnet
    form.appendChild(input);
}

</script>

Und diese Funktion rufst du über das onclick - event des Buttons auf.

<form action="script.php" method="post">

.
.
.

<input type="button" value="Feld hinzufügen" onclick="javascript:neues_feld()" />
</form>

Hier kannst du dich gut in die Thematik einlesen:
SELFHTML: JavaScript/DOM

Ich hoffe ich konnte dir helfen.

lg crusher

 

[redbull2906]

AW: Dynamisch Input-Felder

@crusher

Hab es mal so eingebaut aber ein Feld fügt er mir nicht hinzu

 

[crusher9001]

AW: Dynamisch Input-Felder

ok sry

var form = document.getElementbyTagName("form")[0];

scheint nicht zu funktionieren, ich hab jetzt aber auch keine zeit genau zu gucken warum.

Aber mit

    var form = document.getElementById("form");

funktioniert es bei mir. Du musst dann nur noch dem form - Element die passente ID geben.

 

[redbull2906]

AW: Dynamisch Input-Felder

das war es nun gehts auch bei mir. Aber warum setzt er mir die Felder unter den Submit-Button? Kann ich die Felder auch darüber einfügen?

 

[crusher9001]

AW: Dynamisch Input-Felder

auf die schnelle fällt mir nur ein, dass du die Felder und den Button per CSS verschieben kannst.

z.B.

input.style.top = "200px"; 
input.style.left = "100px";

und per

document.getElementById(id des button);kannst du die einzelnen elemente ansprechen.


hier kannst du dich auch ein wenig einlesen, wenn du magst:

 

[redbull2906]

AW: Dynamisch Input-Felder

ok danke schon mal - werde mich mal einlesen

 

[Honk1910]

AW: Dynamisch Input-Felder

hy. ich wollte dieses javascript gern nutzen. nur bin ich nicht grad bewandert in js und wollte fragen wie die java funktion aussehen muss damit er mir 2 inputfelder erstellt mit unterschiedlichen namen.

sozusagen das ich dan 2 solche inputfelder habe

<input type="text" name="tore_heim[]" size="10" maxlength="10">
      <input type="text" name="tore_gast[]" size="10" maxlength="10">

 

[crusher9001]

AW: Dynamisch Input-Felder

lesen lohnt sich

...

<script language="javascript" type="text/javascript">

function neues_feld()
{
// Neues input Element wird erschaffen
    var input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("id", "neues_feld");

    var form = document.getElementbyID("neues_feld");

// das Feld wird deinem Formular untergeordnet
    form.appendChild(input);
}

</script>

 

[Honk1910]

AW: Dynamisch Input-Felder

aber dort ist ja das problem das er nur eins erstellt beim klick. wollte ja aber einmal klicken und 2 felder haben aber mit unterschiedlichen namen

 

[crusher9001]

AW: Dynamisch Input-Felder

naja dann erweiterst du die funktion einfach und legst ein weiteres inputfeld an und gibst ihn eine andere id bzw. namen.

...

// zweites Inputfeld
    input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("id", "zweites_feld");

    form = document.getElementbytagname("body")[0];
    form.appendChild(input);

...

 

[Honk1910]

AW: Dynamisch Input-Felder

klingt logisch
so schaut es jetzt aus. aber beim klick passiert nichts

function neues_feld()
{
// Neues input Element wird erschaffen
    var input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("id", "heim");

    var form = document.getElementbyID("heim");

// das Feld wird deinem Formular untergeordnet
    form.appendChild(input);

// zweites Inputfeld
    input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("id", "gast");

    form = document.getElementbytagname("body")[0];
    form.appendChild(input);


}

<div id="gast"><input type="text" name="tore_heim[]" size="10" maxlength="10">
                        <input type="text" name="tore_gast[]" size="10" maxlength="10"></div>
                        <input type="button" value="Feld hinzufügen" onclick="javascript:neues_feld()" />

 

[crusher9001]

AW: Dynamisch Input-Felder

sry ich hatte mich an einer stelle verschrieben. So müsste es funktionieren. Aber les dich am besten mal selber in die Thematik ein ( SELFHTML: JavaScript/DOM )

<html>
<head>
<script language="javascript" type="text/javascript">

function neues_feld()
{
// Neues input Element wird erschaffen
    var input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("id", "heim");

    var form = document.getElementsByTagName("body")[0];

// das Feld wird deinem Formular untergeordnet
    form.appendChild(input);

// zweites Inputfeld
    input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("id", "gast");

    form = document.getElementsByTagName("body")[0];
    form.appendChild(input);


} 
</script>
</head>
<body>

<div>
 <input type="text" name="tore_heim[]" size="10" maxlength="10">
 <input type="text" name="tore_gast[]" size="10" maxlength="10">
</div>
<input type="button" value="Feld hinzufügen" onclick="javascript:neues_feld()" />
</body>
</html>

 

[Honk1910]

AW: Dynamisch Input-Felder

ohhh danke das geht schon mal.

jetzt habe ich das prob das die werte die in einem neu erzeugten input stehen nicht beim senden mit übergeben werden.

 

[Honk1910]

AW: Dynamisch Input-Felder

habs dann doch mittels php gelöst.

thx for help