Site wird bei Auswahl einer Checkbox um Inhalt ergänzt

[mkScheller]

Hi,

beim Anklicken einer Checkbox wird die HTML-Site um den jeweiligen Inhalt dynamisch ergänzt. Wäre nett, wenn mir jemand dafür eine einfache Variante nennt.

Ich habe also 3 Checkboxen:

x Anrede

x Informationen zum Auto

x Vertragsvorlage

Wenn der Anwender jetzt auf "Informationen zum Auto" klickt, soll sofort nach dem Klick die Site um die Informationen zum Auto ergänzt werden. Und wenn nun der User auch noch die Checkbox "Anrede" anklickt, soll über den Informationen auch noch die Anrede erscheinen.

Wie macht man das am besten? 3 HTML-Sites bauen, eine für jede Checkbox und die dann per Jscript einfügen oder wie??

Gruss

-mk

[BayK]

naja grundsätzlich hast du da viele möglichkeiten

* Du wirfst die ganzen Informationen in die HTML-Seite und blendest die sachen die du haben willst über divs ein

* du machst einfach ein IFrame und ladest je nach auswahl bestimmte seiten rein

* du machst n kommunikations-iframe wo du die infos aus der DB ladest (oder sonst irgendwoher) und fügst die nachher mit JS ein

[kills]

naja grundsätzlich hast du da viele möglichkeiten

* Du wirfst die ganzen Informationen in die HTML-Seite und blendest die sachen die du haben willst über divs ein

* du machst einfach ein IFrame und ladest je nach auswahl bestimmte seiten rein

* du machst n kommunikations-iframe wo du die infos aus der DB ladest (oder sonst irgendwoher) und fügst die nachher mit JS ein

alternative 1 ist meiner Ansicht nach die beste!

[BayK]

alle 3 methoden haben vor und nachteile....

wenn bei jedem punkt 10 große bilder sind, welche erst geladen werden müssen dann is die erste methode sicher net die beste

[kills]

alle 3 methoden haben vor und nachteile....

wenn bei jedem punkt 10 große bilder sind, welche erst geladen werden müssen dann is die erste methode sicher net die beste

mag sein....

Bilder kann man preloaden....

[BayK]

die frage ist ob du die bilder dann überhaupt laden musst...

[kills]

die frage ist ob du die bilder dann überhaupt laden musst...

wenn ich bilder anzeigen will muss ich diese auch laden.... ausser sie sind schonma geladen worden (cache)...

[BayK]

ihc meinte wenn ein user nur eine checkbox auswählt und dann die seite verlässt muss er nur die images laden, welche auf der seite der einen checkbox verbergen ...

und wenn man die images preloaded hat man lange Wartezeiten beim aufruf der seite, was meist auf wenig verständnis beim kunden, bzw. user stößt....

[kills]

ihc meinte wenn ein user nur eine checkbox auswählt und dann die seite verlässt muss er nur die images laden, welche auf der seite der einen checkbox verbergen ...

und wenn man die images preloaded hat man lange Wartezeiten beim aufruf der seite, was meist auf wenig verständnis beim kunden, bzw. user stößt....

das ist richtig, man kann den preloade mechanismus aber auch erst dann starten wenn die seite komplett da ist. dann ist alles in butter und der kunde bekommt davon nichts mit

[BayK]

ok hast mich geschlagen

:uli

[kills]

ok hast mich geschlagen

:uli

:cool:

hehe, fettes battle

[BayK]

obwohl ich ja net gerade ein freund von preloadern bin, aber das is n anderes thema

[mkScheller]

Herzlichen Dank erstmal.

habe es folgendermaßen gemacht (nur wesentliche codeteile):

<script language="Javascript">

function clickedCity(){

  document.write("blumdada")

}

</script>

<form action="input_checkbox.htm">

<p>Select desired contents</p>

<p>

<input type="checkbox" name="component" value="bling" onChange="clickedCity()">

<br><br>

</p>

</form>

Aber es funktioniert nicht, wieso?

[geloescht_JesterDay]

function insertText(source, target)

{

  target.value = target.value + source.value;

}


.

.

.

.


<textarea name="Text" id="target_text">

Guten Tag 

</textarea>


<select name="Anrede" 

onchange="insertText(this, document.getElementById('target_text'))" >

  <option value="Herr">Herr</option>

  <option value="Frau">Frau</option>

</select>

ungetestet!

[mkScheller]

