Javascript Subtracting Value Of Input Fields If Checkbox Is Checked

Question

I have three inputs that are both text and one checkbox.

I would like it to where if the checkbox is checked the value of input A is subtracted from input B and shows up in input C.

I am also wanting it to change if new numbers are entered.

Basically:

1: If checkbox is checked subtract value A from value B.

2: If checkbox is checked subtract value A from value B on keypress.

I've tried this:

$('#autoCal').change(function () {
  var start = +$("#start").val();
  var end = +$("#end").val();
  $("#result").val(end-start);

  if ($(this).attr("checked")) {
    $("#end").keyup(function(){
      var start = +$("#start").val();
      var end = +$("#end").val();
      $("#result").val(end-start);
      return;
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset data-step="3" data-intro="How many miles did you go? Let us know by filling out this section.">
  <legend>Mileage</legend>
  <label for="oStart"><span>Odometer Start<span class="required">*</span></span><input type="text" name="oStart" class="shortInput" id="start"></label>
  <label for="oEnd"><span>Odometer End<span class="required">*</span></span><input type="text" name="oEnd" class="shortInput" id="end"></label>
  <label for="mileage"><span>Total Miles<span class="required">*</span></span><input type="text" name="mileage" class="shortInput" id="result"></label>
  <label for="autoCal"><span>Auto calculate milage?</span><input type="checkbox" id="autoCal" name="autoCal"></label>
</fieldset>

autoCal is the checkbox.
start is value A.
end is value B.
result is value C.

Can I see some HTML? (I have found the change method unreliable in my case though... and key events on textboxes.) I'm also assuming that the textboxes are for numbers. — mashedpotats
– mashedpotats, Commented Oct 3, 2015 at 22:22

mashedpotats · Accepted Answer · 2015-10-03 22:39:50Z

1

I have fixed the problem where it is unable to calculate in the first place. I'm still working on the autocalculate feature.

 $('#autoCal').change(function () {
    var start = +$("#start").val();
    var end = +$("#end").val();
    $("#result").val(Number(end) - Number(start));

    if ($(this)[0].checked) {
        $("#start, #end").keyup(function () {
            var start = +$("#start").val();
            var end = +$("#end").val();
            $("#result").val(end - start);
        });
    };
});

EDIT 1

This is a bit of a quirk, but the expression is a bit wrong. I have updated the code to fix it. (Also add the type="number" to the input, it will not allow letters then)

EDIT 2

My bad... I fixed everything though. Your expression is correct, I'm sorry... Have fun!

edited Oct 3, 2015 at 22:39

answered Oct 3, 2015 at 22:30

mashedpotats

3344 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mashedpotats Over a year ago

:D It took a while though. I was just doing Java for a long time, so javascript is not the norm right now. Lol!

Collectives™ on Stack Overflow

Javascript Subtracting Value Of Input Fields If Checkbox Is Checked

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related