nicht angemeldet
hinzufügen und löschen von Input-Feldern
Hallo.
Ich möchte das man auf Klick ein Input Feld hinzufügen kann. Neben einem Input feld ist ein Delete-Button, welcher es ermöglichen soll das Feld wieder wegzumachen.
Die Felder sind durchnummeriert. D.h. wenn 3 Felder da sind, heißen diese 1,2,3 und wenn ich 3 Wegklicke bleiben 1 und 2 - wenn ich aber 2 Wegklicke, soll 3 einfach in 2 umbenannt werden bzw. die Felder sollten halt neu durchnummeriert werden.
Ich habe allerdings von JS überhaupt garkeine Ahnung, könnt ihr mir da helfen?
Ich weiß das ich mit onclick arbeiten
muss und Elemente mit document.getElementById ansprechen kann.
Aber wie könnte man das ganze umsetzen?
Gruß,
talk
-
Hi,
Ich möchte das man auf Klick ein Input Feld hinzufügen kann. Neben einem Input feld ist ein Delete-Button, welcher es ermöglichen soll das Feld wieder wegzumachen.
Beschäftige dich mit dem DOM, insb. mit Methoden wie createElement, appendChild, removeChild.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak. -
Tendentiell solltest du, wenn du von JavaScript nicht viel Ahnung hast, mit einer Bibliothek arbeiten - aber etwas Grundwissen ist dennoch erforderlich.
Mit jQuery und append kannst du ohne Schwierigkeiten HTML-Elemente nach belieben hinzufügen (bei onclick-Event z.B.).
Beim entfernen eines Elements (ebenfalls über onclick und remove) kannst du nachher mit each() alle Elemente durchlaufen und deren name-Attribut verändern (also neu nummerieren).
-
Hier eine teils funktionsfähiges Script:
<html> <head> <style type="text/css"> body { margin:0px; padding:0px; text-align:center; } </style> [code lang=javascript] <script type="text/javascript"> function addElem() { mainForm = document.forms[0]; // Form_Tag anzElem = mainForm.getElementsByTagName("input").length; // Anzahl bereits vorhandener Input-Elemente newElem = document.createElement("input"); // Erstelle neues Element ... newElem.type = "text"; // ... von Typ 'text' ... newElem.name = anzElem + 1; // ... und name = anzahl der Elemente + 1 newElem.id = newElem.name; // id = name newElem.value = "Feld #"+ newElem.name; // value setzen mainForm.appendChild(newElem); // hinzufügen } function delElem() { mainForm = document.forms[0]; // Form_Tag elem = prompt("Bitte Nr. des Elements eingeben:"); // Nachfragen welche Nummer mainForm.removeChild(document.getElementById(elem)) // Löschen! sort(); // Sortieren } function sort() { for(var i=3; i < mainForm.getElementsByTagName("input").length; i++) { mainForm.getElementsByTagName("input")[i].name = i; mainForm.getElementsByTagName("input")[i].id = i; mainForm.getElementsByTagName("input")[i].value = "Feld #"+ i; } } </script></head>
<body>
<form>
<input type="button" name="" id="" value="Add" onclick="addElem();" />
<input type="button" name="" id="" value="Delete" onclick="delElem();" />
<br /><br />
</form>
</body>
</html>
[/code]Du kannst Felder erzeugen (text), die sind bereits numeriert, aber erst ab #3.
Felder werden gelöscht, und neu sortiert, zum teil.
Du musst die Funktionen noch erweitert/anpassen, aber die Grundstruktur deiner Anforderung ist da. Da ich leider keine Zeit habe, musst du es vervollständigen! Das packst du schon ;)