Forum Mjukvara Programmering och digitalt skapande Tråd

Göra om form till klickbara knappar

1
Skriv svar
Permalänk
Medlem ★
●

Göra om form till klickbara knappar

Har idag ett formulär med tre val. Gäller betalning.

1. Kort
2. Bank
3. Bankgiro

Det är right now 3st radiobuttons där man väljer vilket man ska ha, som postar och nästa funktion hämtas.

Jag vill istället ha två rejäla knappar för bank resp. kort, och en liten länk under för bankgiro, används sällan.
Har redan gjort dessa grafiskt, och fipplat med javascript, men många IE-users kan inte klicka.

Kan man göra på annat sätt än jag gjort?

Såhär ser det ut nu

<form method="post" action="deposit.php">

	<table cellpadding="3" cellspacing="0" width="100%" style="border: 1px solid #dcdcdc;">

		<tr style="background: #ffffff;">
			<td>
				<b>Välj metod:</b>
			</td>
			<td>
			</td>
		</tr>
		<tr>
			<td>
				<input type="radio" name="deposit_method" value="card"<?php if (isset($_SESSION['deposit_method']) && $_SESSION['deposit_method'] == 'card') { echo ' checked'; } ?>> Kort
			</td>
			<td>
				Visa, Master Card, AMEX, Diners Club
			</td>
		</tr>
		<tr style="background: #ffffff;">
			<td>
				<input type="radio" name="deposit_method" value="direct"<?php if (isset($_SESSION['deposit_method']) && $_SESSION['deposit_method'] == 'direct') { echo ' checked'; } ?>> Internetbank
			</td>
			<td>
				SHB, Swedbank, SEB och Nordea
			</td>
		</tr>
				<tr>
			<td>
				<input type="radio" name="deposit_method" value="giro"<?php if (isset($_SESSION['deposit_method']) && $_SESSION['deposit_method'] == 'giro') { echo ' checked'; } ?>> Bankgiro
			</td>
			<td>
				XXXXXXXXXX
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<!--- 
				Alla direktbetalningarna sköts av Paynova AB, och de frågar första gången om det är ok. att de gör det. <br>
				Klicka bara ja, det betyder inte att du måste öppna något konto hos dem.
				--->
			</td>
		</tr>
	</table><br>
	
	<input type="submit" <?php if ($_SESSION['username'] == 'demo'){ echo 'disabled'; } ?> value="Gå vidare med din insättning" class="formbutton" name="form01">
	
	<?php if ($_SESSION['username'] == 'demo'){
		echo 'Insättning är <span style="color:red;">inte</span> tillåten i demo-läge'; 
	} ?>

Gjorde om till detta, som inte funkar i alla browsers.

<form method="post" action="deposit.php">
    
<input type="hidden" name="deposit_method" value="direct"<?php if (isset($_SESSION['deposit_method']) && $_SESSION['deposit_method'] == 'direct') { echo ' checked'; } ?>>
    <input type="image" value="submit" name="form01" src="images/dep1.gif"> 
	    <?php if ($_SESSION['username'] == 'demo'){
		echo 'Insättning är <span style="color:red;">inte</span> tillåten i demo-läge'; 
	} ?>

Samt likadan för kort och giro.
Någon som har tips där man kan hitta mer info?
Ja, att läsa en bok om javascript löser det hela, men tiden finns inte och det är enklare att hajja om man ser annan funktion som är kompatibel i alla browsers eller om någon pekar på vad jag gör galet

Visa signatur

Mitt modermodem är trimmat!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Var är javascriptet?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Var otydlig, version 2 testade jag med js men det funkade inte alls, så jag gjorde denna variant som syns ovan men den funkar inte i alla browsers där submitknappen är ersatt med en gif.

Det jag undrade var därav om tips på lösning som är säker i alla browsers, möjligen med javascript.

Visa signatur

Mitt modermodem är trimmat!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av HCP:

Har idag ett formulär med tre val. Gäller betalning.

1. Kort
2. Bank
3. Bankgiro

Det är right now 3st radiobuttons där man väljer vilket man ska ha, som postar och nästa funktion hämtas.

Jag vill istället ha två rejäla knappar för bank resp. kort, och en liten länk under för bankgiro, används sällan.
Har redan gjort dessa grafiskt, och fipplat med javascript, men många IE-users kan inte klicka.

Kan man göra på annat sätt än jag gjort?

Såhär ser det ut nu

