mit onclick weitere Input - Felder erzeugen

[mehrSchlecht]

Hallo Leute,

ich bin absoluter JavaScript - Anfänger und würde mich freuen wenn mir jemand helfen könnte. Ich versuche seit zwei Tagen einen wahrscheinlich einfaches Problem zu lösen. Ich hab zwar einige Beispiele angeschaut aber ich komme einfach nicht drauf.

Zum Problem:

Ich habe einige input - Felder. Ich will dass der User bei Bedarf weitere erzeugt.

<table id="ingredient">
                                <p><input type="text" name="name0" size="10">
                                        <select name="value0">
                                             <option value="0" selected="selected">- bitte wählen -</option>
                                             <option value="1">&nbsp;</option>
                                             <option value="2">kg</option>
                                             <option value="3">g</option>
                                             <option value="4">l</option>
                                             <option value="5">ml</option>
                                             <option value="6">cl</option>
                                             <option value="7">EL</option>
                                             <option value="8">TL</option>
                                                </select>
                                              <input type="text" name="wert0" size="80">
                                        </p>
</table>
<input type="button" onclick="insRow()" value="Insert row">

<script type="text/javascript">
function insRow()
{
    ?????????
}
</script>

Wer kann mir helfen bzw. Tipps oder Ressourcen nennen? Wäre sehr dankbar.

mfg

[kkapsner]

Was hast du probiert? Woran bist du genau gescheitert? Wieviel JS kannst du?

[mehrSchlecht]

um ehrlich zu sein kann ich absolut kein JavaScript. Ich hab gegoogelt und hab Code gefunden die so etwas ähnliches machen. Konnte es aber nicht umschreiben.

Dieser Code erzeugt ähnliche Reihen. Aber ich verstehe es nicht.

<script type="text/javascript">
function insRow()
{
var x=document.getElementById('myTable').insertRow(-1);
var y=x.insertCell(0);
var z=x.insertCell(1);
var i=6;

y.innerHTML='<input type="text" name="ydata[i]">';
z.innerHTML="Wert ".i;

i=i+1;
}
</script>

[kkapsner]

Dann solltest du zuerst die Grundlagen von JS lernen.
Anschließend suchst du den logischen Fehler und den schwachsinnigen Befehl in dem Skript.
Anschließend beschäftigst du dich ein wenig mit dem DOM (https://developer.mozilla.org/en/DOM) und probierst ein wenig herum.

Wenn du dann immer noch nicht zum Ziel gekommen ist, zeigst du uns, was du probiert hast, und wir versuchen dir Hilfestellung zu geben.

[mehrSchlecht]

Ja, hab angefangen das hier zu lesen
http://www.w3schools.com/js/default.asp

Hatte nur gehofft dieses eine Probleme schneller zu lösen. Wollte ne kleine Seite für unser Verein machen. Aber ja, nun gut.

DOM ist also das Schlüsselwort. Danke für den Tipp.

[kkapsner]

Siehe es als Chance an, etwas Neues zu lernen.

[ein schlauer]

Hatte nur gehofft dieses eine Probleme schneller zu lösen.

Welche Probleme?
Deine einzige "Frage" war:

Dieser Code erzeugt ähnliche Reihen. Aber ich verstehe es nicht.

Also ist dein Problem, es nicht zu verstehen, welche andere Lösung gibt es, als es dann zu lernen?

[mehrSchlecht]

Ich hab ein gutes Tutorial für "DOM" auf Deutsch gefunden.

http://www.peterkropff.de/site/javas...nipulation.htm

Ich habe eine einfache Lösung für diesen Fall und zwar mit cloneNode. Es funktioniert auch zumindest unter Firefox und Chrome. Wollte aber mal deine Meinung dazu hören ob es nicht evtl. Problem geben könnte.

<script type="text/javascript">
            <!--
            function setStart()
            {
                dolly  = document.getElementById('cloneMe').cloneNode(true);
                document.getElementById('noClone').appendChild (dolly);
            }
</script>

<table>
                <p id="cloneMe"><input type="text" name="menge[]" size="10">
                    <select name="einheit[]">
                            <option value="0" selected="selected">- bitte wählen -</option>
                            <option value="1">&nbsp;</option>									
                    </select>
                    <input type="text" name="zutat[]" size="80">
                </p>
                <p id="noClone"><input type="text" name="menge[]" size="10">
                    <select name="einheit[]">
                            <option value="0" selected="selected">- bitte wählen -</option>
                            <option value="1">&nbsp;</option>									
                    </select>
                    <input type="text" name="zutat[]" size="80">
                </p>         
</table>

<a href="#" onclick="setStart();">Zeigen</a>

Übrigens, danke für den Tip mit DOM. Wusste vorher nicht wonach ich suchen sollte

[kkapsner]

<a href="#">? Invalide und sinnfrei!

Ansonsten solltest du dringend dein HTML validieren.

Der Ansatz mit .cloneNode klingt nicht schlecht... soweit ich das sehe, erzeugst du damit aber ein <p> zu viel und außerdem ein zweites Element mit der ID "cloneMe" - IDs müssen dokumentenweit eindeutig sein.

[mehrSchlecht]

Funktioniert leider mit einem kleinen Nebeneffekt - also nicht wirklich brauchbar. Leider wird der Inhalt des input - feldes mit kopiert. Evtl. könnte man den Inhalt löschen. Aber, da fängt es an sinnfrei zu werden...

Hab den Script mal hochgeladen:

http://javascripttest.ja.ohost.de/nodeClone.html

Beide IDs sind eindeutig. Es sind zwei p - tags mit zwei unterschiedlichen IDs. Wenn ich das nicht so mache wird die Kopie potenziert. Also beim ersten mal 1 danch 2 , 4, 8 Felder. So wird es nur einmal kopiert.

<a href="#">? Invalide und sinnfrei!

Warum? Soll ich einen normalen Submit - Button nehmen?

[kkapsner]

Die beiden ursprünglichen IDs sind eindeutig, das sehe ich. ABER die neu eingebundenen Elemente haben durch das Clonen die gleiche ID. Schau' dir das Ganze einfach mal mit einem DOM-Inspektor an (z.B. Firebug im Firefox), nachdem du ein paar Elemente geklont hast.

Lass' das href einfach komplett weg.