CODEWITHSUNDEEP
javascriptjqueryhtml
ilink
ilink

Reputation: 35

.change jQuery does not change the data

I have a small problem with jQuery .change, when I click on the data, the data does not change.

I'm using ddSlick.

The effect I would like to achieve is like this: http://www.convertmymoney.com/ - So when entering the amount, the data already change additionally when someone enters the amount and changes the currency (flag) it will also change the data, unfortunately this is not the case for me.

$(document).ready(function() {
  var total = 0;

  $("#amountin, #amountout,#amountValue").on("change", function() {
    cal();
  });
  
  $("#amountValue").on("keydown", function() {
    cal();
  });


  $("#exchange").on("click", function() {
    var amountinval = $("#amountin").val();
    var amountoutval = $("#amountout").val();


    cal();
  });

  function cal() {
    var amountinval = $("#amountin").val();
    var amountoutval = $("#amountout").val();
    var amountValue = $("#amountValue").val();

    total = parseFloat(amountValue * (amountinval / amountoutval)).toFixed(2);
    $('#totavalue').attr('placeholder', total);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="currency-calc-in__input currency-calc__input col-lg-8 col-sm-6 col-md-6 col-6">
  <label for="amountValue" class="currency-calc__label">Kwota (posiadam)</label>
  <input type="number" class="form-control" id="amountValue" name="amountValue" aria-describedby="numberHelp" placeholder="100">
</div>

<select class="custom-select currency-calc-in__slick" id="amountin" name="amountin">
  <option value="1" data-description="PLN" data-value="1" data-symbol="PLN">Polski złoty</option>
  <option value="0.1286" data-description="THB" data-value="0.1286" data-symbol="THB">Bat tajlandzki</option>
  <option value="4.1886" data-description="USD" data-value="4.1886" data-symbol="USD">Dolar amerykański</option>
  <option value="2.6503" data-description="AUD" data-value="2.6503" data-symbol="AUD">Dolar australijski</option>
  <option value="0.5406" data-description="HKD" data-value="0.5406" data-symbol="HKD">Dolar Hongkongu</option>
</select>

<select class="custom-select currency-calc-out__slick" id="amountout" name="amountout">
  <option value="0.0003" data-description="IDR" data-value="0.0003" data-symbol="IDR">Rupia indonezyjska</option>
  <option value="0.0549" data-description="INR" data-value="0.0549" data-symbol="INR">Rupia indyjska</option>
  <option value="0.0034" data-description="KRW" data-value="0.0034" data-symbol="KRW">Won południowokoreański</option>
  <option value="0.5920" data-description="CNY" data-value="0.5920" data-symbol="CNY">Yuan renminbi</option>
</select>

<div class="currency-calc-out__input currency-calc__input col-lg-8 col-sm-6 col-md-6 col-6">
  <label for="amountValue" class="currency-calc__label">Kwota (otrzymam)</label>
  <input type="number" class="form-control converter-score__value--normal" id="totavalue" placeholder="100" disabled>
  <input type="number" class="form-control converter-score__value--js" id="totavalue" style="display:none;" placeholder="" disabled>
</div>

Upvotes: 0

Views: 60

Answers (2)

enkdr
enkdr

Reputation: 363

Have you tried replacing the console.log here with the cal() function?

    $('.currency-calc-in__slick').ddslick({
imagePosition: "right",
selectText:"Wybierz",
onSelected: function (data) {

        cal();
}
});

$('.currency-calc-out__slick').ddslick({
imagePosition: "right",
defaultSelectedIndex:3,
onSelected: function (data) {

        cal();

    }
});

Upvotes: 1

islam hany
islam hany

Reputation: 148

These two lines return undefined

var amountinval = $("#amountin").find('.dd-selected-value').val();
var amountoutval = $("#amountout").find('.dd-selected-value').val();

Try replacing them with the following and it will return the selected option value

var amountinval = $("#amountin :selected").val();
var amountoutval = $("#amountout :selected").val();

Upvotes: 0

Related Questions