Data verkrijgen uit verschillende radio's.

Status
Niet open voor verdere reacties.
B

BZilla

Gebruiker
Lid geworden
16 apr 2014
Berichten
170
Goedemorgen,

Ik wil graag wat data uit verschillende radio's halen.
Wanneer ik op een radio klik, verschijnt er automatisch een nieuwe form.

Uiteindelijk wil ik met een button al deze informatie eruit kunnen halen.

Ik heb een deel van me code hierbij gepakt. Het gaat telkens op optie 2.

Hoe kan ik aan het eind alle data ophalen?
Ik kan nu alleen de mails krijgen omdat dit in de laatste form staat. Ik wil dit ook kunnen verkrijgen van de eerdere formen.

dit is mijn code:
Code: 
<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>				
<script type="text/javascript">
	function show1()
	{
		document.getElementById('optie1').style.display = 'block'; 
		document.getElementById('optie2').style.display = 'none';
		document.getElementById('optie3').style.display = 'none'; 
		document.getElementById('tryAndBuy').style.display = 'none';
		document.getElementById('strategicAccount').style.display = 'none';
		document.getElementById('managedServiceContract').style.display = 'none';
		document.getElementById('orderDetailGEM').style.display = 'none';
	}
	function show2()
	{ 
		document.getElementById('optie2').style.display = 'block'; 
		document.getElementById('optie1').style.display = 'none';
		document.getElementById('optie3').style.display = 'none'; 
		document.getElementById('tryAndBuy').style.display = 'none';
		document.getElementById('strategicAccount').style.display = 'none';
		document.getElementById('managedServiceContract').style.display = 'none';
		document.getElementById('orderDetailGEM').style.display = 'none';
	}
	function show3() 
	{ 
		document.getElementById('optie3').style.display = 'block'; 
		document.getElementById('optie1').style.display = 'none'; 
		document.getElementById('optie2').style.display = 'none'; 
		document.getElementById('tryAndBuy').style.display = 'none';
		document.getElementById('strategicAccount').style.display = 'none';
		document.getElementById('managedServiceContract').style.display = 'none';
		document.getElementById('orderDetailGEM').style.display = 'none';
	}
</script>

<form id='optie1' style="display: none;" action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	<input type="radio" name="SLAorORDER" value="gripMonitoring">Part of SLA<br>
	<input type="radio" name="SLAorORDER" value="gripEventManagement">Order<br>
	<!--<input type ="Submit" Name = "continuSLAorORDER" Value="Continu">-->
</form>
<form id='optie2' style="display: none;" name="formGEM" class="formGEM" action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	<input type="radio" name="GEM" value="2optie1" onclick="showOptie1();">optie1<br>
	<input type="radio" name="GEM" value="2optie2" onclick="showOptie2();">optie2<br>
	<input type="radio" name="GEM" value="2optie3" onclick="showOptie3();">optie3<br>
	<input type="radio" name="GEM" value="2optie4" onclick="showOptie4();">optie4   
	<script>
		function showOptie1() 
		{ 
			document.getElementById('2optie1').style.display = 'block';
			document.getElementById('2optie2').style.display = 'none';
			document.getElementById('2optie3').style.display = 'none';
			document.getElementById('2optie4').style.display = 'none';
		}
		function showOptie2() 
		{ 
			document.getElementById('2optie2').style.display = 'block';
			document.getElementById('2optie1').style.display = 'none';
			document.getElementById('2optie3').style.display = 'none';
			document.getElementById('2optie4').style.display = 'none';																	
		}
		function showOptie3() 
		{ 
			document.getElementById('2optie3').style.display = 'block';
			document.getElementById('2optie1').style.display = 'none';
			document.getElementById('2optie2').style.display = 'none';
			document.getElementById('2optie4').style.display = 'none';																	

		}
		function showOptie4() 
		{ 
			document.getElementById('2optie4').style.display = 'block'; 
			document.getElementById('2optie1').style.display = 'none';
			document.getElementById('2optie2').style.display = 'none';
			document.getElementById('2optie3').style.display = 'none';																	
		}
		
	</script>
	

	<!--<input type ="Submit" Name = "continu" Value="Continu">-->
</form>
<form id='2optie1' style='display: none;' action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	Please enter the mail that you want to recieve this.<br>
	Email #1 <input type="text" name="customerMail1"><br>
	Email #2 <input type="text" name="customerMail2"><br>
	Email #3 <input type="text" name="customerMail3"><br>
	Email #4 <input type="text" name="customerMail4"><br>
	Email #5 <input type="text" name="customerMail5"><br>
	<input type='submit' name='sendPurchaseGEM' value='submit'>
