HTML teile verstecken

hallo,

der Titel si jetzt nich de rbeste aber mir fällt nix besseres ein ...

Mich würde interessieren ob es geht, dass man für jede option die ich per

		<b>Artikeltyp:</b><br>
		<input type="radio" name="type" value="book" checked="checked"> Buch <br>  
		<input type="radio" name="type" value="film"> Film <br>  
		<input type="radio" name="type" value="sonstiges"> Sonstiges <br>  

auswählen kann die restliche Seite leicht geändert angezeigt wird

für books zB:

<tr>
	<td>Name/Titel:</td>
	<td><input type="text" name="titel" value="" size="40"></td>  
	<td>Autor:</td>
	<td><input type="text" name="autor" value="" size="40"></td>  
</tr>

für filme dann:

<tr>
	<td>Name/Titel:</td>
	<td><input type="text" name="titel" value="" size="40"></td>  
	<td>Regisseur:</td>
	<td><input type="text" name="autor" value="" size="40"></td>  
</tr>

und ein paar einträge sollen kommlett "versteckt" werden zB

<tr>
	<td>IMDB Link:</td>
	<td><input type="text" name="imdb" value="" size="40"></td>  
	<td>Länge (in min):</td>
	<td><input type="text" name="laenge" value="" size="40"></td>  
</tr>

Hoffe mir kann jemand weiterhelfen
Schonmal thx

leb0rtran

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 66660

Url: https://administrator.de/forum/html-teile-verstecken-66660.html

Ausgedruckt am: 27.12.2024 um 18:12 Uhr

16 Kommentare

Neuester Kommentar

Hallo,

soweit ich das erstmal erkenne sind das zwei verschiedene Sachen:

1. "und ein paar einträge sollen kommlett "versteckt" werden zB" daraus schließe ich, dass sie nie angezeigt werden, auch nicht in Abhängigkeit von den obigen Radio-Buttons? Dann solltest du einfach <input type="hidden"...> verwenden.

2. die anderen Abschnitte sollen wohl nur angezeigt werden, wenn oben die entsprechende Option (type) gewählt ist? Das lässt sich mit JavaScript ganz gut machen. Und eigentlich sollten das alle Ajax-Bibliotheken können. Die Abschnitte werden in <div>s verpackt und können dynamisch (also während der Anzeige im Browser, in Abhängigkeit von Ereignissen wie dem Auswählen eines anderen Radio-Buttons, angezeigt und ausgeblendet werden. Suche naja "Ajax" oder "HTML layer ausblenden javascript" o.ä.

Filipp

zu 1.
ne nicht komplett sondern nur wenn file gedrückt is wirds garnicht angezeigt sondern nur bei books

zu 2.
kk ich probiers ma xD

ich find leider nix gescheites wie ich das funktioniert
hab von javascript auch leider 0plan

kannste mir des ma genauer erklähren wie das gehn soll

hi leb0rtran

hab hier was kleines für dich was dein problem lösen sollte. ich hoffe das forum lässt den code zu. er is mit firefox und ubuntu getestet und funktioniert dort. einfach die checkbox anklicken

<script type="text/javascript">
function hide(){
if(document.getElementById("test").checked==true){
document.getElementById("text").type="hidden";
}
}
</script>

<form action="" method="post">
<input type="checkbox" name="test" id="test" onclick="hide();" />
<input type="text" name="text" id="text" />
</form>

mh, funktioniert ma nich

was is da falsch?

<body>

<script type="text/javascript">  
function hide(){
if(document.getElementById("book1").checked==true){  
document.getElementById("film").type="hidden";  
document.getElementById("sonstiges").type="hidden";  
}
}

function hide(){
if(document.getElementById("film1").checked==true){  
document.getElementById("book").type="hidden";  
document.getElementById("sonstiges").type="hidden";  
}
}

function hide(){
if(document.getElementById("sonstiges1").checked==true){  
document.getElementById("book").type="hidden";  
document.getElementById("film").type="hidden";  
}
}
</script>



<form action="ebay-script.php" method="post">  

<p>

<table border="0" cellspacing="20" cellpadding="0">  

<tr>
	<td>
		<b>Artikeltyp:</b><br>
		<input type="radio" name="type" value="book" checked="checked" id="book1" onclick="hide();"> Buch <br>  
		<input type="radio" name="type" value="film" id="film1" onclick="hide();"> Film <br>  
		<input type="radio" name="type" value="sonstiges" id="sonstiges1" onclick="hide();"> Sonstiges <br>  
	</td>
</tr>

</table>


<div id="book">  
<table border="0" cellspacing="20" cellpadding="0">  

blub BOOK

</table>
</div>


<div id="film">  
<table border="0" cellspacing="20" cellpadding="0">  

blub FILM

</table>
</div>


<div id="sonstiges">  
<table border="0" cellspacing="20" cellpadding="0">  

blub SONSTIGES

</table>
</div>
</p>
</form>
</body>

im folgenden dein script wie du es wahrscheinlich wolltest.

erklärung:ne funktion kann es nur einmal geben (ausser in spezialfällen) und diese fälle sind hier nicht gegeben, daher hide1,2,3.

ausserdem ist es ein unterschied ob du in ein input feld schreibst oder in ein html element wie z.b. div,span,...

in inputfelder oder formularelemente schreibst du mit value
in html elemente mit innerHTML

<body>

<script type="text/javascript">
function hide1(){
if(document.getElementById("book1").checked==true){
document.getElementById("film").innerHTML="";
document.getElementById("sonstiges").innerHTML="";
}
}

function hide2(){
if(document.getElementById("film1").checked==true){
document.getElementById("book").innerHTML="";
document.getElementById("sonstiges").innerHTML="";
}
}

function hide3(){
if(document.getElementById("sonstiges1").checked==true){
document.getElementById("book").innerHTML="";
document.getElementById("film").innerHTML="";
}
}
</script>

<form action="ebay-script.php" method="post">

<p>

<table border="0" cellspacing="20" cellpadding="0">

<tr>
<td>
Artikeltyp:<br>
<input type="radio" name="type" value="book" checked="checked" id="book1" onclick="hide1();"> Buch <br>
<input type="radio" name="type" value="film" id="film1" onclick="hide2();"> Film <br>
<input type="radio" name="type" value="sonstiges" id="sonstiges1" onclick="hide3();"> Sonstiges <br>
</td>
</tr>

</table>

<div id="book">
<table border="0" cellspacing="20" cellpadding="0">

blub BOOK

</table>
</div>

<div id="film">
<table border="0" cellspacing="20" cellpadding="0">

blub FILM

</table>
</div>

<div id="sonstiges">
<table border="0" cellspacing="20" cellpadding="0">

blub SONSTIGES

</table>
</div>
</p>
</form>
</body>

ok ...
2 probleme gibts da noch

1. standartmäßig is ja books markiert, es zeigt aber alle 3 div-boxen an, nicht nur books

2. wenn ich erst auf filme geh und dann zurück auf books zeigts nüx mehr an
da wärs nice wenns wieder books anzeigt

zu1

es gibt das onload event heißt wenn du eine funktion beim laden ausführen möchtest kannst du das in den body packen

<body onload="hide1();">

</body>
damit führt er hide1 beim laden der seite aus

zu 2

dafür musst du nur die funktionen anpassen. das document.getElementById("").innerHTML=""; muss angepasst werden. im moment löschst du nur inhalte bzw du schreibst einen leerstring rein mit "". um einfach was reinzuschreiben musst du nur zwischen die "" einen text schreiben.

1. funktioniert jetzt

2. aber ich möcht ja nich was reinschreiben sondern er soll wieder die entsprechende div box anzeigen, also bei funktion1 die div box book etc
wie geht das?

wenn du die funktion hide1 aufrufst geht diese einfach her und löscht den inhalt einer der div boxen. damit das was vorher drin stand wieder drin steht musst du einfach anstatt der "" einen text "..." schreiben. dann steht dieser text in der entsprechenden div box.

bsp:

function hide1(){
if(document.getElementById("book1").checked==true){
document.getElementById("film").innerHTML="";
document.getElementById("sonstiges").innerHTML="";
//die nächste zeile ist die antwort
document.getElementById("book").innerHTML="blub BOOK";
}
}

ja, aber kann ich da nich irgentwie nen verweiß auf den inhalt der div box machen?
sonst müsst ich ja den kompletten inhalt der box nochma in die funktion reinschreiben (is n bisschen mehr als nur "blub BOOK" xD)

var film='test';

function hide1(){
if(document.getElementById("book1").checked==true){
document.getElementById("film").innerHTML=film;
document.getElementById("sonstiges").innerHTML="";
}
}

du kannst es wie die var film erzeugen und dann innerhalb der funktionen verwenden. du musst nur aufpassen das du keine zeilenumbrüch drin hast, heißt zeilenumbrüch im quelltext. sowas wie ein <br /> darf natürlich drin stehen. wenn du nun noch inputfelder oder sonstige stellen mit ' verwenden willst musst du sie im quelltext duch \' kennzeichnen. der \ sagt jvascript das jetzt ein zeichen kommt das nicht interperitiert werden soll. du kannst auch im oberen bsp bei var film="test" anführungszeichen verwenden. dann gilt natürlich wie bei den ' das du weitere " mit \" schreiben musst.

ach ja mir fällt da grad noch ne simpler lösung ein. mach einfah ne div box mit dem style="width:1px; height:1px;" und schreibst in diese div den gewünschten text. in der funktion gehst du dann einfach her und holst den text auch der "unsichtbaren" box und schreibt ihn in ne andere box rein. ich bin mir nur grad nich sicher in wieweit divs ne größe von 0x0 erlauben daher die 1x1. du kannst sie ja noch unten rechts positionieren so das man sie nicht erkennt wen man nicht im quellcode rumstochert.

document.getElementById("film").innerHTML=document.getElementById("unsicht_div_film").innerHTML;

hab das jetzt am mit der letzten idee von dir gemacht

in der css:

#sonstiges
#book
{
	width: 0px;
	height: 0px;
}


#film
{
	width: 0px;
	height: 0px;
}


#sonstiges
{
	width: 0px;
	height: 01px;
}

und html:

<html>
<title>
<link rel="stylesheet" type="text/css" href="style.css">  
</title>

<body onload="hide1();">  

<script type="text/javascript">  
function hide1(){
if(document.getElementById("book1").checked==true){  
document.getElementById("output").innerHTML=document.getElementById("book").innerHTML;  
}
}

function hide2(){
if(document.getElementById("film1").checked==true){  
document.getElementById("output").innerHTML=document.getElementById("film").innerHTML;  
}
}

function hide3(){
if(document.getElementById("sonstiges1").checked==true){  
document.getElementById("output").innerHTML=document.getElementById("sonstiges").innerHTML;  
}
}
</script>



<form action="ebay-script.php" method="post">  

<p>

<table border="0" cellspacing="20" cellpadding="0">  

<tr>
<td>
Artikeltyp:<br>
<input type="radio" name="type" value="book" checked="checked" id="book1" onclick="hide1();"> Buch <br>  
<input type="radio" name="type" value="film" id="film1" onclick="hide2();"> Film <br>  
<input type="radio" name="type" value="sonstiges" id="sonstiges1" onclick="hide3();"> Sonstiges <br>  
</td>
</tr>

</table>


<div id="book">  
<table border="0" cellspacing="20" cellpadding="0">  

blub BOOK

</table>
</div>


<div id="film">  
<table border="0" cellspacing="20" cellpadding="0">  

blub FILM

</table>
</div>


<div id="sonstiges">  
<table border="0" cellspacing="20" cellpadding="0">  

blub SONSTIGES

</table>
</div>


<div id="output">  
</div>


</p>
</form>
</body>
</html>

aber die 3 div boxen werden nich wie gewünscht "versteckt" dürch das 0px (bei 1px wars das selbe)

output is das

Artikeltyp:
Buch
Film
Sonstiges

blub BOOK
blub FILM
blub SONSTIGES
blub SONSTIGES

--> die Funktion etc is richtig, nur die 3 div boxen book, film, und sonstiges nich

wie kann ich die durch die css unsichtbar machen

ok ich hab die style css nochmal angepasst und es bei mir getestet.

#book
{

width: 1px;
height: 1px;
overflow:hidden;
}

#film
{
width: 1px;
height: 1px;
overflow:hidden;
}

#sonstiges
{
width: 1px;
height: 1px;
overflow:hidden;
}

zu der anderen datei:

du solltest dich ein wenig über html schlau machen

http://de.selfhtml.org/navigation/html.htm

das is ne ganz gute referenz für html, css und javascript

im folgenden der richtige aufbau. mit dem es bei mir auch funktioniert.

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="hide1();">

</body>
</html>