CODEWITHSUNDEEP
javascriptjqueryhtmlformscheckbox
Spyder Tech
Spyder Tech

Reputation: 67

Add up Checkbox Values and Write to Input Field

I have a form with some checkboxes and a Javascript snippet where the checkbox values get added up and written to a <span>. That works fine but I would really like it to write to an input text field instead of the <span>.

Here is the checkbox section of my form:

<section id="extra-features">
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="outside" class="sum" value="10" data-toggle="checkbox"> Outside Wash</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="aclean" class="sum" value="39" data-toggle="checkbox"> A - Clean: Wash Vacuum, Windows, Wheels/Tires, Wax</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="bclean" class="sum" value="0" data-toggle="checkbox"> B - Clean: Same as A above <em>PLUS:</em> Shampoo Interior, Clean/Dress Interior Panels, Remove Bugs/Tar.</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="cclean" class="sum" value="109" data-toggle="checkbox"> C - Clean: Same as B above <em>PLUS:</em> Compound Polish Exterior, Clean/Dress Moldings as Needed.    </label>
</div>
</section>

This is the <span> that the javascript is writing to currently:

<span id="payment-total" style="text-decoration:underline;">0</span>

And here is the javascript:

window.onload=function(){
var inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('payment-total');

 for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var add = this.value * (this.checked ? 1 : -1);
        total.innerHTML = parseFloat(total.innerHTML) + add
    }
  }
}

Upvotes: 1

Views: 9404

Answers (3)

Hugo G
Hugo G

Reputation: 16494

You don't need the loop. Use jQuery's change() instead of onchange. It has an implicit loop. Also using jQuery for checked inputs is more reliable than custom tailored JS. Here's a minimal working example:

$(document).ready(function() {
    function updateSum() {
      var total = 0;
      $(".sum:checked").each(function(i, n) {total += parseInt($(n).val());})
      $("#total").val(total);
    }
    // run the update on every checkbox change and on startup
    $("input.sum").change(updateSum);
    updateSum();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="extra-features">
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="outside" class="sum" value="10" data-toggle="checkbox"> Outside Wash</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="aclean" class="sum" value="39" data-toggle="checkbox"> A - Clean: Wash Vacuum, Windows, Wheels/Tires, Wax</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="bclean" class="sum" value="0" data-toggle="checkbox"> B - Clean: Same as A above <em>PLUS:</em> Shampoo Interior, Clean/Dress Interior Panels, Remove Bugs/Tar.</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="cclean" class="sum" value="109" data-toggle="checkbox"> C - Clean: Same as B above <em>PLUS:</em> Compound Polish Exterior, Clean/Dress Moldings as Needed.    </label>
</div>
</section>
<input type="text" id="total">

Working sample: https://jsfiddle.net/3veu206r/

Upvotes: 2

jolmos
jolmos

Reputation: 1575

With your code:

See: https://msdn.microsoft.com/en-us/library/ms535126(v=vs.85).aspx

window.onload=function(){
var inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('payment-total');

 for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var add = this.value * (this.checked ? 1 : -1);
        total.innerHTML = parseFloat(total.innerHTML) + add
        var new_total = parseFloat(document.getElementById('input').value);
      console.log(new_total);
        document.getElementById('input').value=new_total + add
    }
  }
}
<section id="extra-features">
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="outside" class="sum" value="10" data-toggle="checkbox"> Outside Wash</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="aclean" class="sum" value="39" data-toggle="checkbox"> A - Clean: Wash Vacuum, Windows, Wheels/Tires, Wax</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="bclean" class="sum" value="0" data-toggle="checkbox"> B - Clean: Same as A above <em>PLUS:</em> Shampoo Interior, Clean/Dress Interior Panels, Remove Bugs/Tar.</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="cclean" class="sum" value="109" data-toggle="checkbox"> C - Clean: Same as B above <em>PLUS:</em> Compound Polish Exterior, Clean/Dress Moldings as Needed.    </label>
</div>
</section>
This is the <span> that the javascript is writing to currently:

<span id="payment-total" style="text-decoration:underline;">0</span>
<input id="input" type="text" value="0"/>

Upvotes: 1

Parth Trivedi
Parth Trivedi

Reputation: 3832

You have to do for jQuery

$(total).val(parseFloat(total.innerHTML) + add);

For javascript

total.value parseFloat(total.innerHTML) + add;

Upvotes: 0

Related Questions