Van radio button naar eigen button

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Yoeri Achterbergen

Yoeri Achterbergen

03/03/2015 22:23:16
Quote Anchor link
Hallo,

Wat ik mij afvroeg is of het mogenlijk was om een button te creeen i.p.v. Een radio button. Op de achtergrond moet het eigenlijk lrecies het zelfde werken. Mensen kunnen keuze maken uit 2 dingen:
-Laten bezorgen
-afhalen

Momenteen word dit gekozen d.mv. Een radio button wat ik persoonlijk lelijk vind. Daarom heb ik een eigen button gemaak, maar hoe kan ik deze werkend krijgen dat de keuze word vastgelegd en word onthouden in het formulier?

Dit is de situatie nu:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<form action="index.php" method="post" name="step1" id="step1">
<input type="radio" value="252" name="way_of_delivery"  onchange="shippingSelect();>
<input type="radio" value="255" name="way_of_delivery"  onchange="shippingSelect();>
</form>
</form>


Dit zijn de buttons die ik graag zou willen:

http://codepen.io/anon/pen/raryEy


Groetjes Yoeri
Gewijzigd op 03/03/2015 22:23:41 door Yoeri Achterbergen
 
PHP hulp

PHP hulp

11/07/2020 00:50:11
 
Thomas van den Heuvel

Thomas van den Heuvel

03/03/2015 22:36:32
Quote Anchor link
Doen die knoppen verder ook iets? Waarschijnlijk zullen hier onclick-events aan gehangen moeten worden en dan zul je bijvoorbeeld je keuze in een hidden veld op moeten slaan ofzo.
 
Yoeri Achterbergen

Yoeri Achterbergen

03/03/2015 22:44:40
Quote Anchor link
Beste Thomas,

De radio buttons worden meegenomen bij de submit.
Mijn vraag is hoe kan ik dat doen met een eigen button? Wat voor event moet ik dan maken in javascript bijvoorbeeld?
 
Thomas van den Heuvel

Thomas van den Heuvel

03/03/2015 22:59:21
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
.selected { background-color: #ccccff; }
</style>
</head>

<body>
<form>
<!-- hier voor het gemak twee buttons, maar dit zou van alles kunnen zijn, als je class maar klopt -->
<!-- en dit element een data-value attribuut heeft -->
<!-- het js-voorvoegsel is optioneel, maar kan handig zijn om aan te geven dat deze class betekenis heeft voor js -->
<button type="button" class="js-delivery" data-value="252">bezorgen</button>
<button type="button" class="js-delivery" data-value="255">afhalen</button>
<!-- in het onderstaande veld kun je het type veranderen naar hidden -->
<!-- dit is slechts om te demonstreren dat de waarde verandert -->
<input type="text" name="delivery" value="" />
</form>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $('button.js-delivery').click(function() {
        $('.js-delivery').removeClass('selected');
        $('input[name=delivery]').val($(this).attr('data-value'));
        $(this).addClass('selected');
    });
});
//]]>
</script>
</body>
</html>
 
Jan R

Jan R

04/03/2015 07:30:03
Quote Anchor link
Ik heb ooit deze gevonden
http://rawnet.github.io/jquery-switch/
Gewijzigd op 04/03/2015 07:30:39 door Jan R
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.