radiobutton onclick functie.

[BZilla]

Goedemorgen,

Ik heb op mijn pagina 3 radio buttons.
Voor elke radio button wil ik een onclick functie hebben.
Ze moeten dus alle 3 een andere form gaan tonen.

Wanneer er voor optie 1 gekozen is, en die wordt veranderd naar optie 2, moet form 1 verdwijnen en form 2 te voorschijn komen. (en dit natuurlijk voor iedere optie)

Ik heb een aantal dingetjes geprobeerd en dit is mijn (niet werkende) code nu.

 <form name="formPurchase" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
	<input type="radio" name="purchaseType" value="optie1" onclick="show1();">optie1<br>
	<input type="radio" name="purchaseType" value="optie2" onclick="show2()">optie2<br>
	<input type="radio" name="purchaseType" value="optie3" onclick="show3()">optie3<br><br>
	<input type ="Submit" Name = "continuPurchaseType" Value="Continu">
</form>

<form id='form' style="display: none;" name="formOrder" class="formOrder" action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	<input type="radio" name="order" value="optie11">GRIP Monitoring<br>
	<input type="radio" name="order" value="optie12">GRIP Event Management<br>
	<input type ="Submit" Name = "continuOrder" Value="Continu">
</form>

[js]
function show1()
{
document.getElementById('optie1').style.display = 'block';
document.getElementById('optie2').style.display = 'none';
document.getElementById('optie3').style.display = 'none';
}

function show2()
{
document.getElementById('optie2').style.display = 'block';
document.getElementById('optie1').style.display = 'none';
document.getElementById('optie3').style.display = 'none';
}

function show3()
{
document.getElementById('optie3').style.display = 'block';
document.getElementById('optie1').style.display = 'none';
document.getElementById('optie2').style.display = 'none';
}
[/js]

Wat wel werkt is dat wanneer ik optie 1 kies, de form tevoorschijn komt.
Voor optie 2 en optie 3 heb ik nog geen form gemaakt, ik wilde eerst testen of de form van optie1 zou verdwijnen.

Iemand enig idee hoe ik dit werkend ga krijgen?

Bzilla.

 

[Tha Devil]

[js]document.getElementById('optie1')[/js]
Dit zorgt er voor dat er gekeken wordt naar een HTML-element op de pagina met id="optie1".

Als ik jouw code zo bekijk dan is die er niet

Verder zou ik hier één functie voor schrijven om het mijzelf makkelijk te maken en om fouten bij aanpassingen te voorkomen
[js]
function showForm(optionNumber)
{
// Alles verbergen
for (i = 1; i <= 3; i++) {
document.getElementById('optie'+ i).style.display = 'none';
}
// De meegegeven waarde tonen
document.getElementById('optie'+ optionNumber).style.display = 'block';
}[/js]

<form name="formPurchase" action="" method="POST">
    <input type="radio" name="purchaseType" value="optie1" onclick="showForm(1);">optie1<br>
    <input type="radio" name="purchaseType" value="optie2" onclick="showForm(2)">optie2<br>
    <input type="radio" name="purchaseType" value="optie3" onclick="showForm(3)">optie3<br><br>
    <input type ="Submit" Name = "continuPurchaseType" Value="Continu">
</form>

Let wel op dat je nu meerdere <form>-tags in je pagina hebt staan, als ik in jouw voorbeeld op "Continu" klik dan worden alleen de radio-buttons verstuurd.

 

[BZilla]

Bedankt voor het reageren.

Dit is een aangepaste code die ik heb gestuurd. De id='form' moest optie1 zijn.
In mijn code heet het ook geen optie 1 en wordt er uberhaupt niks opgeteld, hoe ga ik dit dan doen met een for?

Dan wordt het ipv optie1 optie2 optie3, kaas, ham, pindakaas.

Die buttons zijn er nu inderdaad maar die worden dus verangen door de onclick. De buttons had ik alleen nog niet gecommentaard in de code. De code die achter de buttons zitten wel.

Het is al opgelost... omdat ik de andere 2 forms nog niet had kon hij dus ook form 1 niet weghalen... Dujidelijk voor de volgende keer.

Wellicht dat je me toch nog kan helpen met die for? ik ben toch vrij benieuwd hoe ik mijn code simpeler kan maken

 

[Tha Devil]

In feite kun je mijn code zo implementeren want er is verder niets gewijzigd qua functie.

Hoe ziet je code er nu uit? Dat is waarschijnlijk makkelijker uitleggen voor mij qua implementatie

 

[BZilla]

Dit is alles:

