Баланс должен быть равен grand total - paid amount в скрипте php.

У меня есть сценарий, в котором сумма баланса должна быть равна Grand Amount - Paid Amount. Когда я пытаюсь ввести оплаченную сумму, на балансе не отображается оставшаяся сумма. Я хочу, чтобы при вводе суммы в платный ввод баланс уменьшался и отображалась общая сумма - выплаченная сумма.

const table = document.getElementById('myTable');
table.addEventListener('input', ({
  target
}) => {
  const tr = target.closest('tr');
  const [price, quantity, total] = tr.querySelectorAll('input');

  var rate = price.value * quantity.value;

  if (rate != "") {
    total.value = rate;
  }
  totalPrice();
});

function totalPrice() {
  var grandtotal = 0;
  var paid = 0;
  var balance = 0;
  $(".totalPrice").each(function() {
    grandtotal += parseFloat($(this).val());
    paid = grandtotal;
    balance = grandtotal - paid;
  });
  $("#grandtotal").val(grandtotal);
  $("#paid").val(paid);
  $("#balance").val(balance);

}
table,
tr,
td,
th {
  border: 1px black solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th>Rate</th>
    <th>Quantity</th>
    <th>Total</th>

  </thead>
  <tbody id="myTable">
    <tr>
      <td><input type="text" name="price" value="0"></td>
      <td><input type="text" name="quantity" value="1"></td>
      <td><input type="text" name="total" class="totalPrice" readonly></td>
    </tr>
  </tbody>


</table>
<span>Grand Total<input type="text" name="grandtotal" id="grandtotal" readonly></span><br><br>
<span>Paid Amount<input type="text" name="paid" id="paid"></span><br><br>
<span>Balance<input type="text" name="balance" id="balance" readonly></span><br><br>

Самым первым, что я заметил, был paid = grandtotal;, и сразу после этого balance = grandtotal - paid;, возможно, я не очень хорошо понимаю JS, но что-то мне подсказывает, что balance всегда будет нулевым.

Eugene Anisiutkin 31.10.2018 11:47
2
1
116
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

попробуйте этот код

используйте $('#paid').on('change', function())}, чтобы получить balance1 value fromgrandtotalandpaidamount whenpaidamout changeremaining balance view`

const table = document.getElementById('myTable');
table.addEventListener('input', ({
  target
}) => {
  const tr = target.closest('tr');
  const [price, quantity, total] = tr.querySelectorAll('input');

  var rate = price.value * quantity.value;

  if (rate != "") {
    total.value = rate;
  }
  totalPrice();
});

function totalPrice() {
  var grandtotal = 0;
  var paid = 0;
  var balance = 0;
  $(".totalPrice").each(function() {
    grandtotal += parseFloat($(this).val());
    paid = grandtotal;
    balance = parseFloat(grandtotal) - parseFloat(paid);
  });
  $("#grandtotal").val(grandtotal);
  $("#paid").val(paid);
}
$(document).ready(function() {
  $('#paid').on('change', function() {
    grandtotal = $("#grandtotal").val();
    paid = $("#paid").val();
    balance = parseFloat(grandtotal) - parseFloat(paid);
    $("#balance").val(balance);
  })
});
table,
tr,
td,
th {
  border: 1px black solid;
}
<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <table>
    <thead>
      <th>Rate</th>
      <th>Quantity</th>
      <th>Total</th>

    </thead>
    <tbody id="myTable">
      <tr>
        <td><input type="text" name="price" value="0"></td>
        <td><input type="text" name="quantity" value="1"></td>
        <td><input type="text" name="total" class="totalPrice" readonly></td>
      </tr>
    </tbody>


  </table>
  <span>Grand Total<input type="text" name="grandtotal" id="grandtotal" readonly></span><br><br>
  <span>Paid Amount<input type="text" name="paid" id="paid"></span><br><br>
  <span>Balance<input type="text" name="balance" id="balance" readonly></span><br><br>
</body>


<script>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>

</style>

</html>

Фрагмент кажется немного неработающим, я не думаю, что Grandtotal и Total должны быть пустыми, а Balance не должен возвращать NaN. Также не могли бы вы пролить свет на paid = grandtotal; и balance = parseFloat(grandtotal) - parseFloat(paid);. Разве баланс здесь не будет нулевым? Или очень близко к этому?

Eugene Anisiutkin 31.10.2018 12:00

Вам лучше обратиться к questioner, я попытался ответить, насколько я понимаю, на вышеупомянутый вопрос. @EugeneAnisiutkin

Bhargav Chudasama 31.10.2018 12:03

Другие вопросы по теме