</form>
<form id='2optie2' style='display: none;' action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	Please enter the mail that you want to recieve this.<br>
	Email #1 <input type="text" name="customerMail1"><br>
	Email #2 <input type="text" name="customerMail2"><br>
	Email #3 <input type="text" name="customerMail3"><br>
	Email #4 <input type="text" name="customerMail4"><br>
	Email #5 <input type="text" name="customerMail5"><br>
	<input type='submit' name='sendPurchaseGEM' value='submit'>
</form>
<form id='2optie3' style='display: none;' action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	Please enter the mail that you want to recieve this.<br>
	Email #1 <input type="text" name="customerMail1"><br>
	Email #2 <input type="text" name="customerMail2"><br>
	Email #3 <input type="text" name="customerMail3"><br>
	Email #4 <input type="text" name="customerMail4"><br>
	Email #5 <input type="text" name="customerMail5"><br>
	<input type='submit' name='sendPurchaseGEM' value='submit'>
</form>
<form id='2optie4' style='display: none;' action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	Please enter the order details.<br>
	<input type="text" name="orderDetail"><br><br>
	Please enter the mail that you want to recieve this.<br>
	Email #1 <input type="text" name="customerMail1"><br>
	Email #2 <input type="text" name="customerMail2"><br>
	Email #3 <input type="text" name="customerMail3"><br>
	Email #4 <input type="text" name="customerMail4"><br>
	Email #5 <input type="text" name="customerMail5"><br>
	<input type='submit' name='sendPurchaseGEMorder' value='submit'>
</form>
<form id='optie3' style="display: none;" action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	<input type="text" name="orderDetail">
	<!--<input type ="Submit" Name = "continu" Value="Continu">-->
</form>

Alvast bedankt en als iets niet duidelijk is hoor ik het graag,

Bzilla
 
Snap je zelf wel wat "$_SERVER['PHP_SELF']" doet?
Volgens mij niet want je voegt het bij elke form toe.

Ik heb het in begin weggehaald. Je moet dit zelf weghalen uit de overige formulieren.
Tevens moeten dit geen formulieren zijn maar div elementen. Deze moet je ook aanpassen.
Je kan hier ook een id gebruiken om het te selecteren vanuit Javascript.

In je javascript heb je allemaal dubbele code waar je beter 1 functie van kan maken en de parameter kan meegeven.
Je zet ze allemaal op none en degene op block die echt zichtbaar moeten worden.
Dit kan je ook doen met het andere javascript stukje.
Beter is ook het Javascript boven de html code te plaatsen omdat deze er dan al is.
Nog beter is een aparte file en die inladen. Ook zo voor de css attributen en dan gebruik maken van classes.

Ik heb hier een stukje code voor je gemaakt die werkt.
Ik weet niet precies wat je wilt doen met je code maar ik dat dat je beter een echte pagina kan gebruiken ipv php_self.
Ik denk dat je ook niet 3x dezelfde formulieren wilt hebben maar 1 ervan moet maken(2optie1, 2optie2, 2optie3, 2optie4).
Moeten ook divs worden, Remember ;)
2optie4 is anders en hier zou je de "orderDetail" kunnen laten zien als de derde wordt geselecteerd.
In je JS doe je dan een if zoals. If(selected ==3 ) {show orderDetail } ;

PHP: 
<?php
if(isset($_POST['sendPurchaseGEM'])) 
{ 
    echo $_POST['customerMail1'];
	echo "<br />";
	echo $_POST['customerMail2'];
	echo "<br />";
	echo $_POST['customerMail3'];
	echo "<br />";
	echo $_POST['customerMail4'];
	echo "<br />";
	echo $_POST['customerMail5'];	
	return;
}
?>

<script type="text/javascript">
	function Show(showElement)
	{
		//Hide All
		document.getElementById('optie1').style.display = 'none'; 
		document.getElementById('optie2').style.display = 'none';
		document.getElementById('optie3').style.display = 'none'; 
		//document.getElementById('tryAndBuy').style.display = 'none';
		//document.getElementById('strategicAccount').style.display = 'none';
		//document.getElementById('managedServiceContract').style.display = 'none';
		//document.getElementById('orderDetailGEM').style.display = 'none';
		
		//Enable Selected
		document.getElementById('optie' + showElement).style.display = 'block'; 
	}
</script>

<form name="formPurchase">
	<input type="radio" name="purchaseType" value="optie1" onclick="Show(1);">optie1<br>
	<input type="radio" name="purchaseType" value="optie2" onclick="Show(2);">optie2<br>
	<input type="radio" name="purchaseType" value="optie3" onclick="Show(3);">optie3<br><br>
</form>	

<div id='optie1' style="display: none;">
	<input type="radio" name="SLAorORDER" value="gripMonitoring">Part of SLA<br>
	<input type="radio" name="SLAorORDER" value="gripEventManagement">Order<br> 
