Unable to invoke onchange="distributeAmount()"

JavaScript
1

hi sir!
here is my html code. payrecved3 is auto calculated on the addition of two other fields. all working fine but issue is when payrecved3 value change on the calculation of two feilds, its unable to call/implment onchange=“distributeAmount()” , due to which i unable to get shr4 fields automatically

<div class="col-lg-4"> <div class="form-group">
		<label>Total Amount + Advance (with Ded)</label> <input type="text" name= "payrecved3"  id= "payrecved3" class="form-control"   Required  onchange="distributeAmount()">
		</div> </div>

here is java script

<!-- Include necessary JS files -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            function distributeAmount() {
                let totalReceived = parseFloat($('#payrecved3').val()) || 0;
                let totalShare = 0;
                let rows = $('#TBody').find('tr');

                // Calculate the total share
                rows.each(function () {
                    let share = parseFloat($(this).find('.tot4').val()) || 0;
                    totalShare += share;
                });

                // Distribute the amount based on share
                rows.each(function () {
                    let share = parseFloat($(this).find('.tot4').val()) || 0;
                    let total = totalShare > 0 ? (share / totalShare) * totalReceived : 0;
                    $(this).find('.shr4').val(total.toFixed(2));
                });
            }

            // Event listener for changes in share input fields
            $(document).on("input", ".tot4", function() {
                distributeAmount();
            });
            
            // Event listener for changes in the total amount received
            $('#payrecved3').on("input", function() {
                distributeAmount();
            });
        });
    </script>

and hre is html table form where tot4 and shr4

<table class="table table-bordered">
                    <thead class="table-success" style="background-color: #3fbbc0;">
                      <tr>
                     <th width="10%"><center>Service</th>
                        <th width="10%"><center>Type</th>
                        <th width="10%"><center>Consultant</th>
			
			<th width="10%"><center>Qty/Graf.</th>                       
			<th width="10%"><center>Rate/Unit</th>
			<th width="10%"><center>Discount</th>			
			<th width="10%"><center>Total</th>
<th width="10%"><center>Share</th>
			<th width="10%"><center>Reff. By</th>
                        <th width="10%"><center>Asst By</th> 
                       <th width="10%"><center>OT</th> 
			<th width="10%"><center>Remarks</th>
			<th width="5%"></th>

                                               
                         <button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>                         
                        </th>
</tr>
                    </thead>
                    <tbody id="TBody">
                      <tr id="TRow" class="d-none">



   <td><Select  class="country form-control text-end" name="country[]" id = "country"  required>
<option value=""> Select Service</option>
                <?php
                include('db1.php');
                $query = "select * from country";
                // $query = mysqli_query($con, $qr);
                $result = $con->query($query);
                if ($result->num_rows > 0) {
                    while ($row = mysqli_fetch_assoc($result)) {
                ?>
                <option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
                <?php
                    }
                }     ?>    </select> </td>

              

 <td><Select  class="state form-control text-end" name="state[]" id = "state" required>

<option value="">select Type</option></select></td>
 <td><Select  class="city form-control text-end" name="city[]" id = "city" required onchange="GetDetail(this.closest('tr'))" >

