简体   繁体   中英

jquery .on change live update in input field based on value selected

keyup function is working correctly. Now i want is, after keyup function has perform the calculation, if i go ahead and change the select option, perform calculation based on the selected option without keying up again unless may be i want to change the amount.

thanks in advance.

please the is the fiddle

  $('#buyselect').change(function() {

var value = $(this).val();
switch (value) {
  case 'btc':
    var rate = 4.7;
    var ngnrate = 5.7;

    var buyusd = $("#buyusd");
    buyusd.keyup(function() {
      var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate);
      total1 = parseFloat(total).toFixed(2);
      $("#buyghc").val(total1);

      var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate);
      ngntotal1 = parseFloat(ngntotal).toFixed(2);
      $("#buyngn").val(ngntotal1);
    });

    var buyghc = $("#buyghc");
    buyghc.keyup(function() {
      var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate);
      total1 = parseFloat(total).toFixed(2);
      $("#buyusd").val(total1);

      var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate);
      ngntotal1 = parseFloat(ngntotal).toFixed(2);
      $("#buyngn").val(ngntotal1);

    });

    var buyngn = $("#buyngn");
    buyngn.keyup(function() {
      var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate);
      total1 = parseFloat(total).toFixed(2);
      $("#buyusd").val(total1);

      var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate);
      ghctotal1 = parseFloat(ghctotal).toFixed(2);
      $("#buyghc").val(ghctotal1);
    });
    break;

  case 'gcr':
    var rate = 7;
    var ngnrate = 3;

    var buyusd = $("#buyusd");
    buyusd.keyup(function() {
      var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate);
      total1 = parseFloat(total).toFixed(2);
      $("#buyghc").val(total1);

      var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate);
      ngntotal1 = parseFloat(ngntotal).toFixed(2);
      $("#buyngn").val(ngntotal1);
    });

    var buyghc = $("#buyghc");
    buyghc.keyup(function() {
      var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate);
      total1 = parseFloat(total).toFixed(2);
      $("#buyusd").val(total1);

      var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate);
      ngntotal1 = parseFloat(ngntotal).toFixed(2);
      $("#buyngn").val(ngntotal1);

    });

    var buyngn = $("#buyngn");
    buyngn.keyup(function() {
      var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate);
      total1 = parseFloat(total).toFixed(2);
      $("#buyusd").val(total1);

      var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate);
      ghctotal1 = parseFloat(ghctotal).toFixed(2);
      $("#buyghc").val(ghctotal1);
    });
    break;
} });

create a common function and call that function in onchange and onkey up codepen link https://codepen.io/kalaiselvan/pen/KqMPaK

      $(function(){
   $("#buyusd").keyup(function(){
       calculate();
   })
   $('#buyselect').change(function() {
        calculate();  
   }) 
});
function calculate(){
  var value = $("#buyselect").val();
     switch (value) {
          case 'btc':
            var rate = 4.7;
            var ngnrate = 5.7;

            var buyusd = $("#buyusd");

              var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate);
              total1 = parseFloat(total).toFixed(2);
              $("#buyghc").val(total1);

              var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate);
              ngntotal1 = parseFloat(ngntotal).toFixed(2);
              $("#buyngn").val(ngntotal1);


              var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate);
              total1 = parseFloat(total).toFixed(2);
              $("#buyusd").val(total1);

              var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate);
              ngntotal1 = parseFloat(ngntotal).toFixed(2);
              $("#buyngn").val(ngntotal1);

              var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate);
              total1 = parseFloat(total).toFixed(2);
              $("#buyusd").val(total1);

              var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate);
              ghctotal1 = parseFloat(ghctotal).toFixed(2);
              $("#buyghc").val(ghctotal1);
            break;

          case 'gcr':
            var rate = 7;
            var ngnrate = 3;

            var buyusd = $("#buyusd");

              var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate);
              total1 = parseFloat(total).toFixed(2);
              $("#buyghc").val(total1);

              var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate);
              ngntotal1 = parseFloat(ngntotal).toFixed(2);
              $("#buyngn").val(ngntotal1);



              var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate);
              total1 = parseFloat(total).toFixed(2);
              $("#buyusd").val(total1);

              var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate);
              ngntotal1 = parseFloat(ngntotal).toFixed(2);
              $("#buyngn").val(ngntotal1);


              var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate);
              total1 = parseFloat(total).toFixed(2);
              $("#buyusd").val(total1);

              var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate);
              ghctotal1 = parseFloat(ghctotal).toFixed(2);
              $("#buyghc").val(ghctotal1);

            break;
        }

 }

