14
HTML String per Hinzufügen Button anfügen
Hallo zusammen
Ich versuche seit einiger Zeit eine Seite zu erstellen. Auf dieser Seite ist unteranderem ein Hinzufügen Button. Wenn man auf diesen Button klickt sollte auf der Seite weitere Felder erscheinen, zum ausfüllen...
Diese Zeilen sollten nach den betätigen des Hinzufügen Button erneut darunter erscheinen:
<form action="neuesfeld.html" method="post">
<label for="name">Name</label>
<input type="text" name="name" id="name" required="required">
<select>
<option>Radiobutton</option>
<option>Checkbox</option>
<option>Textfeld</option>
<option>Textarea</option>
<option>Select (Dropdown)</option>
<option>Password</option>
</select>
Überprüfung
<select>
<option>Zahlen</option>
<option>Textl&aml;nge</option>
<option>Datum</option>
</select>
<input type="submit" name="submit" value="Hinzufügen">
Was wäre der einfachste Weg dies zu realisieren?
Ich habe mich ein bisschen schlau gemacht mit Javascript per fuction, aber noch nichts richtiges gefunden.
Ich kenne mich mit HTML/CSS aus und PHP bin ich mir am beibringen.
Danke für eure Hilfe
Ich versuche seit einiger Zeit eine Seite zu erstellen. Auf dieser Seite ist unteranderem ein Hinzufügen Button. Wenn man auf diesen Button klickt sollte auf der Seite weitere Felder erscheinen, zum ausfüllen...
Diese Zeilen sollten nach den betätigen des Hinzufügen Button erneut darunter erscheinen:
<form action="neuesfeld.html" method="post">
<label for="name">Name</label>
<input type="text" name="name" id="name" required="required">
<select>
<option>Radiobutton</option>
<option>Checkbox</option>
<option>Textfeld</option>
<option>Textarea</option>
<option>Select (Dropdown)</option>
<option>Password</option>
</select>
Überprüfung
<select>
<option>Zahlen</option>
<option>Textl&aml;nge</option>
<option>Datum</option>
</select>
<input type="submit" name="submit" value="Hinzufügen">
Was wäre der einfachste Weg dies zu realisieren?
Ich habe mich ein bisschen schlau gemacht mit Javascript per fuction, aber noch nichts richtiges gefunden.
Ich kenne mich mit HTML/CSS aus und PHP bin ich mir am beibringen.
Danke für eure Hilfe
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 233812
Url: https://administrator.de/contentid/233812
Printed on: April 19, 2024 at 04:04 o'clock
14 Comments
Latest comment
Hallo,
jquery sollte dir eigentlich liefern was du brauchst.
Im Endeffekt würde ich die CSS Eigenschaften dahingehend abändern lassen zum ein bzw. ausblenden.
jquery sollte dir eigentlich liefern was du brauchst.
Im Endeffekt würde ich die CSS Eigenschaften dahingehend abändern lassen zum ein bzw. ausblenden.
Okee.... und wie sollte das genau aussehen?
So wie es in der Dokumentation beschrieben ist?
http://jqueryui.com/hide/
oder
http://jqueryui.com/addClass/
http://www.w3schools.com/css/css_display_visibility.asp
Ansehen hättest es dir schon können
http://jqueryui.com/hide/
oder
http://jqueryui.com/addClass/
http://www.w3schools.com/css/css_display_visibility.asp
Ansehen hättest es dir schon können
ja aber wie will ich dort mein Code einfügen?
Überhaupt nicht.
Die Elemente sind immer da. Am besten packst du die in einen eigenständigen DIV Container.
Wie ich zu Anfang geschrieben hab. Einfach nur ein bzw. ausblenden.
Die Elemente sind immer da. Am besten packst du die in einen eigenständigen DIV Container.
Wie ich zu Anfang geschrieben hab. Einfach nur ein bzw. ausblenden.
Durch betätigen des Hinzufügen button erscheint ein neuer Hinzufügen Button und wenn dieser betätigt wird erscheint ein neuer... und so weiter...
nun weiss ich nicht wie viele Felder der User benötigt und soher das ausblenden nicht optimal ist.
nun weiss ich nicht wie viele Felder der User benötigt und soher das ausblenden nicht optimal ist.
Dann eben die anderen jquery Funktionen.
Nochmal jquery sollte das können was du brauchst. Du musst dir nur erst mal die Mühe machen das anzusehen.
Nochmal jquery sollte das können was du brauchst. Du musst dir nur erst mal die Mühe machen das anzusehen.
1
Oder wenn man mit Kanonen auf Spatzen schiessen will, weil man den anderen Source nicht vorher rausrücken will: AJAX.
Sieht dann z.B. so aus klick
Lonesome Walker
Sieht dann z.B. so aus klick
Lonesome Walker
Moin,
mal als Beispiel:
(du musst halt auch berücksichtigen das die Felder, wenn sie denn nachher übermittelt werden sollen jeweils separate Namen und id's bekommen sollten, was im Beispiel mit einem Counter gemacht wird)
Grüße Uwe
mal als Beispiel:
(du musst halt auch berücksichtigen das die Felder, wenn sie denn nachher übermittelt werden sollen jeweils separate Namen und id's bekommen sollten, was im Beispiel mit einem Counter gemacht wird)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
var counter = 1;
function addControls(el){
var parentDiv = $(el).parent();
var newline = parentDiv.clone();
newline.children('input[name^="name"]').attr("name","name" + counter).attr("id","name" + counter);
newline.insertAfter(parentDiv);
counter++;
}
function removeControls(el){
if($("#myform div").length > 1){
$(el).parent().remove();
}else{
alert("Diese Zeile kann nicht gelöscht werden");
}
}
</script>
<body>
<form action="neuesfeld.html" method="post" id="myform">
<div class="controlLine">
<label for="name">Name</label>
<input type="text" name="name0" id="name0" required>
<select>
<option>Radiobutton</option>
<option>Checkbox</option>
<option>Textfeld</option>
<option>Textarea</option>
<option>Select (Dropdown)</option>
<option>Password</option>
</select>Überprüfung<select>
<option>Zahlen</option>
<option>Textl&aml;nge</option>
<option>Datum</option>
</select>
<input type="button" value="Hinzufügen" onClick="addControls(this)" />
<input type="button" value="Löschen" onClick="removeControls(this)" />
</div>
</form>
</body>
</html>
var parentDiv = $(el).parent();
var newline = parentDiv.clone();
newline.children('input[name^="name"]')
Könntest du mir vielleicht diese Zeilen genauer erklären? Was da genau Passiert.
var newline = parentDiv.clone();
newline.children('input[name^="name"]')
Könntest du mir vielleicht diese Zeilen genauer erklären? Was da genau Passiert.
Holt sich eine Referenz des DIV-Containers in dem sich die Controls befinden
Hierzu input[name^="name"] siehe: http://api.jquery.com/attribute-starts-with-selector/
var newline = parentDiv.clone();
Dieser DIV-Container wird im Speicher dupliziert und der Variablen newline zugewiesennewline.children('input[name^="name"]')
hier wird für das Name-Input-Textelement im geklonten DIV jeweils der Name und die ID neu gesetzt, da ansonsten beim Klonen doppelte Namen und IDs im Quellcode vorhanden wären ....Hierzu input[name^="name"] siehe: http://api.jquery.com/attribute-starts-with-selector/
Gibt es auch eine möglichkeit den namen des DIVs zu ändern, also zu nummerieren?
Zitat von @miichiii9:
> Zitat von @colinardo:
> newline.children('input[name^="name"]')
Gibt es auch eine möglichkeit den namen des DIVs zu ändern, also zu nummerieren?
> Zitat von @colinardo:
> newline.children('input[name^="name"]')
Gibt es auch eine möglichkeit den namen des DIVs zu ändern, also zu nummerieren?
sicher dat:
newline.attr("id",'deinName' + counter);
jquery ist nicht schwer, man muss es nur mal
lesen: http://api.jquery.com/attr/
