onchange form

Door Raul Wallaart op 02-05-2008 12:14

1.086 views

Typisch een gevalletje van de klepel gehoord, maar de klok niet zien hangen....

Een klein formuliertje waarbij de keuze uit de select lijst bepaalt hoe vaak een bepaalde regel herhaald wordt. Hoe krijg ik de waarde uit het formulier terug in de php for-loop?

Het is voor het eerst dat ik met javascript experimenteer...
Alvast bedankt!
hier is de code:


<html>
<head>
<script type="text/javascript">
function getPlayers()
{
var mylist = document.getElementById("players");
document.getElementById("showPlayers").value = players.options[players.selectedIndex].value;
}
</script>
</head>

<body>
<form>
how many players:
<select id="players" onchange="getPlayers()">
<option selected></option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<div id="showPlayers">
<?php
for($i = 1; $i < 4; $i +=1) 
	{
	echo '<input type="Text" name="player'.$i.'" value="player'.$i.'">&nbsp;<input type="checkbox" value="0"> invite<br>';
	}
?>	
</div>
</form>
</body>
</html>

Raul Wallaart

02-05-2008 14:13

Ben al een stapje verder. Het is iets minder dynamisch, want ik kan nog steeds niet de waarde uit mijn select-menu omzetten in de php-loop, maar door de property display te gebruiken kan ik div-jes aan of uit zetten. Nu is het probleem echter dat alles bij het begin zichtbaar is. Alle ideeën/opmerkingen meer dan welkom!


<html>
<head>
<script type="text/javascript">
function getPlayers()
{
var x = document.getElementById("players").value;
if(x == 2) {document.getElementById("block2").style.display = 'block';}
else{document.getElementById("block2").style.display = 'none';}
if(x == 3) {document.getElementById("block3").style.display = 'block';}
else{document.getElementById("block3").style.display = 'none';}
if(x == 4) {document.getElementById("block4").style.display = 'block';}
else{document.getElementById("block4").style.display = 'none';}
}
</script>
</head>

<body>
<form name="form1">
how many players:
<select id="players" onchange="getPlayers()">
<option></option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
Player 1 is you of course, you are already invited, by your self!!.<br>
<div id="block2"><br>
<input type="Text" name="speler2" value="speler 2">&nbsp;<input type="checkbox"> uitnodigen
</div>
<div id="block3"><br>
<input type="Text" name="speler2" value="speler 2">&nbsp;<input type="checkbox"> uitnodigen<br>
<input type="Text" name="speler3" value="speler 3">&nbsp;<input type="checkbox"> uitnodigen
</div>
<div id="block4"><br>
<input type="Text" name="speler2" value="speler 2">&nbsp;<input type="checkbox"> uitnodigen<br>
<input type="Text" name="speler3" value="speler 3">&nbsp;<input type="checkbox"> uitnodigen<br>
<input type="Text" name="speler4" value="speler 4">&nbsp;<input type="checkbox"> uitnodigen
</div>
</form>
</body>
</html>

- SanThe -

02-05-2008 14:16

Hallo Raul, Stadsgenoot,

Pas je script even aan en gebruik [ignore]

en

[/ignore] tags om je code heen. Gebruik je

knop om dit te doen.

Niet Bumpen.

Bumpen:
Twee of meer keer achter elkaar in een topic posten heet bumpen. Bumpen is pas na 24 uur toegestaan en kan een reden zijn voor de admins en moderators om een topic te sluiten. Gebruik indien nodig de knop om je tekst aan te passen.

SanThe.

Wouter K

02-05-2008 14:33

[offtopic]@Santhe : Nu kan je best ook in je profiel Leiden zetten :)[/offtopic]

Grtz
en nog veel suc6 hier. ;-)

Raul Wallaart

02-05-2008 14:38

[offtopic]
@SanThe: helaas geen stadsgenoot meer, ik zie dat ik mijn gegevens weer eens moet updaten.

Ik was me niet bewust van het 'bumpen', excuses daarvoor, maar begrijp ik goed dat ik pas weer mag posten nadat iemand anders iets heeft gepost op mijn bericht of anders pas na 24 uur, ondanks dat ik wellicht een geniale ingeving heb voor mijn (geposte) probleem en dus iemand anders ernaar laat kijken, terwijl ik ondertussen mijn antwoord al heb?
[/offtopic]
Groet

Jan Koehoorn

02-05-2008 15:03

Opzetje:


<html>
	<head>
		<script type="text/javascript" src="mootools/mootools.js"></script>
		<script type="text/javascript">
			window.addEvent ('domready', function () {
				$('players').addEvent ('change', function () {
					var n = this.getValue ();
					$('showPlayers').empty ();
					for (i = 1; i <= n; i++) {
						var p = document.createElement ('p');
						p.innerHTML = 'player ' + i;
						$('showPlayers').appendChild(p);
						var inp = document.createElement ('input');
						inp.id = 'player' + i;
						inp.name = 'player[]';
						inp.type = 'checkbox';
						inp.value = inp.id;
						p.appendChild (inp);
						var l = document.createElement ('label');
						l.setAttribute ('for', inp.id);
						l.innerHTML = 'invite';
						p.appendChild (l);
					}
				});
			});
		</script>
	</head>
<body>
	<form>
		how many players:
		<select id="players" name="players">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="showPlayers">
		</div>
	</form>
</body>
</html>

Raul Wallaart

02-05-2008 16:18

Er gaat een wereld voor me open! Het zal wat tijd kosten dit te verwerken en in me op te nemen.

In ieder geval bedankt voor je tijd en moeite

Raúl

Jan Koehoorn

02-05-2008 16:36

Hoi Raul,

in mijn voorbeeld maak ik gebruik van het Mootools Framework. Om dat goed te laten werken heb je mootools.js nodig.

Op regel 3 van mijn voorbeeld hierboven zie je dat mootools.js geinclude wordt. Bij mij staat het in een map met de naam mootools.

Veel succes met het bestuderen van het voorbeeld ;-)

Raul Wallaart

02-05-2008 17:54

dank je voor je toelichting.

Ik was zelf al op zoek gegaan en vond een tutorial van Harmen over mootools hier op phphulp.

02-05-2008 18:01

Raul schreef op 02.05.2008 12:14
Typisch een gevalletje van de klepel gehoord, maar de klok niet zien hangen....

Het is trouwens ''Hij heeft de klok horen luiden, maar weet niet waar de klepel hangt.. ;)

Raul Wallaart

02-05-2008 18:05

[offtopic]Thanx! Ik was benieuwd of iemand er op zou reageren.... ;)[/offtopic]

Reageren

Inloggen om te reageren