CODEWITHSUNDEEP
javascriptjquery
zaghadon
zaghadon

Reputation: 701

How do I assign a new value to a variable based on the value of a selected option of a select tag, retrieve and use the new value of the variable?

I'm building a form where user can choose the currency they want to change and as they choose the currency it reflects the currency symbol next to the Amount label. I want to display the STRING equivalence of the selected currency symbol as a result on the page and I don't know how to achieve this in javascript.

https://www.w3schools.com/code/tryit.asp?filename=G89PFIUW1OUC

above is a code playground link to what I'm trying to do, I have written the jquery code to alternate the value of select options and display the value of the option next to the Amount label and it works fine if I comment out the function that compares the value of the option value and assigns a new value to the stringcurr variable. I don't know what I'm doing wrong, so I need help.

<div class="col-md-3">
  <span class="color-bold">Cash Back Exchange Currency<span style="color:red;">*</span></span>
  <select class="form-control" id="currSelect">
    <option value="">Select currency</option>
    <option value="&#36;"> United States Dollars (USD) </option>
    <option value="&#163;"> Great Britain Pounds (GBP) </option>
    <option value="&#8364;"> European Euro (EUR) </option>
  </select>
</div>

<div class="col-md-3">
  <label class="color-bold">Amount  - <span id="curr"></span> <span style="color:red;">*</span></label>
  <input name="forexamount" id="forexamount" class="common" type="number" placeholder="Eg. 200">
</div>
<div id="stringcurr"></div>

JS

<script>
  var intcurr;
  var currencysymbol = "";

  $("#currSelect")
    .change(function() {

        $("#currSelect option:selected").each(function() {
          currencysymbol = $(this).val();
        });
        $("#curr").text(currencysymbol /* .substring(1,0) */ );

        (function(currencysymbol) {
            if (currencysymbol != "") {
              if (currencysymbol == "&#36;") {
                return intcurr = "USD";
              } else if (currencysymbol == "&#163;") {
                return intcurr = "GBP";
              } else if (currencysymbol == "&#8364;") {
                return intcurr = "EUR";
              } else {
                return false
              }

              $("#stringcurr").text(intcurr);
            })();

          change();
        });
</script>

I expect the stringcurr div to show USD if the value of the selected option is $charset or GBP if the value of the selected option is £charset etc by assign the strings to the intcurr variable.

Upvotes: 0

Views: 257

Answers (1)

charlietfl
charlietfl

Reputation: 171700

A simpler approach is add a data attribute to each <option> with the currency text values and use jQuery data() to access them.

Also you need to chain the change() method trigger for the page load

$("#currSelect").change(function() {
  // get selected data or make it empty string if undefined
  var curr = $(this).find(':selected').data('curr') || '';
  $('#curr, #stringcurr').text(curr);
   // trigger event on page load
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
  <span class="color-bold">Cash Back Exchange Currency<span style="color:red;">*</span></span>
  <select class="form-control" id="currSelect">
    <option value="">Select currency</option>
    <option value="&#36;" data-curr="USD"> United States Dollars (USD) </option>
    <option value="&#163;" data-curr="GBP"> Great Britain Pounds (GBP) </option>
    <option value="&#8364;" data-curr="EUR"> European Euro (EUR) </option>
  </select>
</div>

<div class="col-md-3">
  <label class="color-bold">Amount  - <span id="curr"></span> <span style="color:red;">*</span></label>
  <input name="forexamount" id="forexamount" class="common" type="number" placeholder="Eg. 200">
</div>
<div id="stringcurr"></div>

Upvotes: 1

Related Questions