Блог

Главная - Вопросы по программированию - Как я могу получить общую стоимость после добавления оплаченной стоимости в php

Как я могу получить общую стоимость после добавления оплаченной стоимости в php

#javascript #html #jquery

Вопрос:

У меня есть система управления, в которой я создаю страницу продаж. Я делаю все поля. Теперь, после ввода элементов, я хочу, чтобы система управления показывала мне общую сумму всех, и когда я добавляю оплаченные деньги, она показывает мне оставшуюся сумму от общей суммы. Ниже приведен Html-код

        <table class="table table-bordered table-striped">
    
      <thead>
        
        <th>#</th>
        <th>Item Name</th>
        <th>Batch No</th>
        <th>Remarks</th>
        <th>Quantity</th>
        <th>Cost Per Piece</th>
        <th>Total</th>
        <th>Action</th>
      </thead>
        

    <tbody id="tbody">
   

</tbody>
<center><button type="button" name=""  onclick="additem()" class="btn btn-success"> Add</button></center></td>

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><h3 style="color:red;">Total Amount</td>
     <td><input type="number" id="totalamount" class="form-control" name="text" readonly /></td>
  
 

  <tr>
    <td></td>
    <td> </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><h3 style="color:red;">Paid</td>
     <td><input type="number" name="paid" id="total10" oninput="calculateTotal()" class="form-control" /></td>
  </tr> 
  <tr>
    <td></td>
    <td> </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><h3 style="color:red;">G.T.Balance</td>
     <td><input type="number" name=""  id="gtotal" class="form-control" readonly /></td>
  </tr> 

 
        </table>

Теперь код jquery выглядит так

 <script type="text/javascript">
let x = 0;
function additem() {
x  ;
  var html=`<tr;
      <td><center>${x}</center></td>
      <td><input type='text' class='form-control' name='product_name[]' required></td>
      <td><input type='text' class='form-control' name='batch_no[]' required></td>
      <td><input type='text' class='form-control' name='remarks[]' required></td>
      <td><input id='qty${x}' type='number' class='form-control' oninput='calculate(${x})' name='total_qty[]' required></td>
      <td><input id='cost${x}' type='number' class='form-control'  oninput='calculate(${x})'name='cost[]' required></td>
      <td><input type='number' class='form-control'   id='total${x}'  name='total[]' readonly required></td>
      <td><button type='button' id='btn' class='btn btn-danger'><i class='fa fa-remove'></i></button></td>
      </tr>`; 
      document.getElementById("tbody").insertRow().innerHTML= html;

}

function calculate(x) {
  const qty = document.getElementById(`qty${x}`).value;
  const cost = document.getElementById(`cost${x}`).value;
  const totalElem = document.getElementById(`total${x}`);
  totalElem.value = qty * cost
  calculateTotal()
}

function calculateTotal() {
  let fields = document.getElementsByName('total')
  let total = 0
  fields.forEach(f => {
    total = total   parseInt(f.value)
  })
  document.getElementById('totalamount').value = total
  let paid = document.getElementById('total10').value || 0 // If you change the  id of the "paid" field, change it here too.
  let subtotal = total - parseInt(paid)
  
  document.getElementById('gtotal').value = subtotal
}


  $(document).on('click',"#btn", function(e)
    {
      var r = $(this).closest('tr').remove();
      x=0;
    });


  
   
</script>

Я заставил имя функции рассчитать общее количество, прежде чем оно вернет мне правильное значение, теперь оно возвращает мне 0. Пожалуйста, будьте добры, помогите мне

Комментарии:

1. Ваша структура HTML полностью неверна, например, вы открываете, закрываете <tbody> и помещаете <td> ее снаружи, или вы открываете <tr> , не закрывая ее. Пожалуйста, начните исправлять это.

2. Сэр, проблема в функции javascript

3. Я опубликовал ответ, проверьте его. Это работает, я проверил.

4. Начните исправлять свой HTML в HTML и в JS (пример: var html=<tr; , почему вы закрываетесь <tr> с ; ????)

Ответ №1:

Изменения в переменной html var: От: имя=’всего[]’

Кому: имя=»всего»

Примечание: Вы не должны смешивать JS и HTML вместе. Существуют также проблемы с вашей HTML-таблицей.

 var html=`<tr>
          <td><center>${x}</center></td>
          <td><input type='text' class='form-control' name='product_name[]' required></td>
          <td><input type='text' class='form-control' name='batch_no[]' required></td>
          <td><input type='text' class='form-control' name='remarks[]' required></td>
          <td><input id='qty${x}' type='number' class='form-control' oninput='calculate(${x})' name='total_qty[]' required></td>
          <td><input id='cost${x}' type='number' class='form-control'  oninput='calculate(${x})'name='cost[]' required></td>
          <td><input type='number' class='form-control'   id='total${x}'  name='total' readonly required></td>
          <td><button type='button' id='btn' class='btn btn-danger'><i class='fa fa-remove'></i></button></td>
          </tr>`;
Метки: