Formularfelder ein-/ausblenden

**m@xx** · 10.03.2011, 15:26

Hallo Leute,

ich habe mich jetzt mal an jQuery rangewagt. Aber es klappt noch nicht alles so, wie es soll. Ich möchte bei einem Formular zusätzliche Felder ein. bzw ausblenden lassen können. Die Anzahl der Felder ist aber fest.

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<title>title</title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
 		$(document).ready(function() {
      		$("#lf_add_topic").click(function() {
				$("#lf_art_1").next(":hidden").removeClass("lf_hide");
   			});
			
			$(".removelink").click(function() {
				$(this).parent().addClass("lf_hide");
			})
 		});
	</script>
	<style>
		.lf_hide {
			display: none;
		}
	</style>
	</head>
	<body>
		<form>
	<fieldset class="lf_show" id="lf_art_1">
		<label class="head">Schulart zuordnen</label>
		<div class="lf_line">
			1
		</div>
	</fieldset>
	
	<fieldset class="lf_hide" id="lf_art_2">
		<label class="head">Schulart zuordnen</label>
		<div class="lf_line">
			2
		</div>
		<a href="#" class="removelink">remove</a>
	</fieldset>
	<fieldset class="lf_hide" id="lf_art_3">
		<label class="head">Schulart zuordnen</label>
		<div class="lf_line">
			3
		</div>
		<a href="#" class="removelink">remove</a>
	</fieldset>
	<fieldset class="lf_hide" id="lf_art_4">
		<label class="head">Schulart zuordnen</label>
		<div class="lf_line">
			4			
		</div>
		<a href="#" class="removelink">remove</a>
	</fieldset>
	<fieldset class="lf_hide" id="lf_art_5">
		<label class="head">Schulart zuordnen</label>
		<div class="lf_line">
			5
		</div>
		<a href="#" class="removelink">remove</a>
	</fieldset>
	
	<a href="#" class="addlink" id="lf_add_topic"><div class="addform">
		<div class="left_add">add Theme</div>
	</div></a>		
		</form>
	</body>
</html>

Über den Link am Ende kann man dann die Felder hinzufügen. Jedes Feld an einen eigen Entfernbutton.
Das Script läuft zumindest soweit, dass man das zweite "fieldset" anzeigen lassen kann und entfernen lassen kann. Aber die übrigen drei Felder kann man nicht anzeigen lassen.

Hat jemand eine Idee?

Schon mal Danke im Voraus!
Gruß
Max

**Kryptaesthesie** · 11.03.2011, 17:07

Ändere das Setzen des Click-Events bspw. so:

Code:

$("#lf_add_topic").click(function() {
    $("form").find(".lf_hide:first").removeClass("lf_hide");
});

Gruß
der Gerrit

**m@xx** · 12.03.2011, 09:39

Danke! Es klappt :-)
Gruß
Max

zur Startseite vom TP

Thema: Formularfelder ein-/ausblenden

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Formularfelder ein-/ausblenden

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

Formularfelder

Formularfelder

Formularfelder

formularfelder

formularfelder

Stichworte

Aktive Benutzer

Aktive Benutzer

Berechtigungen