<form name="formPurchase" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
	<input type="radio" name="purchaseType" value="kaas" onclick="show1();">optie1<br>
	<input type="radio" name="purchaseType" value="ham" onclick="show2()">optie2<br>
	<input type="radio" name="purchaseType" value="pindakaas" onclick="show3()">optie3<br><br>
</form>

[js]function show1()
{
document.getElementById('kaas').style.display = 'block';
document.getElementById('ham').style.display = 'none';
document.getElementById('pindakaas').style.display = 'none';
}

function show2()
{
document.getElementById('ham').style.display = 'block';
document.getElementById('kaas').style.display = 'none';
document.getElementById('pindakaas').style.display = 'none';
}

function show3()
{
document.getElementById('pindakaas').style.display = 'block';
document.getElementById('kaas').style.display = 'none';
document.getElementById('ham').style.display = 'none';
}
[/js]

<form id='kaas' style="display: none;" name="formKaas" class="formKaas" action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	<input type="radio" name="orderKaas" value="optie11"><br>
	<input type="radio" name="orderKaas" value="optie12"><br>
	<input type ="Submit" Name = "continuOrder" Value="Continu">
</form>
<form id='ham' style="display: none;" name="formHam" class="formHam" action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	<input type="radio" name="orderHam" value="optie11"><br>
	<input type="radio" name="orderHam" value="optie12"><br>
	<input type ="Submit" Name = "continuOrder" Value="Continu">
</form>
<form id='pindakaas' style="display: none;" name="formPindakaas" class="formPindakaas" action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	<input type="radio" name="orderPindakaas" value="optie11"><br>
	<input type="radio" name="orderPindakaas" value="optie12"><br>
	<input type ="Submit" Name = "continuOrder" Value="Continu">
</form>

 

[Tha Devil]

Het zijn helaas geen ID's meer met een getal erachter maar dat maakt niet uit

<form name="formPurchase" action="" method="POST">
    <input type="radio" name="purchaseType" value="kaas" onclick="showForm('kaas');">optie1<br>
    <input type="radio" name="purchaseType" value="ham" onclick="showForm('ham')">optie2<br>
    <input type="radio" name="purchaseType" value="pindakaas" onclick="showForm('pindakaas')">optie3<br><br>
</form>

[js]
function showForm(selection)
{
// Array aanmaken
var options = new Array('kaas', 'ham', 'pindakaas');
// Alles verbergen
for (i = 1, max = options.length; i <= max; i++) {
document.getElementById(options).style.display = 'none';
}
// De meegegeven waarde tonen
document.getElementById(selection).style.display = 'block';
}[/js]

 

[BZilla]

hmm als ik dit uitvoer gebeurd er helemaal niks meer..
Het is gewoon precies dezelfde code gebleven

 

[Tha Devil]

Kleine miscalculatie in de for-loop

[js]
function showForm(selection)
{
// Array aanmaken
var options = new Array('kaas', 'ham', 'pindakaas');
// Alles verbergen
for (i = 0, max = options.length; i < max; i++) {
document.getElementById(options).style.display = 'none';
}
// De meegegeven waarde tonen
document.getElementById(selection).style.display = 'block';
}[/js]
http://jsfiddle.net/bgyk34y8/

 

[BZilla]

Dit werkt prima!
Had k zelf ook moeten zien..

Dankjewel hiervoor scheelt een hele hoop code

Het werkt prima maar ik was iets te voorbarig..
wanneer ik in de laatste form klaar ben, en ik verander van gedachte en wil in de eerste form toch een andere keuze maken, dan blijft de laatste form staan en wordt dus niet weggehaald.
Hoe kan ik dit in deze code oplossen?

 

[Tha Devil]

Met de code uit mijn voorbeeld wordt alleen het formulier getoond dat geselecteerd is.

Om dit aan te geven heb ik teksten per formulier toegevoegd: http://jsfiddle.net/bgyk34y8/1/

Als je de laatste hebt geselecteerd en je wisselt naar de eerste dan haalt hij het formulier van de laatste gewoon weg.

 

[BZilla]

Klopt, hij haalt dan de laatste weg.

Maar stel ik kies formulier 2. Ik kies daar optie nummer 2. En klik daarna op formulier 1.
Dan gaat formulier 2 wel weg maar die optie nummer 2 die ik heb gekozen blijft staan.

 

[Tha Devil]

Dat klopt, je doet immers niets anders dan tonen/verbergen. Wil je de selectie ongedaan maken dan moet je die per veld op false zetten.

http://jsfiddle.net/bgyk34y8/2/

Wat ik heb gedaan is van het formulier dat op dat moment getoond gaat worden een loopje maken over alle formulier elementen en als het type een radio-button is dan zet ik die op "false".

 

[BZilla]

Ik ga hiermee aan de slag dankje voor je hulp