<form method="post" action="deposit.php">

	<table cellpadding="3" cellspacing="0" width="100%" style="border: 1px solid #dcdcdc;">

		<tr style="background: #ffffff;">
			<td>
				<b>Välj metod:</b>
			</td>
			<td>
			</td>
		</tr>
		<tr>
			<td>
				<input type="radio" name="deposit_method" value="card"<?php if (isset($_SESSION['deposit_method']) && $_SESSION['deposit_method'] == 'card') { echo ' checked'; } ?>> Kort
			</td>
			<td>
				Visa, Master Card, AMEX, Diners Club
			</td>
		</tr>
		<tr style="background: #ffffff;">
			<td>
				<input type="radio" name="deposit_method" value="direct"<?php if (isset($_SESSION['deposit_method']) && $_SESSION['deposit_method'] == 'direct') { echo ' checked'; } ?>> Internetbank
			</td>
			<td>
				SHB, Swedbank, SEB och Nordea
			</td>
		</tr>
				<tr>
			<td>
				<input type="radio" name="deposit_method" value="giro"<?php if (isset($_SESSION['deposit_method']) && $_SESSION['deposit_method'] == 'giro') { echo ' checked'; } ?>> Bankgiro
			</td>
			<td>
				XXXXXXXXXX
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<!--- 
				Alla direktbetalningarna sköts av Paynova AB, och de frågar första gången om det är ok. att de gör det. <br>
				Klicka bara ja, det betyder inte att du måste öppna något konto hos dem.
				--->
			</td>
		</tr>
	</table><br>
	
	<input type="submit" <?php if ($_SESSION['username'] == 'demo'){ echo 'disabled'; } ?> value="Gå vidare med din insättning" class="formbutton" name="form01">
	
	<?php if ($_SESSION['username'] == 'demo'){
		echo 'Insättning är <span style="color:red;">inte</span> tillåten i demo-läge'; 
	} ?>

Gjorde om till detta, som inte funkar i alla browsers.

<form method="post" action="deposit.php">
    
<input type="hidden" name="deposit_method" value="direct"<?php if (isset($_SESSION['deposit_method']) && $_SESSION['deposit_method'] == 'direct') { echo ' checked'; } ?>>
    <input type="image" value="submit" name="form01" src="images/dep1.gif"> 
	    <?php if ($_SESSION['username'] == 'demo'){
		echo 'Insättning är <span style="color:red;">inte</span> tillåten i demo-läge'; 
	} ?>

Samt likadan för kort och giro.
Någon som har tips där man kan hitta mer info?
Ja, att läsa en bok om javascript löser det hela, men tiden finns inte och det är enklare att hajja om man ser annan funktion som är kompatibel i alla browsers eller om någon pekar på vad jag gör galet

Gå till inlägget
Dold text

Du vill alltså ha bilder bredvid radio-knapparna som om klickad, fyller i radioknappen bredvid?

Visa signatur

Intel Core i5 2500k @ 4.2GHz | Sabertooth P67 | 8GB DDR3 1600MHz | XFX 390 8GB DDR5

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Mossan9:

Du vill alltså ha bilder bredvid radio-knapparna som om klickad, fyller i radioknappen bredvid?

Gå till inlägget

Nja, nu är det 3st radiobuttons, jag vill ha bara knappar. (ingen text, inga radiobuttons)

Såhär ser det ut just nu.

Har gjort knappar liknande denna, som vid klick går vidare till rätt avdelning. Se sista kodstycket.

Det jag gjorde var att sätta hidden istället för radiobutton och sätta fast värde och ersätta submit med knappen ovan.
Detta funkar dock inte i alla browsers, då det i äldre IE inte går att klicka t.ex.
Varje knapp har eget form med hidden value för de olika betalmetoderna.

Så tanken var att det förmodligen finns bättre sätt att lösa detta på, än det jag gjort.

Visa signatur

Mitt modermodem är trimmat!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av HCP:

Nja, nu är det 3st radiobuttons, jag vill ha bara knappar. (ingen text, inga radiobuttons)

Såhär ser det ut just nu.
http://i777.photobucket.com/albums/yy57/harrycoma/dep2.gif

Har gjort knappar liknande denna, som vid klick går vidare till rätt avdelning. Se sista kodstycket.
http://i777.photobucket.com/albums/yy57/harrycoma/dep1.gif

Det jag gjorde var att sätta hidden istället för radiobutton och sätta fast värde och ersätta submit med knappen ovan.
Detta funkar dock inte i alla browsers, då det i äldre IE inte går att klicka t.ex.
Varje knapp har eget form med hidden value för de olika betalmetoderna.

Så tanken var att det förmodligen finns bättre sätt att lösa detta på, än det jag gjort.

Gå till inlägget

<a href="betalsätt1.html"><img src="betalsätt1.png"></a><br/>
<a href="betalsätt2.html"><img src="betalsätt2.png"></a><br/>
<a href="betalsätt3.html"><img src="betalsätt3.png"></a> ?

EDIT: Läste slarvigt. Du vill alltså ha "Tryck bild, bild markeras", "Tryck annan bild, tidigare bild avmarkeras, bilden du tryckt markeras"? Bilder som fungerar som radioknappar? That would be this:

<script type="text/javascript">
var old_num = 1;
function betalsatt(nummer)
{
document.getElementById('knapp' + old_num).style.border='0px';
document.getElementById('knapp' + nummer).style.border='1px solid black';
old_num = nummer;
}
function sida()
{
window.location = 'betalsatt' + old_num + '.htm';
}
</script>
<img src="/bilder/cogwheel.png" class="knapp" id="knapp1" onclick="betalsatt(1)"><br/>
<img src="/bilder/cogwheel.png" class="knapp" id="knapp2" onclick="betalsatt(2)"><br/>
<img src="/bilder/cogwheel.png" class="knapp" id="knapp3" onclick="betalsatt(3)"><br/><br/>
<a href="#" onclick="sida()">SKICKA</a>
Senast redigerat
Visa signatur

Intel Core i5 2500k @ 4.2GHz | Sabertooth P67 | 8GB DDR3 1600MHz | XFX 390 8GB DDR5

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara