leb0rtran
Aug 20, 2007, updated at Aug 26, 2007 (UTC)
view6306
view16
0
Goto Top

HTML teile verstecken

GermanQuestionHTMLDevelopment
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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 66660

Url: https://administrator.de/contentid/66660

Printed on: April 19, 2024 at 21:04 o'clock

16 Comments
Latest comment
Goto Top
Member: filippg
filippg Aug 20, 2007 at 23:27:52 (UTC)
Goto Top
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
Member: leb0rtran
leb0rtran Aug 21, 2007 at 00:11:42 (UTC)
Goto Top
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
Member: leb0rtran
leb0rtran Aug 21, 2007 at 00:23:13 (UTC)
Goto Top
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
Member: aliasmp3
aliasmp3 Aug 21, 2007 at 08:58:49 (UTC)
Goto Top
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>
Member: leb0rtran
leb0rtran Aug 21, 2007 at 13:02:05 (UTC)
Goto Top
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>
Member: aliasmp3
aliasmp3 Aug 21, 2007 at 18:00:35 (UTC)
Goto Top
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>
Member: leb0rtran
leb0rtran Aug 21, 2007 at 21:25:59 (UTC)
Goto Top
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
Member: aliasmp3
aliasmp3 Aug 22, 2007 at 05:47:52 (UTC)
Goto Top
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.
Member: leb0rtran
leb0rtran Aug 22, 2007 at 11:53:12 (UTC)
Goto Top
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?
Member: aliasmp3
aliasmp3 Aug 22, 2007 at 12:20:58 (UTC)
Goto Top
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";
}
}
Member: leb0rtran
leb0rtran Aug 23, 2007 at 20:59:30 (UTC)
Goto Top
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)
Member: aliasmp3
aliasmp3 Aug 24, 2007 at 07:05:03 (UTC)
Goto Top
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.
Member: aliasmp3
aliasmp3 Aug 24, 2007 at 07:12:42 (UTC)
Goto Top
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;
Member: leb0rtran
leb0rtran Aug 25, 2007 at 19:14:17 (UTC)
Goto Top
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
Member: aliasmp3
aliasmp3 Aug 26, 2007 at 10:00:26 (UTC)
Goto Top
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>
Member: leb0rtran
leb0rtran Aug 26, 2007 at 17:55:24 (UTC)
Goto Top
kk
thx für deine hilfe

damit funktionierts ..
GermanQuestionHTMLDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsjstrickerWIREGUARD VPN ON UDM PRO BEHIND FRITZBOX - HANDSHAKE DID NOT COMPLETEjstricker - 3 CommentsDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment