Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum.
Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden.
Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!
We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.
Team Webprofis
We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.
Team Webprofis
javascript realtime calculatie formulier
Auteur: nuet
Demo
Download
Onderstaand script met formulier levert een directe prijsweergave op het moment dat je iets invult, aanvinkt of selecteert.
Dit op basis van de meest gebruikte form elementen zoals input (met aantal vermenigvuldigd), checkboxen, radio buttons en een selectbox.
Javascript:
Formulier:
Gebruikte api:
Demo
Download
Onderstaand script met formulier levert een directe prijsweergave op het moment dat je iets invult, aanvinkt of selecteert.
Dit op basis van de meest gebruikte form elementen zoals input (met aantal vermenigvuldigd), checkboxen, radio buttons en een selectbox.
Javascript:
$(document).ready(function () {
var form = $('.bestelformulier'),
elements = form.find('[data-price], [type="radio"], [type="checkbox"], select'),
totalEl = $('.totaalprijs');
//function to calculate total
var calculateTotal = function () {
var total = 0;
$.each(elements, function () {
var field = $(this),
newVal;
// switch type
switch (field.prop('type')) {
case 'select-one':
newVal = field.find(':selected').val() || 0;
break;
case 'text':
newVal = parseFloat(field.val() || 0) * field.data('price');
field.closest('td').next().find('span').text(newVal);
break;
case 'radio':
newVal = this.checked ? field.val() : 0;
break;
case 'checkbox':
newVal = this.checked ? field.val() : 0;
break;
}
newVal = parseFloat(newVal);
total += newVal;
});
totalEl.text(total.toFixed(2));
};
// bind events
elements.on('change keyup', calculateTotal);
// @doc: http://unixpapa.com/js/key.html
elements.filter('[data-price]').on('keypress', function (ev) {
var key = ev.keyCode || ev.which;
if (key > 31 && (key < 48 || key > 57)) {
ev.preventDefault();
}
});
});Formulier:
<form class="bestelformulier" method="post" action=''>
<h2>Realtime formulier Calculatie</h2>
<table style="width:300px">
<tr><td><b>Producten categorie 1:</b></td></tr>
<tr>
<td>Product A</td>
<td>€ 2,50</td>
<td><input type="text" placeholder="aantal" maxlength="3" size="4" data-price="2.5" /></td>
<td>€ <span class="subtotaal"></span></td>
</tr>
<tr>
<td>Product B</td>
<td>€ 3,50</td>
<td><input type="text" placeholder="aantal" maxlength="3" size="4" data-price="3.5" /></td>
<td>€ <span class="subtotaal"></span></td>
</tr>
<tr>
<td>Product C</td>
<td>€ 4,50</td>
<td><input type="text" placeholder="aantal" maxlength="3" size="4" data-price="4.5" /></td>
<td>€ <span class="subtotaal"></span></td>
</tr>
<tr><td> </td></tr> <!-- empty row for break -->
<!-- CATEGORIE 2 -->
<tr><td><b>Producten categorie 2:</b></td></tr>
<tr>
<td>Product D</td>
<td>€ 2,50</td>
<td><input type="text" placeholder="aantal" maxlength="3" size="4" data-price="2.5" /></td>
<td>€ <span class="subtotaal"></span></td>
</tr>
<tr>
<td>Product E</td>
<td>€ 2,50</td>
<td><input type="text" placeholder="aantal" maxlength="3" size="4" data-price="2.5" /></td>
<td>€ <span class="subtotaal"></span></td>
</tr>
<tr>
<td>Product F</td>
<td>€ 2,50</td>
<td><input type="text" placeholder="aantal" maxlength="3" size="4" data-price="2.5" /></td>
<td>€ <span class="subtotaal"></span></td>
</tr>
</table>
<br />
<table style="width:250px">
<tr><td><b>Checkboxen:</b></td></tr>
<br />
<tr>
<td>A checkbox</td>
<td>€ 1,00</td>
<td><input type="checkbox" value="1" /></td>
</tr>
<tr>
<td>B checkbox</td>
<td>€ 1,50</td>
<td><input type="checkbox" value="1.5" /></td>
</tr>
<tr>
<td>C checkbox</td>
<td>€ 2,00</td>
<td><input type="checkbox" value="2" /></td>
</tr>
<tr>
<td>D checkbox</td>
<td>€ 2,50</td>
<td><input type="checkbox" value="2.5" /></td>
</tr>
</table>
<br />
<b>Selectbox:</b>
<br /><br />
<select name="selectbox" id="selectbox">
<option value="0">Selecteer in selectbox</option>
<option value="2">Selectie A € 2,-</option>
<option value="5">Selectie B € 5,-</option>
<option value="8">Selectie C € 8,-</option>
</select>
<br /><br />
<table style="width:150px">
<tr><td><b>Selecteer radio:</b></td></tr>
<tr>
<td>Radio A € 5,-</td>
<td><input type="radio" name="calculate-radio" value="5" /></td>
</tr>
<tr>
<td>Radio B € 10,-</td>
<td><input type="radio" name="calculate-radio" value="10" /></td>
</tr>
</table>
<br />
<br />
<span><b>Totaalprijs: €</b></span>
<span class="totaalprijs"></span>
</form>Gebruikte api:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>Dit Topic is gesloten.