Immediate sum within input - Javascript

Asked

Viewed 148 times

0

I have a sales system, where the administrator marks the checkbox of the products that want to sell, soon after appears an input to enter the desired quantity, and at the end of the sale, is calculated the total value of all products with their certain quantities. All this is working perfectly.

But I wonder if there is a possibility that while the administrator is selecting the products and entering their quantities, an "Instantaneous calculation" was done in an input to know how much will be the final value.

I tried using a snippet but it didn’t work. I will put only the part of the code that interests me, along with the script that I already use to show and hide the input in front of each checkbox to not get too much information unnecessary, follow an example:

<style type="text/css">
   input[type="number"] {
      display: none;
   }
</style>

<input type="checkbox" name="checkbox[]"> <input type="number" value="1" min="1" required="" max="10">
<input type="checkbox" name="checkbox[]"> <input type="number" value="1" min="1" required="" max="21">
<input type="checkbox" name="checkbox[]"> <input type="number" value="1" min="1" required="" max="13">

<script>
$('input[type="checkbox"]').on('click touchstart', function() {
    if (this.checked) {
        $(this).parent('td').find('input[type="number"]').show();
    } else {
        $(this).parent('td').find('input[type="number"]').hide();
    }
});
</script>
javascript html jquery

2 answers

1


In your case you have two conditions to update the sum: click on the checkbox (when you check/uncheck) or when you change the value (sum if the checkbox is selected).

So I thought of a change event, which applies both to checkbox and input text:

$('input').change(function () {
   // pega todos os checkbox que estão checked
   var total = 0;
   $('input[type=checkbox]:checked').each(function () {
      // pega o valor do próximo input
      var input = $(this).next("input").val();
      total += Number(input);
   });
   
   $('#total').val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox[]"> <input type="number" value="1" min="1" required="" max="10"><br />
<input type="checkbox" name="checkbox[]"> <input type="number" value="1" min="1" required="" max="21"><br />
<input type="checkbox" name="checkbox[]"> <input type="number" value="1" min="1" required="" max="13"><br />

<span>Total:</span><input type="text" id="total" />

Note that when triggering the change, selects all checkboxes that are "checked" and sums the value of the input immediately next to it, using next as selector from jQuery

  • These checkboxes are within a table. For example, if it is 8 products, it will be 8 checkbox, and as it is within a table, I need to multiply the price of the product (I would put a $Row['price']]), by the amount entered in the input (that belongs to this product), and then add it all up. But in this way that you did, I think there would be no way, because this script would be at the bottom of the right page? and not inside the table. I’m sorry I didn’t mention this before, but I was very confused at the time of asking this question

  • "because this script would be at the end of the right page?" It doesn’t really matter where the script is going to be, it only needs to run after the page is loaded to find the checkbox. As to multiply the price just take the value, remember that in this case the $(this).next("input") takes the next input without any other condition, if you have a value and quantity input, assign names or classes to them, to facilitate and find. For example if one has the class "Qtde" and another "value", it can do so $(this).next("input.qtd") :)

  • It worked out here, buddy, hug!

0

Hi, how would the code look if I had to add checkbox that had the same name ? Example if I created the checkbox object with name="vendor_$idvendor[], and wanted it to show the sum of the clicked on separate fields.

Headphone 1 = soma1 (sum of supplier’s marked ckeckbox 1) Headphone 2 = soma2 (sum of supplier’s marked ckeckbox 2)

and so on, since the information comes from the BD and I can have many suppliers.

Thank you

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.