Bootstrap Snippet How to change data-inputmask prefix using dropdown using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<!-- 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>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
input.monerate {
  text-align: left !important;
  width: 300px;
}
select {
  width: 300px !important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//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: '₺ '
    });
  }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"How to change data-inputmask prefix using dropdown"
Bootstrap 4.1.1 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"How to change data-inputmask prefix using dropdown" Bootstrap 4.1.1 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"How to change data-inputmask prefix using dropdown"
Bootstrap 4.1.1 Snippet by muhittinbudak