ist es möglich, jenes zu erreichen, ohne das man vorher etwas sieht? sprich ohne dass man zuvor ein textfeld festlegt, was der user sieht? also:

o pizza salami

o pizza xtremo

o pizza klein

o pizza riesig

Beim markieren von "pizza xtremo" soll es dann so aussehen:

o pizza salami

x pizza xtremo

Enthält: Alles

Preis: 5 EUR

o pizza klein

o pizza riesig

und wenn der user den haken jetzt wieder wegnimmt soll es wieder so aussehen wie oben.

[geloescht_JesterDay]

ist es möglich, jenes zu erreichen, ohne das man vorher etwas sieht? sprich ohne dass man zuvor ein textfeld festlegt, was der user sieht?

Natürlich, du musst nur die Ersetzungs-Funktion entsprechend schreiben. wie du das machst bleibt dir überlassen, aber ein (einfaches) Beispiel wäre:

function insertText(source, target)

{

  if (source.value == 'pizza xtremo'  

    target.value = target.value + '<div>Enthält: Alles <br />

      Preis: 5 EUR</div>';

}

Zurücksetzen geht damit aber so direkt nicht. Da müsstest du dir praktisch den Grundtext irgendwie merken, hab dazu im Moment keine Lösung.

Oder du machst es mit CSS und :content in Kombination mit Javascript.

Dann bräuchtest du für jede Pizza aber ein eigenes CSS, das extra geladen wird.

Also du lädst das Standard-CSS der Seite und zusätzlich noch je ein CSS für jede Pizza.

HTML:

<div id="salami">Pizza Salami</div>

<div id="extremo">Pizza Extremo</div>

und dein extremo.css:

#extremo:after { content:"<div>Enthält: Alles <br />Preis: 5 EUR</div>"; }

Die CSS für die Pizzen wären erstmal disabled und würden beim MouseOver entsprechend enabled werden.

Hab das noch nie gemacht, nur gestern gehört, dass es möglich wäre eine geladene CSS-DAtei per Javascript zu en- bzw. disablen.

Das ist also nur ne Idee und kann vielleicht irgendwie anders besser umgesetzt werden.

EDIT:

Ach ja: Vielleicht kann man mit Javascript ja auch einzelne Klassen en-bzw. disablen, dann könntest du das CSS in den Head schreiben. Also z.B. wenn du deine Seite mit PHP ausgibst aus einer DB o.ä. die Infos einlesen.

[kills]

willst du eine mehrfachauswahl ermöglichen, oder soll nur einer der gewählten punkte wählbar sein?

bei mehrfachwahl musst du checkboxen nehmen, bei einfach wahl nur radio-buttons...

naja ich würds ma so machen:

<ul>

  <li>

    <input type="checkbox" name="pizza" id="extremo" onChange="toggleElement( this)"/>

    <label for="extremo">pizza extremo</label>

    <div style="display: none" id="ext_extremo"> Enthält: Alles<br/>Preis: 5 EUR</div>

  </li>

  <li>

    <input type="checkbox" name="pizza" id="salami" onChange="toggleElement( this)"/>

    <label for="salami">pizza salami</label>

    <div style="display: none" id="ext_salami"> Enthält: Viel Salami<br/>Preis: 4 EUR</div>

  </li>

</ul>

function toggleElement( source) {

  var oExt = document.getElementById( "ext_" + source.id);

  if ( this.checked) {

    oExt.style.display = '';

  } else {

    oExt.style.display = 'none';

  }

}

ungetestet!

[mkScheller]

So, habe es nun endlich hinbekommen! :floet:

<html>

<head>

<title>AAAA</title>


<script language="JavaScript" type="text/javascript">

<!--

function show(source, target)

{

  if (source.checked) {

    if(document.getElementById) {

      document.getElementById(target).style.display = "block";

    }

  }

  else

  {

    document.getElementById(target).style.display = "none";

  }

}

//-->

</script>


</head>

<body>


<h1>AAA</h1>


<form name="demo">

<input type=checkbox name="punkte" value="erstens" onClick="show(this, 'Absatz1')">

Pizza Salami<br>

<p id="Absatz1" style="display:none">BLUMBUM</p>


<input type=checkbox name="punkte" value="zweitens" onClick="show(this, 'Absatz2')">

Pizza klein<br>

<p id="Absatz2" style="display:none">blum</p>


</form>


</body>

</html>

getestet mit IE v6.0xxxxxxxxxx