How to change data-inputmask prefix using dropdown

Question

I use Robin Herbot inputmask plugin for currency inputs. I want to change the currency symbol each time when the exchange dropdown change event triggers. But the inputmask prefix prevents to change the currency symbol. I have this code:

HTML:

 @Html.DropDownListFor(model => model.exchange, 
               new SelectList(@ViewBag.rates, "Value", "Text",4), null, new
                       {
                           @Style = "height:34px;width:370px !important;font-size: 14px;",
                           @class = "form-control input-lg"
                       }
              )
 <input type="text"
                       class="form-control text-left monerate"
                       id="price1"
                       name="price1"
                       placeholder="₺ 0.00"
                       data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '₺ ', 'placeholder': '0'" />
  

JQuery:

  $('input.monerate').inputmask();

  $(document.body).delegate('#exchange', 'change', function () {  
        exchangeID = $('#exchange :selected').val();
        if (exchangeID == 1) {
            $("#price1").inputmask({ alias: "currency", prefix: '$ ' });           
        }
        else if (exchangeID == 2) {           
            $("#price1").inputmask({ alias: "currency", prefix: '€ ' });
        }
        else if (exchangeID == 3) {            
            $("#price1").inputmask({ alias: "currency", prefix: '£ ' });
        }
        else if (exchangeID == 4) {
            $("#price1").inputmask({ alias: "currency", prefix: '₺ ' });
        }        
    });   

Are there a way to change the prefix?

I've read this answer but did not work for me:

Change the currency symbol or remove it in the inputmask currency

Fiddle: https://jsfiddle.net/6kzjLd7u/10/

Answer 1

You need to use your on-change function like this below. Also, the value of a select by default is string but you are checking the value as integer which is one reason your code did not work.

Add treat the option as integar we can use unary operator (+) - adding a plus sign before getting the value will make it integar

var exchangeID = +$(this).val(); //parse as number - by default it is string

Secondly, for Robin Herbot inputMask to load dynamically and change currency prefix from the dropdown you need to assign the initial prefix in jQuery as well. Since you have defined in statically in the HTML it will not work as intended.

Lastly, your code is all fixed and working as intended with currency prefix changing on selection.

Live Working Demo:

//by default on page load
$("#price1").inputmask({
  alias: "currency",
  prefix: '₺ '
});

//apply prefix on select option change
$(document).on('change', '#exchange', function() {
  var exchangeID = +$(this).val(); //parse as number not - by default is string
  if (exchangeID == 1) {
    $("#price1").inputmask({
      alias: "currency",
      prefix: '$ '
    });
  } else if (exchangeID == 2) {
    $("#price1").inputmask({
      alias: "currency",
      prefix: '€ '
    });
  } else if (exchangeID == 3) {
    $("#price1").inputmask({
      alias: "currency",
      prefix: '£ '
    });
  } else if (exchangeID == 4) {
    $("#price1").inputmask({
      alias: "currency",
      prefix: '₺ '
    });
  }
});

input.monerate {
  text-align: left !important;
  width: 300px;
}

select {
  width: 300px !important;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>

<div style="margin:10px;">
  <label for="exchange">Choose a currency:</label>

  <select name="exchange" id="exchange" class="form-control">
    <option selected disabled>Choose</option>
    <option value="1">USD</option>
    <option value="2">Euro</option>
    <option value="3">Pound</option>
    <option value="4">TL</option>
  </select>
</div>

<div style="margin:10px;">
  <label>Price:</label>
   <input type="text" class="form-control text-left monerate" id="price1" name="price1" placeholder="₺ 0.00" data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'placeholder': '0'" />
</div>