Virusscanner tips?
Van radio button naar eigen button
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)
1
2
3
4
5
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>
<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
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?
Code (php)
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
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>
<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>
http://rawnet.github.io/jquery-switch/
Gewijzigd op 04/03/2015 07:30:39 door Jan R