CODEWITHSUNDEEP
jquery
Mr Joe
Mr Joe

Reputation: 131

How do I calculate onchange with keyup

I have 3 input. Package - Total - Price

How do I make the price will change too when the package is changed.

$('#the_total').keyup(function () {
    var the_total = $("#the_total").val();
    var get_package = $("#package").val();
    if (get_package == 'Package A') {
        var total = the_total * 100;
    } else {
        var total = the_total * 200;
    }
    $("#price").val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="package">
    <option value="Package A">Package A</option>
    <option value="Package B">Package B</option>
</select>
<input type="text" id="the_total" name="total">
<input type="text" id="price" name="price">

Upvotes: 2

Views: 2686

Answers (5)

Pankaj Bisht
Pankaj Bisht

Reputation: 994

Use this js -- With few validations

$(function() {

    function theChange () {
        var the_total = $("#the_total").val();
        var get_package = $("#package").val();

        if (get_package == 'Package A') {
            var total = the_total * 100;
        } else {
            var total = the_total * 200;
        }

        $("#price").val(total); 
    }

    $('#the_total').keyup(function() { theChange(); });
    $("#package").change(function () { theChange(); });
});

Upvotes: 1

BenG
BenG

Reputation: 15154

Attach the keyup and change to both elements using on.

$('#the_total, #package').on('change keyup', function() {
  var the_total = $("#the_total").val();
  var get_package = $("#package").val();
  if (get_package == 'Package A') {
    var total = the_total * 100;
  } else {
    var total = the_total * 200;
  }
  $("#price").val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="package">
  <option value="Package A">Package A</option>
  <option value="Package B">Package B</option>
</select>

<input type="text" id="the_total" name="total">
<input type="text" id="price" name="price">

Upvotes: 1

Hackerman
Hackerman

Reputation: 12305

You can try something like this:

$(function(){
  function doTotal(){
      var the_total = $("#the_total").val();
      var get_package = $("#package").val();
      var total = 0;
      get_package == 'Package A'?total = the_total * 100:total = the_total * 200;
      $("#price").val(total);
  }
  $('#the_total').keyup(function() {
    doTotal();
  });

  $('#package').change(function(){
    doTotal();
  });
});

Working fiddle: https://jsfiddle.net/tth4x2o9/1/

Upvotes: 2

Sanjay Kumar N S
Sanjay Kumar N S

Reputation: 4739

Try this:

$(document).ready(function(){
   $('#the_total').keyup(function() {
       loadPrice();
  });
  $('#package').change(function(){
      loadPrice();
  })
  function loadPrice() {
    var the_total = $("#the_total").val();
    var get_package = $("#package").val();
    if (get_package == 'Package A') {
      var total = the_total * 100;
    } else {
      var total = the_total * 200;
    }
    $("#price").val(total);
  }

});

Upvotes: 2

Jai
Jai

Reputation: 74738

Trigger the keyup on change event.

$('#the_total').keyup(function() {
  var the_total = $("#the_total").val();
  var get_package = $("#package").val();
  if (get_package == 'Package A') {
    var total = the_total * 100;
  } else {
    var total = the_total * 200;
  }
  $("#price").val(total);
});

$('#package').change(function() { // on change
  $('#the_total').keyup(); // trigger this
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="package">
  <option value="Package A">Package A</option>
  <option value="Package B">Package B</option>
</select>

<input type="text" id="the_total" name="total">
<input type="text" id="price" name="price">

Upvotes: 2

Related Questions