CODEWITHSUNDEEP
javascripthtmljquery
Wilf
Wilf

Reputation: 2315

How to change the total from select option with jquery?

I have table with default amount and pre-number select option on top. When select a new price will change in each row's input. Here I want the new number from select calculate the total price into the next row automatically.

$('select.set_price').change(function() {
  var pset = $(this).data('pset');
  $('td.' + pset).find('input.price').val($(this).val());
});
//calc
$('.price').keyup(function() {
  var i_pay = $(this).closest('tr').find('#pay').text();
  var i_bet = $(this).val();
  var total = (i_pay * i_bet);
  $(this).closest('tr').find('#pay').html(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th class="align-middle text-center">#</th>
    <th>
      <select class="form-select set_price" data-pset="p_3hi">
        <option value="" disabled selected>Order</option>
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
    </th>
    <th>total</th>
  </tr>
  <tr>
    <td class="align-middle text-center">1</td>
    <td class="w-10 p_3hi"><input type="number" class="form-control price" name="price1" value="1" /></td>
    <td class="align-middle text-center">
      <p id="pay">900</p>
    </td>
  </tr>
    <tr>
    <td class="align-middle text-center">2</td>
    <td class="w-10 p_3hi"><input type="number" class="form-control price" name="price2" value="1" /></td>
    <td class="align-middle text-center">
      <p id="pay">800</p>
    </td>
  </tr>
</table>

What I expect is when I select 5. The #1 row's total would be 5*900=4500 and the #2 would be 5*800=4000. Please find the fiddle here : https://jsfiddle.net/w56940ez/

Upvotes: 0

Views: 372

Answers (1)

Ichinator
Ichinator

Reputation: 357

First change $('.price').keyup(function(){}); to $('.price').change(function(){}); or you won't be able to change total value using arrows. If you don't want to use arrows you can keep keyup event.

To automatically change the value of the total column you just need to use trigger("change") on your ìnput elements.

If you want the base values to always be 800 and 900, you should use a data-attributes (data-first-value) which will keep this value and which will be used during the calculation.

Identifiers must be unique like @j08691 said. So you have basically two solutions:

  • use a pay class instead of a pay id. You juste need to replace id="pay" with class="pay" and #pay with .pay
  • use two identifiers. You need to add another data-attributes (data-id) and use it to get the input you want.

$('select.set_price').change(function() {
  var pset = $(this).data('pset');
  input_elements = $('td.' + pset).find('input.price');
  input_elements.val($(this).val());
  input_elements.trigger("change");
});
//calc
$('.price').change(function() {
  /*
  USING A CLASS FOR BOTH 
  
  var i_pay = $(this).closest('tr').find('.pay').attr("data-first-val");
  var i_bet = $(this).val();
  var total = (i_pay * i_bet);
  $(this).closest('tr').find('.pay').html(total);
  
  */
  
  var i_pay = $("#"+$(this).attr("data-id")).attr("data-first-val");
  var i_bet = $(this).val();
  var total = (i_pay * i_bet);
  $("#"+$(this).attr("data-id")).html(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th class="align-middle text-center">#</th>
    <th>
      <select class="form-select set_price" data-pset="p_3hi">
        <option value="" disabled selected>Order</option>
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
    </th>
    <th>total</th>
  </tr>
  <tr>
    <td class="align-middle text-center">1</td>
    <td class="w-10 p_3hi">
    <input type="number" class="form-control price" name="price1" value="1" data-id="pay_1" />
    </td>
    <td class="align-middle text-center">
    <p id="pay_1" data-first-val="900">900</p>
      <!--<p class="pay" data-first-val="900">900</p>-->
    </td>
  </tr>
    <tr>
    <td class="align-middle text-center">2</td>
    <td class="w-10 p_3hi"><input type="number" class="form-control price" name="price2" value="1" data-id="pay_2"/></td>
    <td class="align-middle text-center">
    <p id="pay_2" data-first-val="800">800</p>
      <!--<p class="pay" data-first-val="800">800</p>-->
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions