jquery: how to update input value using onchange?

Question

I created a discount function for my order page where I have an issue that is , on my order page by default when product quantity is 1 then discounted rate show correctly in Final textbox but when I change the Quantity, like 1 to 2,3,4,5.. then my code not works and the amount show without discount rate. I try to fix this but I not understand where is mistake and how I fix that.

Below is my code which I am using please help and tell me how I make this correct.

Your help will be really appreciate.

Thank you!

function getTotal(row = null) {
    if(row) {
      var disc = $('#dis_1').val();//
      var dec = (disc/100).toFixed(2);  //
      var total = Number($("#rate_value_"+row).val()) * Number($("#qty_"+row).val()) * dec;
      //total = total.toFixed(2);
      var rate = Number($("#rate_value_"+row))-total;
      total = total.toFixed(2);
      $("#amount_"+row).val(total);
      $("#amount_value_"+row).val(total);
      
      subAmount();

    } else {
      alert('no row !! please refresh the page');
    }
  }

//**---**/


  //*---*//
  
  // get the product information from the server
  function getProductData(row_id)
  {
    var product_id = $("#product_"+row_id).val();    
    if(product_id == "") {
      $("#rate_"+row_id).val("");
      $("#rate_value_"+row_id).val("");

      $("#qty_"+row_id).val("");           

      $("#amount_"+row_id).val("");
      $("#amount_value_"+row_id).val("");

    } else {
      $.ajax({
        url: base_url + 'orders/getProductValueById',
        type: 'post',
        data: {product_id : product_id},
        dataType: 'json',
        success:function(response) {
          // setting the rate value into the rate input field
          
          $("#rate_"+row_id).val(response.price); 
          $("#rate_value_"+row_id).val(response.price);

          $("#dis_"+row_id).val(response.discount);
          $("#dis_value_"+row_id).val(response.discount);
          
          $("#qty_"+row_id).val(1);
          $("#qty_value_"+row_id).val(1);

          //DISCOUNT      
        
          var disc = $('#dis_1').val();
          var dec = (disc/100).toFixed(2);   
          var total = Number(response.price) * dec;
          var rate = Number(response.price)-total;
          total = rate.toFixed(2);
          $("#amount_"+row_id).val(total);
          $("#amount_value_"+row_id).val(total);
          subAmount();
        } // /success
      }); // /ajax function to fetch the product data 
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <td><input type="text" name="qty[]" id="qty_1" class="form-control" required onkeyup="getTotal(1)" placeholder="Quantity"></td>
    <td>
    <input type="text" name="rate[]" id="rate_1" class="form-control" autocomplete="off" placeholder="Rate">
    </td>
    <td>
    <input type="text" placeholder="Discount" name="dis[]" id="dis_1" class="form-control" autocomplete="off">
    </td>
    <td>
    <input type="text" placeholder="Total Price" name="amount[]" id="amount_1" class="form-control" autocomplete="off">
    </td>

I am using my database to fetch the amount like product real rate, discounts.

Your provided code is incomplete, but this looks pretty suspect: onkeyup="getTotal(1)" — fdomn-m
– fdomn-m, Commented Dec 4, 2018 at 14:56
@Johncartor It appears that you did not post the full JavaScript code so it is hard to tell what is going on. — epascarello
– epascarello, Commented Dec 4, 2018 at 14:59

John Townsend · Accepted Answer · 2018-12-04 15:55:47Z

1

In your line of HTML

    <td><input type="text" name="qty[]" id="qty_1" class="form-control" required onkeyup="getTotal(1)" placeholder="Quantity"></td>

you are always calling getTotal with a value of 1, I think you want to instead get the value of the text box when the getTotal function is called and use that as your row value. In jquery you can get the value of the box by

row = $("#qty").val()

answered Dec 4, 2018 at 15:55

John Townsend

3364 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Townsend Over a year ago

Instead of passing the row number in from your HTML as you do in the 2nd line of your HTML, you should get the value of the row from your js file by putting the row = $("#qty").val() as the first line of your getTotal function

Collectives™ on Stack Overflow

jquery: how to update input value using onchange?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related