You should create two functions .

  $('#buyselect').change(function() { var value = $('#buyselect').val(); switch (value) { case 'btc': var rate = 4.7; var ngnrate = 5.7; var buyusd = $("#buyusd"); var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate); total1 = parseFloat(total).toFixed(2); $("#buyghc").val(total1); var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate); ngntotal1 = parseFloat(ngntotal).toFixed(2); $("#buyngn").val(ngntotal1); var buyghc = $("#buyghc"); var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate); total1 = parseFloat(total).toFixed(2); $("#buyusd").val(total1); var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate); ngntotal1 = parseFloat(ngntotal).toFixed(2); $("#buyngn").val(ngntotal1); var buyngn = $("#buyngn"); var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate); total1 = parseFloat(total).toFixed(2); $("#buyusd").val(total1); var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate); ghctotal1 = parseFloat(ghctotal).toFixed(2); $("#buyghc").val(ghctotal1); break; case 'gcr': var rate = 7; var ngnrate = 3; var buyusd = $("#buyusd"); var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate); total1 = parseFloat(total).toFixed(2); $("#buyghc").val(total1); var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate); ngntotal1 = parseFloat(ngntotal).toFixed(2); $("#buyngn").val(ngntotal1); var buyghc = $("#buyghc"); var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate); total1 = parseFloat(total).toFixed(2); $("#buyusd").val(total1); var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate); ngntotal1 = parseFloat(ngntotal).toFixed(2); $("#buyngn").val(ngntotal1); var buyngn = $("#buyngn"); var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate); total1 = parseFloat(total).toFixed(2); $("#buyusd").val(total1); var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate); ghctotal1 = parseFloat(ghctotal).toFixed(2); $("#buyghc").val(ghctotal1); break; } }); function change_value(){ var value = $('#buyselect').val(); switch (value) { case 'btc': var rate = 4.7; var ngnrate = 5.7; var buyusd = $("#buyusd"); buyusd.keyup(function() { var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate); total1 = parseFloat(total).toFixed(2); $("#buyghc").val(total1); var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate); ngntotal1 = parseFloat(ngntotal).toFixed(2); $("#buyngn").val(ngntotal1); }); var buyghc = $("#buyghc"); buyghc.keyup(function() { var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate); total1 = parseFloat(total).toFixed(2); $("#buyusd").val(total1); var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate); ngntotal1 = parseFloat(ngntotal).toFixed(2); $("#buyngn").val(ngntotal1); }); var buyngn = $("#buyngn"); buyngn.keyup(function() { var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate); total1 = parseFloat(total).toFixed(2); $("#buyusd").val(total1); var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate); ghctotal1 = parseFloat(ghctotal).toFixed(2); $("#buyghc").val(ghctotal1); }); break; case 'gcr': var rate = 7; var ngnrate = 3; var buyusd = $("#buyusd"); buyusd.keyup(function() { var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate); total1 = parseFloat(total).toFixed(2); $("#buyghc").val(total1); var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate); ngntotal1 = parseFloat(ngntotal).toFixed(2); $("#buyngn").val(ngntotal1); }); var buyghc = $("#buyghc"); buyghc.keyup(function() { var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate); total1 = parseFloat(total).toFixed(2); $("#buyusd").val(total1); var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate); ngntotal1 = parseFloat(ngntotal).toFixed(2); $("#buyngn").val(ngntotal1); }); var buyngn = $("#buyngn"); buyngn.keyup(function() { var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate); total1 = parseFloat(total).toFixed(2); $("#buyusd").val(total1); var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate); ghctotal1 = parseFloat(ghctotal).toFixed(2); $("#buyghc").val(ghctotal1); }); break; } } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <select class="form-control" id="buyselect"> <option> </option> <option value="btc">BITCOIN</option> <option value="gcr">GCR COIN</option> </select> <div> <div class="form-group"> <label for="amount">Amount in USD:</label> <input type="number" class="form-control" id="buyusd" onkeypress="return change_value()"> </div> </div> <div> <div class="form-group"> <label for="amount">Amount in GHC:</label> <input type="number" class="form-control" id="buyghc"> </div> </div> <div> <div class="form-group"> <label for="amount">Amount in NGN:</label> <input type="number" class="form-control" id="buyngn"> </div> </div> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM