Блог

—-HTML-код—- Как изменить значение выходного текста с помощью JavaScript — Возврат не обновляет значение файла, но отображает значение в поле На этой странице выполняется расчет счета amt=кол-во*цена сумма счета=сумма всей суммы товара. Сумма и сумма счета возвращаются из JS

             <tbody>
                <tr class="d-flex"> 
                    <td class="col-sm-5">
                    <div class="form-outline">
                    <select  id="selectitem1" name="itemname"  class="selectitem" "form-control" style="width: 100%" onchange="myFunction(this,1)">
                    <option selected disabled="True" class="form-control">Item Name </option>
                      {% for item in showdrop %}
                      <option value="{{item.item_name}}" data-price="{{item.item_price}}" class="form-control">{{item.item_name}}</option>
                      {% endfor %}
                    </select>  
                    </div>
                    </td>
                    <td class="col-sm-1">
                     <div class="form-group">
                        <input type="text" name="qty" class="form-control qty">
                     </div> 
                    </td>
                    <td class="col-sm-1-5">
                     <div class="form-group">
                        <input id="myText1" type="text" name="price" class="form-control price" value=" ">
                     </div> 
                    </td>
                    <td class="col-sm-2">
                     <div class="form-group">
                        <output id="amt" name="amt" class="form-control amt" value=" " readonly >
                     </div> 
                    </td>
                    <td class="col-sm-2 ">
                     <div class="form-group">
              <div class="col-sm-15 align-self-center">
                <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
                  <label class="btn btn-sm btn-primary btn-simple active" id="0">
                    <input type="radio" name="options" checked>
                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Edit</span>
                    <span class="d-block d-sm-none">
                      <i class="tim-icons icon-single-02"></i>
                    </span>
                  </label>
                  <label class="btn btn-sm btn-primary btn-simple" id="1">
                    <input type="radio" name="options" class="d-none d-sm-none" >
                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Add</span>
                    <span class="d-block d-sm-none">
                      <i class="tim-icons icon-gift-2"></i>
                    </span>
                  </label>
                  </div>
              </div>                        
                     </div> 
                    </td>
                </tr>
                    <tr class="d-flex justify-content-end">
                    <td class="col-5">
                     Bill Amount
                    </td>
                    <td class="col-sm-2">
                    <div class="form-outline">
                      <output name="total" class="form-control total" readonly>
                    </div>
                    </td>
                    <td class="col-sm-2 ">
                    </td>
                    </tr>
            </tbody>
 

—- Джей СИ——
Оба возвращают amt, а total просто отображает значения в поле in и не обновляется.

 <script>
$(function(){
    $('tbody').on('keyup', '.qty,.price', function(){
        var total = 0;
        $(this).parents('table:first').find('tr').each(function(){
             var qty = $(this).find('.qty').val();
             var price = $(this).find('.price').val();
        
            var amt = 0;
            if(qty != '' amp;amp; !isNaN(qty) amp;amp; price != '' amp;amp; !isNaN(price)){
                amt = qty*price;
                total = total amt;
            }
            $(this).find('.amt').html(function(){
                return (amt > 0) ? amt : '';
            });
        }); 
              $('.total').html(function(){
               return (total > 0) ? total : '';
        });
    });
});
</script>