Door
Yoeri Achterbergen
op 03-03-2015 22:23
gewijzigd op 03-03-2015 22:23
2.076 views
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?
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.
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?
<!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>
