Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

HTML String per Hinzufügen Button anfügen

Frage Entwicklung

Mitglied: miichiii9

miichiii9 (Level 1) - Jetzt verbinden

27.03.2014 um 09:17 Uhr, 2760 Aufrufe, 14 Kommentare, 1 Danke

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>
&Uuml;berpr&uuml;fung
<select>
<option>Zahlen</option>
<option>Textl&aml;nge</option>
<option>Datum</option>
</select>
<input type="submit" name="submit" value="Hinzuf&uuml;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
Mitglied: wiesi200
27.03.2014 um 09:39 Uhr
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.
Bitte warten ..
Mitglied: miichiii9
27.03.2014 um 09:48 Uhr
Okee.... und wie sollte das genau aussehen?
Bitte warten ..
Mitglied: wiesi200
27.03.2014 um 10:04 Uhr
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
Bitte warten ..
Mitglied: miichiii9
27.03.2014 um 10:10 Uhr
ja aber wie will ich dort mein Code einfügen?
Bitte warten ..
Mitglied: wiesi200
27.03.2014 um 10:40 Uhr
Ü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.
Bitte warten ..
Mitglied: miichiii9
27.03.2014 um 11:00 Uhr
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.
Bitte warten ..
Mitglied: wiesi200
27.03.2014 um 11:04 Uhr
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.
Bitte warten ..
Mitglied: 16568
27.03.2014, aktualisiert um 11:13 Uhr
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
Bitte warten ..
Mitglied: colinardo
27.03.2014, aktualisiert um 13:45 Uhr
Moin,
Zitat von miichiii9:

ja aber wie will ich dort mein Code einfügen?
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)
01.
<!doctype html> 
02.
<html> 
03.
<head> 
04.
<meta charset="utf-8"> 
05.
<title>Test</title> 
06.
</head> 
07.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
08.
<script type="text/javascript"> 
09.
var counter = 1; 
10.
function addControls(el){ 
11.
	var parentDiv = $(el).parent(); 
12.
	var newline = parentDiv.clone(); 
13.
	newline.children('input[name^="name"]').attr("name","name" + counter).attr("id","name" + counter); 
14.
	newline.insertAfter(parentDiv); 
15.
	counter++; 
16.
17.
function removeControls(el){ 
18.
	if($("#myform div").length > 1){ 
19.
		$(el).parent().remove(); 
20.
	}else{ 
21.
		alert("Diese Zeile kann nicht gelöscht werden");	 
22.
23.
24.
</script> 
25.
<body> 
26.
<form action="neuesfeld.html" method="post" id="myform"> 
27.
<div class="controlLine"> 
28.
<label for="name">Name</label> 
29.
<input type="text" name="name0" id="name0" required> 
30.
<select> 
31.
<option>Radiobutton</option> 
32.
<option>Checkbox</option> 
33.
<option>Textfeld</option> 
34.
<option>Textarea</option> 
35.
<option>Select (Dropdown)</option> 
36.
<option>Password</option> 
37.
</select>&Uuml;berpr&uuml;fung<select> 
38.
<option>Zahlen</option> 
39.
<option>Textl&aml;nge</option> 
40.
<option>Datum</option> 
41.
</select> 
42.
<input type="button" value="Hinzufügen" onClick="addControls(this)" /> 
43.
<input type="button" value="Löschen" onClick="removeControls(this)" /> 
44.
</div> 
45.
</form> 
46.
</body> 
47.
</html>
Grüße Uwe
Bitte warten ..
Mitglied: miichiii9
27.03.2014, aktualisiert um 16:20 Uhr
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.
Bitte warten ..
Mitglied: colinardo
27.03.2014, aktualisiert um 13:41 Uhr
Zitat von miichiii9:
var parentDiv = $(el).parent();
Holt sich eine Referenz des DIV-Containers in dem sich die Controls befinden
var newline = parentDiv.clone();
Dieser DIV-Container wird im Speicher dupliziert und der Variablen newline zugewiesen
newline.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/
Bitte warten ..
Mitglied: miichiii9
31.03.2014 um 16:55 Uhr
Zitat von colinardo:
newline.children('input[name^="name"]')

Gibt es auch eine möglichkeit den namen des DIVs zu ändern, also zu nummerieren?
Bitte warten ..
Mitglied: colinardo
31.03.2014, aktualisiert um 17:25 Uhr
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?

sicher dat:
newline.attr("id",'deinName' + counter);
jquery ist nicht schwer, man muss es nur mal
lesen: http://api.jquery.com/attr/
Bitte warten ..
Ähnliche Inhalte
JavaScript
String mit Umlauten in HTML-Textbox schreiben
Frage von mabue88JavaScript2 Kommentare

Hallo, ich weiss, dass das Thema eigentlich ausreichend im Netz behandelt wird. Aber ich bekomme es einfach nicht hin ...

JavaScript
Editieren und Löschen Button im Gästebuch hinzufügen
Frage von bigbootykillaJavaScript1 Kommentar

Hi Leute, ich bin ein wenig verzweifelt. Seit paar Tagen muss ich ein Gästebuch in Javascript mit AJAX als ...

Administrator.de Feedback
Link hinzufügen Button fehlt bei Administrator
gelöst Frage von holli.zimmiAdministrator.de Feedback9 Kommentare

Hi, ich kann den Button "Link" hinzufügen nicht sehen! Wenn ich auf Profil anzeigen gehe - dann kann ich ...

PHP
Bestimmten HTML-Code aus String auslesen
gelöst Frage von pennertennerPHP2 Kommentare

Hallo liebe Admins. :) Ich habe folgendes Problem. Ich habe einen HTML-Code (komplette Webseite) in einem String als Variable. ...

Neue Wissensbeiträge
Windows 10

Autsch: Microsoft bündelt Windows 10 mit unsicherer Passwort-Manager-App

Tipp von kgborn vor 4 StundenWindows 10

Unter Microsofts Windows 10 haben Endbenutzer keine Kontrolle mehr, was Microsoft an Apps auf dem Betriebssystem installiert (die Windows ...

Sicherheits-Tools

Achtung: Sicherheitslücke im FortiClient VPN-Client

Tipp von kgborn vor 5 StundenSicherheits-Tools

Ich weiß nicht, wie häufig die NextGeneration Endpoint Protection-Lösung von Fortinet in deutschen Unternehmen eingesetzt wird. An dieser Stelle ...

Internet

USA: Die FCC schaff die Netzneutralität ab

Information von Frank vor 20 StundenInternet3 Kommentare

Jetzt beschädigt US-Präsident Donald Trump auch noch das Internet. Der neu eingesetzte FCC-Chef Ajit Pai ist bekannter Gegner einer ...

DSL, VDSL

ALL-BM200VDSL2V - Neues VDSL-Modem mit Vectoring von Allnet

Information von Lochkartenstanzer vor 23 StundenDSL, VDSL1 Kommentar

Moin, Falls jemand eine Alternative zu dem draytek sucht: Gruß lks

Heiß diskutierte Inhalte
Netzwerkmanagement
Mehrere Netzwerkadapter in einem PC zu einem Switch zusammenfügen
Frage von prodriveNetzwerkmanagement21 Kommentare

Hallo zusammen Vorweg, ich konnte schon einige IT-Probleme mit Hilfe dieses Forums lösen. Wirklich klasse hier! Doch für das ...

Windows Server
Anmeldung direkt am DC nicht möglich
Frage von ThomasGrWindows Server16 Kommentare

Hallo, ich habe bei unserem Server 2016 Standard ein Problem. Keine Ahnung wie das auf einmal passiert ist. Ich ...

Hardware
Links klick bei Maus funktioniert nicht
gelöst Frage von Pablu23Hardware16 Kommentare

Hallo erstmal. Ich habe ein Problem mit meiner relativ alten maus jedoch denke ich nicht das es an der ...

TK-Netze & Geräte
VPN-fähige IP-Telefone
Frage von the-buccaneerTK-Netze & Geräte15 Kommentare

Hi! Weiss noch jemand ein VPN-fähiges IP-Telefon mit dem man z.B. einen Heimarbeitsplatz gesichert anbinden könnte? Habe nur einen ...