</div>
<form id='optie2' style="display: none;" name="formGEM" class="formGEM" action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	<input type="radio" name="GEM" value="2optie1" onclick="showOptie1();">optie1<br>
	<input type="radio" name="GEM" value="2optie2" onclick="showOptie2();">optie2<br>
	<input type="radio" name="GEM" value="2optie3" onclick="showOptie3();">optie3<br>
	<input type="radio" name="GEM" value="2optie4" onclick="showOptie4();">optie4   
	<script>
		function showOptie1() 
		{ 
			document.getElementById('2optie1').style.display = 'block';
			document.getElementById('2optie2').style.display = 'none';
			document.getElementById('2optie3').style.display = 'none';
			document.getElementById('2optie4').style.display = 'none';
		}
		function showOptie2() 
		{ 
			document.getElementById('2optie2').style.display = 'block';
			document.getElementById('2optie1').style.display = 'none';
			document.getElementById('2optie3').style.display = 'none';
			document.getElementById('2optie4').style.display = 'none';																	
		}
		function showOptie3() 
		{ 
			document.getElementById('2optie3').style.display = 'block';
			document.getElementById('2optie1').style.display = 'none';
			document.getElementById('2optie2').style.display = 'none';
			document.getElementById('2optie4').style.display = 'none';																	

		}
		function showOptie4() 
		{ 
			document.getElementById('2optie4').style.display = 'block'; 
			document.getElementById('2optie1').style.display = 'none';
			document.getElementById('2optie2').style.display = 'none';
			document.getElementById('2optie3').style.display = 'none';																	
		}		
	</script>
</form>
<form id='2optie1' style='display: none;' action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	Please enter the mail that you want to recieve this.<br>
	Email #1 <input type="text" name="customerMail1"><br>
	Email #2 <input type="text" name="customerMail2"><br>
	Email #3 <input type="text" name="customerMail3"><br>
	Email #4 <input type="text" name="customerMail4"><br>
	Email #5 <input type="text" name="customerMail5"><br>
	<input type='submit' name='sendPurchaseGEM' value='submit'>
</form>
<form id='2optie2' style='display: none;' action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	Please enter the mail that you want to recieve this.<br>
	Email #1 <input type="text" name="customerMail1"><br>
	Email #2 <input type="text" name="customerMail2"><br>
	Email #3 <input type="text" name="customerMail3"><br>
	Email #4 <input type="text" name="customerMail4"><br>
	Email #5 <input type="text" name="customerMail5"><br>
	<input type='submit' name='sendPurchaseGEM' value='submit'>
</form>
<form id='2optie3' style='display: none;' action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	Please enter the mail that you want to recieve this.<br>
	Email #1 <input type="text" name="customerMail1"><br>
	Email #2 <input type="text" name="customerMail2"><br>
	Email #3 <input type="text" name="customerMail3"><br>
	Email #4 <input type="text" name="customerMail4"><br>
	Email #5 <input type="text" name="customerMail5"><br>
	<input type='submit' name='sendPurchaseGEM' value='submit'>
</form>
<form id='2optie4' style='display: none;' action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	Please enter the order details.<br>
	<input type="text" name="orderDetail"><br><br>
	Please enter the mail that you want to recieve this.<br>
	Email #1 <input type="text" name="customerMail1"><br>
	Email #2 <input type="text" name="customerMail2"><br>
	Email #3 <input type="text" name="customerMail3"><br>
	Email #4 <input type="text" name="customerMail4"><br>
	Email #5 <input type="text" name="customerMail5"><br>
	<input type='submit' name='sendPurchaseGEM' value='submit'>
</form>
<form id='optie3' style="display: none;" action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
	<input type="text" name="orderDetail">
</form>
 
Laatst bewerkt:
Dankjewel voor je snelle reactie.
Tha_Devil heeft mij via een ander topic geholpen met de javascript code, dit is nu simpeler dan hierboven aangegeven :) een stuk minder code.
Ik ga direct met alles aan de slag.

Maar kun je mij ook nog vertellen hoe ik ook nog de keuze uit form 1 en 2 kan omzetten in een variable?

Dus ik begin met de form PurchaseType, deze Type wil ik aan het eind weten.
Als 2e form krijg ik Optie1, 2, 3 of 4. Ook deze keuze wil ik aan het eind weten.
Hoe krijg ik dit samen met de emails voor elkaar?
 
Ja de JS script code is niet het beste. Heb ook niet alles aangepast maar ff snel voor jouw context.

Als je meer info wilt sturen dan zou je het in 1 form moeten zetten.
Zoals ik zei div elementen maken van die andere formulieren ;)
Je kan ze dan bovenin ophalen op naam zoals ik dat met de andere elementen heb gedaan.
 
Laatst bewerkt:
Nagebouwd en getest en dit werkt helemaal naar behoren dankjewel!
Met die javascript ga ik nog even verder aan de slag om dit wat beter te maken.

Nogmaals bedankt :)
 
Graag gedaan. Blij dat ik kon helpen ;)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan