2 Felder ausblenden

MacGyver30 · 14. September 2011

Moin, so, nach stundenlanger suche und einer halben Lösung frag ich jetzt mal nach. Javascript ist einfach nix für mich

Ich habe eine Dynamisch aufgebaute seite mit diversen Checkboxen. Hinter der jeweiligen Checkbox steht ein text. Danach kommt ein Input feld wo man eine Zeit eintragen muss und danach ein select feld wo man etwas auswählen soll. Mein Problem ist halt das man nicht jede Checkbox anwählen muss, aber trotzallem hinter jeder Checkbox die Zeiteingabe und das Selectfeld ist. Ich möchte gerne das diese beiden teile NUR eingeblendet werden wenn die Checkbox für das Feld auf Checked gesetzt ist.
Für ein Feld hab ich es geschaft, also nur die Zeit ein und ausblenden, aber wie das jetzt für 2 Felder gehen soll da ist dann bei mir ende. Vielleicht kann ja mal jemand helfen

.

Hier mal der Code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Blabla</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<meta name="author" content="mediaDental" />


<style type="text/css">
#myGroup {visibility:hidden} 
</style>

<script type="text/javascript"> 
function toggle(chkbox, group) { 
    var visSetting = (chkbox.checked) ? "visible" : "hidden"; 
    document.getElementById(group).style.visibility = visSetting; 
} 
</script>


</head>
<body>

<table border="1" cellpadding="0" cellspacing="0" width="100%">
	<tr bgcolor="#ffffff">
		<td align="center"><input type="checkbox" name="tid[]" value="2" onclick="toggle(this, 'myGroup')" /></td>

		<td align="center">Bla text zur Auswahl</td>
		<td align="center"><span id="myGroup"><input class="input" type="text" name="zeit2" value="">&nbsp;&nbsp;Stunden</span></td>
		<td align="center"><span id="myGroup"><select class="input" name="technikerid2"><option>Techniker wählen</option></select></span></td>
	</tr>
</table>


</body>
</html>

Vielleicht kann mir das mal jemand so abändern das es funktioniert. Würde nämlich bei 20 oder 30 Checkboxen
verdammt unübersichtlich aussehen wenn man nur 3 anklicken muss aber für jede die Zeit und die Technikerauswahl
zur verfügung steht.

Vielen dank schonmal.

CPoly · 14. September 2011

Dein jetziger HTML Code ist ungültig, weil eine id eindeutig sein muss. Aber dein Problem lässt sich leicht lösen.

Javascript:

function toggle(chkbox) {
    var row = chkbox.parentNode.parentNode;
    var visSetting = (chkbox.checked) ? "inline" : "none";

    row.getElementsByTagName('input')[1].display = visSetting;
    row.getElementsByTagName('select')[0].display = visSetting;
}

MacGyver30 · 15. September 2011

Hmm, mit dem Javacode bekomm ich nen Javafehler. Kannste mir da noch mitteilen warum?

CPoly · 15. September 2011

Teil mir den Fehler doch mit. Ich hab den Code nicht getestet und ich kann mich durchaus irgendwo vertan haben.

Und es ist JavaScript nicht Java.

MacGyver30 · 15. September 2011

Fehler ist einfach nur Object erwartet.

CPoly · 15. September 2011

Einen semantischen Fehler habe ich gerade entdeckt, aber der sollte keine Fehlermeldung produzieren.

Javascript:

function toggle(chkbox) {
    var row = chkbox.parentNode.parentNode;
    var visSetting = (chkbox.checked) ? "inline" : "none";
 
    row.getElementsByTagName('input')[1].style.display = visSetting;//Hier fehlte jeweils ".style"
    row.getElementsByTagName('select')[0].style.display = visSetting;
}

Jetzt funktioniert er aber, habe es getestet ;-)
Aber dein Ziel war denke ich, dass auch z.B. "Stunden" verschwindet.

Javascript:

