fire input onchange event after click on button tag

I am doing calculation with function ("update_total") by "onchange" event of input tab number.
it is working fine. no any issue.

when i am using jquery plugin "Nice-Number" for showing plus(+), minus(-) button.
(https://www.jqueryscript.net/form/Number-Input-Spinner-jQuery-Nice-Number.html)

onchange event of input tag is not getting fire. because mouse get clicked on plus(+) or minus(-) button.

therefor i am not getting ("update_total") total value.

please help how to resolve this issue.

$(function() {
  $('input[type="number"]').niceNumber();
});

function update_total(spineerid, product_price, totalid) {
  spineerid = '#' + spineerid;
  totalid = '#' + totalid;

  var qty_count = $(spineerid).val();
  var total = product_price * qty_count;
  $(totalid).html(total + '/-'); // display total 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.nice-number@2.1.0/src/jquery.nice-number.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery.nice-number@2.1.0/src/jquery.nice-number.js"></script>


<div class="card" style="width:12rem">
  <div class="card-header">
    <?php echo $row['product_name'] ?>
  </div>
  <img src="product-images/<?php echo $row['product_image']; ?>" class="card-img-top" alt="..." height="150px">
  <div>
    <span> &#8377;<?php echo$row['product_price']?> </span>
  </div>
  <div>
    <input type="number" min="1" value="1" name="spinnerNumber<?php echo $row['product_id']?>" id="spinnerNumber<?php echo $row['product_id']?>" onchange="update_total('spinnerNumber<?php echo $row['product_id']?>','<?php echo$row['product_price']?>','total<?php echo $row['product_id']?>')">
  </div>

  <div class="card-footer">
    <!-- Total -->
    <div>
      Total: &#8377; <span id="total<?php echo $row['product_id']?>">0</span>
    </div>
  </div>
</div>

2 thoughts on “fire input onchange event after click on button tag”

  1. You need to make following two changes:-

    1. Attach data attributes to the input fields so that you can access the values in the callbacks.

    2. You need to pass the onDecrement & onIncrement callbacks in niceNumber()

    Please find the changes below:-

    `

    <input 
       data-productid="<?php echo $row['product_id']?>"
       data-productprice="<?php echo$row['product_price']?>"
       type="number" min="1" value="1" name="spinnerNumber<?php echo $row['product_id']?>"
       id="spinnerNumber<?php echo $row['product_id']?>">
    

    `

    `

    <script>   
       $(function() {
           $('input[type="number"]').niceNumber({
               onDecrement:  function ($currentInput, amount, settings) {
                   // Extract out data attributes from $currentInput
                   // Do your required calculations
               },
               onIncrement:  function ($currentInput, amount, settings) {
                    // Extract out data attributes from $currentInput
                   // Do your required calculations
               }
           });
       });
    </script>
    

    `

    Reply
  2. just change:

    onchange="update_total...
    

    by oninput

    oninput="update_total...
    
    $('input[type="number"]').niceNumber();
    
    
    function update_total(spineerid, product_price, totalid) {
      spineerid = '#' + spineerid;
      totalid = '#' + totalid;
    
      var qty_count = $(spineerid).val();
      var total = product_price * qty_count; 
      $(totalid).html(total + '/-'); // display total 
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.nice-number@2.1.0/src/jquery.nice-number.css" />
    <script src="https://cdn.jsdelivr.net/npm/jquery.nice-number@2.1.0/src/jquery.nice-number.js"></script>
    
    <div class="card" style="width:12rem">
        <div class="card-header">Product1</div>
        <img src="product-images/image1" class="card-img-top" alt="..." height="150px">
        <div>
            <span>100</span>
        </div>
        <div>
            <input type="number" min="0" value="0" name="spinnerNumberProduct1"
                id="spinnerNumberProduct1"
                oninput="update_total('spinnerNumberProduct1','100','totalProduct1')">
        </div>
    
        <div class="card-footer">
            <!-- Total -->
            <div>
                Total: <span id="totalProduct1">0</span>
            </div>
        </div>
    </div>

    i have just changed min="0" and value="0" to have a correct initialization

    Reply

Leave a Comment