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/

Can you show me the code where its is NOT working ? Are you sure you are using my code i provided in the answer ? — Always Helping, Sep 19 '20 at 10:58
@AlwaysHelping I can get the exchangeID already, but the problem is, it is not changing the placeholder "₺" nor prefix in the input box.. — Zeynep, Sep 19 '20 at 11:02
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/221736/discussion-between-always-helping-and-zeynep). — Always Helping, Sep 19 '20 at 11:02

score 1 · Accepted Answer · answered Sep 19 '20 at 10:21

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>

How to change data-inputmask prefix using dropdown

1 Answers1