function toggle(chkbox) {
	var spans = chkbox.parentNode.parentNode.getElementsByTagName('span');
	var visSetting = (chkbox.checked) ? "inline" : "none";

	spans[0].style.display = spans[1].style.display = visSetting;
}

MacGyver30 · 15. September 2011

Hmm, Fehler gibt es zwar nicht aber irgendwie bin ich doch zu blöd für Javascript.
Was muss denn jetzt in der Checkbox als onclick stehen? Und im Style? Und im Span id?

Es sollen die Stunden und Techniker nur auftauchen wenn für den Punkt die Checkbox gewählt wurde. Problem ist halt das die Daten "tabelle" über die SQL Datenbank aufgebaut wird und daher Dynamisch ist.

CPoly · 15. September 2011

Ich hab den Code einfach so in dein Dokument aus dem Startpost eingefügt. Da kannst du noch die ID streichen. Hier jetzt nochmal komplett mit drei Tabellen Spalten und alles angepasst ;-)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Blabla</title>
	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
	<meta name="author" content="mediaDental" />
	
	<style type="text/css">
	.hidden {visibility:hidden;} 
	</style>
	
	<script type="text/javascript"> 
	/* <![CDATA[ */
	function toggle(chkbox) {
		var spans = chkbox.parentNode.parentNode.getElementsByTagName('span');
		var visSetting = (chkbox.checked) ? "visible" : "hidden";
		
		spans[0].style.visibility = spans[1].style.visibility = visSetting;
	}
	/* ]]> */
	</script>
</head>
<body>

<table border="1" cellpadding="0" cellspacing="0" width="100%">
	<tr bgcolor="#ffffff">
		<td align="center">
			<input type="checkbox" name="tid[]" value="2" onclick="toggle(this, 'myGroup')" />
		</td>
		<td align="center">
			Bla text zur Auswahl
		</td>
		<td align="center">
			<span class="hidden"><input class="input" type="text" name="zeit2" value="" />&nbsp;&nbsp;Stunden</span>
		</td>
		<td align="center">
			<span class="hidden"><select class="input" name="technikerid2"><option>Techniker wählen</option></select></span>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="center">
			<input type="checkbox" name="tid[]" value="2" onclick="toggle(this, 'myGroup')" />
		</td>
		<td align="center">
			Foo bar
		</td>
		<td align="center">
			<span class="hidden"><input class="input" type="text" name="zeit2" value="" />&nbsp;&nbsp;Stunden</span>
		</td>
		<td align="center">
			<span class="hidden"><select class="input" name="technikerid2"><option>Techniker wählen</option></select></span>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="center">
			<input type="checkbox" name="tid[]" value="2" onclick="toggle(this, 'myGroup')" />
		</td>
		<td align="center">
			Bacon
		</td>
		<td align="center">
			<span class="hidden"><input class="input" type="text" name="zeit2" value="" />&nbsp;&nbsp;Stunden</span>
		</td>
		<td align="center">
			<span class="hidden"><select class="input" name="technikerid2"><option>Techniker wählen</option></select></span>
		</td>
	</tr>
</table>


</body>
</html>

MacGyver30 · 15. September 2011

Ja nen Traum. Wunderbar, was macht das?

Ich mag Javascript irgendwie nicht. Steig da einfach nicht durch. Danke nochmal

CPoly · 15. September 2011

Das Danke reicht

Solltest du mal was größeres haben, kann man mich auch mieten

. JavaScript spreche ich fließend.

2 Felder ausblenden

MacGyver30

Grünschnabel

CPoly

Mitglied Weizenbier

MacGyver30

Grünschnabel

CPoly

Mitglied Weizenbier

MacGyver30

Grünschnabel

CPoly

Mitglied Weizenbier

MacGyver30

Grünschnabel

CPoly

Mitglied Weizenbier

MacGyver30

Grünschnabel

CPoly

Mitglied Weizenbier

Neue Beiträge