Cris Cris - 2 months ago 13
HTML Question

jquery- calculate a total value after filling out a checkbox/radio/dropdown form

I have a payment form with three sections. Basically, the first is a "radio" list with multipliers, the second is a "checkbox" list with set values, and the third is a dropdown list with multipliers as well ==> (jsfiddle). For clarity, I inserted a text box that would display the total calculated value.

When users fill out this form, how do I calculate and display the total?

I tried using this stack overflow response, but it does not work at all.

var tot = 1;
var curr_val = $(this).val();
if(curr_val != ""){
tot = tot * curr_val;

Answer Source

You can change your selector to exclude the #total as you don't want to listen to its change - $(':input').not('#total').change.

You can use a #map() jquery function to get the array of checked boxes.

The next step would be to multiply them all - using #reduce() function to add the array.

See demo below:

$(':input').not('#total').change(function() {
  var tot = 1;

  var s1 = +$('input[name=section1]:checked').val();
  var s2 = $('input[name=section2]:checked').map(function() {
    return +$(this).val();
  var s3 = +$('select').val();
  $('#total').val(s1 * (s2.reduce(function(p,c){
    return p + c;
  },0) || 1) * s3);

<script src=""></script>
<form method="post" action="">
  <div id="section1">Section 1
    <br><input type="radio" name="section1" value="2"> x2
    <br><input type="radio" name="section1" value="1.5"> x1.5
    <br><input type="radio" name="section1" value="1.5"> x1.5
    <br><input type="radio" name="section1" value="1.5"> x1.5
    <br><input type="radio" name="section1" value="1"> x1
    <br><input type="radio" name="section1" value="1"> x1
  <div id="section2">Section 2
    <br><label><input type="checkbox" name="section2" value="4"><span>1</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>2</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>3</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>4</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>5</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>6</span></label>
    <br><label><input type="checkbox" name="section2" value="4"><span>7</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>8</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>9</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>10</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>11</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>12</span></label>
  <div>Section 3<br>
   <option value="7">1 week</option>
   <option value="14">2 weeks</option>
   <option value="21">3 weeks</option>
   <option value="28">4 weeks</option>
  <input type="text" value="0" id="total">