Hva kalles dette? (JS)

[Atrixit]

Prøver å sette opp en liten dings hvor man velger alternativer ut fra radiobuttons, og velger så Next.

F.eks

* Frukt

* Grønnsak

* Kjøtt

* Fisk

Velger man en av disse og trykker next, får man opp nye valg innenfor valgt kategori

F.eks (Velger frukt)

* Eple

* Banan

* Appelsin

Velger man en av disse, får man opp info om valgt frukt når man igjen trykker next.

Så for meg at dette var enkle greier, men finner ikke så mye relevant i "Javascript for dummies" og w3schools. Muligens vet jeg ikke hva jeg skal lete etter.

Kan noen peke en nybegynner i rett retning?

Endret 13. juni 2012 av Atrixit

[Thomas.]

Du bør se litt på jquery! F.eks funksjonene hide, fadein/out og show.

Har raskt satt sammen et eksempel for deg som du kan se på og teste

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Når s1 trykkes
$('#s1').click(function() {
 // Hent value fra radio med name="r1"
 var val = $('input[name=r1]:checked').val();
 // Hvis du har valgt nr 1
 if(val == 1) {
  // Skjul steg1, fade in steg21
  $('#steg1').hide();
  $('#steg21').fadeIn('slow');
 }
 // Hvis du har valgt nr 2
 if(val == 2) {
  // Skjul steg1, fade inn steg 22
  $('#steg1').hide();
  $('#steg22').fadeIn('slow');
 }
 // Return false slik at siden ikke refresher når du trykker s1
 return false;
});
$('#s21').click(function() {
 var val = $('input[name=r21]:checked').val();
 if(val == 1) {
  $('#steg21').hide();
  $('#info11').fadeIn('slow');
 }
 if(val == 2) {
  $('#steg21').hide();
  $('#info12').fadeIn('slow');
 }
 return false;
});
$('#s22').click(function() {
 var val = $('input[name=r22]:checked').val();
 if(val == 1) {
  $('#steg22').hide();
  $('#info21').fadeIn('slow');
 }
 if(val == 2) {
  $('#steg22').hide();
  $('#info22').fadeIn('slow');
 }
 return false;
});
});
</script>
<div id="steg1">
<form>
	 1<input type="radio" value="1" name="r1"><br>
	 2<input type="radio" value="2" name="r1"><br>
		    <input type="submit" id="s1"><br>
    </form>
</div>
<div id="steg21" style="display:none;">
<p>Du valgte 1.</p>
<form>
	 1.1<input type="radio" value="1" name="r21"><br>
	 1.2<input type="radio" value="2" name="r21"><br>
		    <input type="submit" id="s21" value="Vis info"><br>
    </form>
</div>
<div id="steg22" style="display:none;">
<p>Du valgte 2.</p>
<form>
	 2.1<input type="radio" value="1" name="r22"><br>
	 2.2<input type="radio" value="2" name="r22"><br>
		    <input type="submit" id="s22" value="Vis info"><br>
    </form>
</div>
<div id="info11" style="display:none;">Info om 1.1 her.</div>
<div id="info12" style="display:none;">Info om 1.2 her.</div>
<div id="info21" style="display:none;">Info om 2.1 her.</div>
<div id="info22" style="display:none;">Info om 2.2 her.</div>

 

Vis jeg skulle foreslått noe du kan søke på må det vel være noe som "chained radio buttons" eller noe.

Endret 13. juni 2012 av Thomas.