0

Cant Run SUM this code not working on table How To FIX ?

PHP MYSQL, JAVASCRIPT

<td contenteditable="true" class="price"> </td>
<td contenteditable="true" class="price"> </td>
<td contenteditable="true" class="price"> </td>
<td contenteditable="true" class="price"> </td>
<td contenteditable="true" class="price"> </td>
<td contenteditable="true" class="price"> </td>

<script>
$(document).on("change", ".price", function() {
    var sum = 0;
    $(".price").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});
</script>

<input type="text" id="total" class="total" value=""  />
Dharman
  • 30,962
  • 25
  • 85
  • 135
R Muhamad Fadilah
  • 1
  • 1
    Possible duplicate of [sum all values for table column based on class](https://stackoverflow.com/questions/9293492/sum-all-values-for-table-column-based-on-class) – Xun May 24 '19 at 03:42
  • 1
    `on change` doesn't work on `td`, place `input` elements inside your `td`s then detect the change on those inputs – catcon May 24 '19 at 03:56
  • cant you help me place on td not input ? – R Muhamad Fadilah May 24 '19 at 04:00
  • Please don't ask the [same question twice](https://stackoverflow.com/questions/56284859/how-to-fix-sum-of-multiple-input-fields-if-same-class-in-one-td-contenteditable) – freefaller May 24 '19 at 07:11

2 Answers2

0
 <td contenteditable="true" price="10" class="price">10 </td>
<td contenteditable="true" price="10" class="price">10 </td>
<td contenteditable="true" price="10" class="price">10 </td>
<td contenteditable="true" price="10" class="price"> 10</td>
<td contenteditable="true" price="10" class="price"> 10</td>
<td contenteditable="true" price="10" class="price">10 </td>

<script>
$(document).ready(function)
    var sum = 0;
    $(".price").each(function(){
        sum += +$(this).attr('price');
    });
    $(".total").val(sum);
});
</script>

<input type="text" id="total" class="total" value=""  />
Rakesh
  • 505
  • 5
  • 12
0

$('body').on('focus', '[contenteditable]', function() {
    const $this = $(this);
    $this.data('before', $this.html());
}).on('blur keyup paste input', '[contenteditable]', function() {
    const $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
});
$(document).on("change", ".price", function() {
    var sum = 0;
    $(".price").each(function(){
    //console.log($(this).html());
        sum += +$(this).html();
    });
    $(".total").val(sum);
});
.price{
width:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="3">
    <tr>
        <td contenteditable="true" class="price"> </td>
        <td contenteditable="true" class="price"> </td>
        <td contenteditable="true" class="price"> </td>
        <td contenteditable="true" class="price"> </td>
        <td contenteditable="true" class="price"> </td>
        <td contenteditable="true" class="price"> </td>
    </tr>
</table>
<input type="text" id="total" class="total" value=""  />

For more detail please refer contenteditable change events

Hitesh Tripathi
  • 856
  • 1
  • 11
  • 23