<option value="">Select Cons</option></select></td>
            

 
          	
      	<td><input type="text" class="qty form-control text-end" name="qty[]" id="ccc" oninput="Calc(this);"  Required></td>
	<td><input type="text" class="price form-control text-end" name="price1[]" id="ddd"   onfocus="Calc(this);" readonly style="background-color: #3fbbc0;"></td>
	<td><input type="text" class="discunt form-control text-end" name="discunt[]"  id="eee" onchange="Calc(this);"  ></td>
   	<td><input type="text" class="tot4 form-control text-end" name="tot4[]" id="fff" oninput="Calc(this);"  Required readonly style="background-color: #3fbbc0;"></td>		 			
          <td><input type="text" class="shr4 form-control text-end" name="shr4[]"></td>
  <td><Select class="form-control text-end" name="tech1[]" id="ggg" Required onfocus="Calc(this);">
       <option value="">Select Reff</option>
         <?php
         include('db.php');
        $sql = mysqli_query($con,"SELECT * FROM reff");
         while($row=mysqli_fetch_array($sql))
        {
         echo '<option value="'.$row['reffered'].'">'.$row['reffered'].'</option>';
          } ?>
           </select></td>

		<td><Select class="form-control text-end" name="docname[]" id="iii" required onfocus="Calc(this);">
	<option value="">Select Asst</option>
        <?php
        include('db.php');
      $sql = mysqli_query($con,"SELECT * FROM tech1");
        while($row=mysqli_fetch_array($sql))
         {
         echo '<option value="'.$row['techname'].'">'.$row['techname'].'</option>';
            } ?>  </select></td>

	<td><Select class="form-control text-end chosen-select" name="docname1[0][]"  id="iii" multiple  required onfocus="Calc(this);">
	
        <?php
        include('db.php');
      $sql = mysqli_query($con,"SELECT * FROM mmmach");
        while($row=mysqli_fetch_array($sql))
         {
         echo '<option value="'.$row['mach1'].'">'.$row['mach1'].'</option>';
            } ?>  </select></td>


<td><input type="text" class="form-control text-end" name="remarks3[]"  id="zzz" >
         <input type="hidden" class="form-control text-end mop" name="remarks4[]"  id="zzz9" ><input type="hidden" class="zzz1 form-control text-end" name="zzz1[]"  id="zzz1" ><input type="hidden" class="zzz2 form-control text-end" name="zzz2[]"  id="zzz2" ><input type="hidden" class="zzz3 form-control text-end" name="zzz3[]"  id="zzz3" ><input type="hidden" class="zzz4 form-control text-end" name="zzz4[]"  id="zzz4" ><input type="hidden" class="zzz5 form-control text-end" name="zzz5[]"  id="zzz5" ></td>
		<td class="NoPrint"><button type="button" class="btn btn-success"  style="line-height: 1;" onclick="BtnDel(this)">x</button></td>
			
                      </tr>   </tbody> </table>
2

Where? Nothing in your code shows something writing to payrecved3. Reading from it, yes. Writing to it, no.

distributeAmount sums up a table’s tot4 values, then assigns to shr4 a proportion of the amount in payreceved3. This approach has rounding error written all over it, but neither here nor there.

3

issue is solved by me,

4

Hi @itsumarnazir,

Care to share how you solved it? It might be helpful for others who run into a similar issue.

Thanks

1 Like
5

below code handling last manual input, after that all are auto calculated fields.

<script>
function updateValues(element) {
    const row = element.closest('tr');
    const amountField = row.querySelector('input[name="machno1[]"]');
    const deductionField = row.querySelector('input[name="ded1[]"]');
    const netField = row.querySelector('input[name="net1[]"]');
    const modeField = row.querySelector('select[name="scode1[]"]');
    
    const amount = parseFloat(amountField.value) || 0;
    const mode = modeField.value;

    let deduction = 0;
    if (mode === "Card") {
        deduction = amount * 0.022; // 2.2% deduction
    }
    
    deductionField.value = deduction.toFixed(2);
    const netAmount = amount - deduction;
    netField.value = netAmount.toFixed(2);

    GetTotal1(); // Recalculate total and balance	
		 
		///		
	    let totalReceived = parseFloat($('#payrecved3').val()) || 0;
	    let totalShare = 0;
	    let rows = $('#TBody').find('tr');
	
	    // Calculate the total share
	    rows.each(function () {
	        let share = parseFloat($(this).find('.tot4').val()) || 0;
	        totalShare += share;
	    });
	
	    // Distribute the amount based on share
	    rows.each(function () {
	        let share = parseFloat($(this).find('.tot4').val()) || 0;
	        let total = totalShare > 0 ? (share / totalShare) * totalReceived : 0;
	        $(this).find('.shr4').val(total.toFixed(2));
	    });
		///
}
1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.