I have a currency input in my form.
First you select a currency (select) and then you input the value (input type number)
The input should allow only 2 decimal places in <input type="number"> if the currency is not JPY. If the selected currency is JPY (currency by default) then no decimals are allowed.
What I've tried:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="col-sm">
<div class="row">
<div class="input-group mb-3">
<div class="input-group-prepend">
<select class="form-control" aria-label="Currency">
<option value="JPY" selected>JPY</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
<input class="form-control" aria-label="Estimated Value" type="number" placeholder="0.00" required name="price" min="0" step="0.01" title="Estimated Value" pattern="^\d+(?:\.\d{1,2})?$">
</div>
</div>
</div>It works great if the currency is not JPY.
How can I do so that, if the selected currency is JPY, instead of showing that input, this other one is shown:
<input required type="number" class="form-control" name="price" pattern="[0-9]" title="Estimated Value">
You can put a listener on the select by doing (this way you don't have to have 2 inputs)
const selectElement = document.querySelector('.add a class to select or something else');
selectElement.addEventListener('change', (event) => {
const inputToChange = document.querySelector('input' or add a class to it);
if (event.target.value === 'JPY') {
inputToChange.setAttribute('pattern', '[0-9]')
// change other attributes as well
} else {
inputToChange.setAttribute('pattern', '^\d+(?:\.\d{1,2})?$')
}
});
for more information check this out.
Add a class to the parent of the select. Conditional to check the set value of the select. Change the placeholder attribute using the el.parentNode.nextElementSibling.placeholder el.parentNode.nextElementSibling.pattern
Set your callback in an event for change and call it initially.
const opts = document.querySelector('.parent select');
function setCurr(){
if (opts.value === 'JPY') {
opts.parentNode.nextElementSibling.placeholder = ""
opts.parentNode.nextElementSibling.pattern = "[0-9]"
}else{
opts.parentNode.nextElementSibling.placeholder = "0.00"
opts.parentNode.nextElementSibling.pattern = "^\d+(?:\.\d{1,2})?$"
}
}
opts.addEventListener('change', setCurr)
setCurr()<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="col-sm">
<div class="row">
<div class="input-group mb-3">
<div class="input-group-prepend parent">
<select class="form-control" aria-label="Currency">
<option value="JPY" selected>JPY</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
<input class="form-control" aria-label="Estimated Value" type="number" placeholder="0.00" required name="price" min="0" step="0.01" title="Estimated Value" pattern="^\d+(?:\.\d{1,2})?$">
</div>
</div>
</div>try setting the pattern property of the input element when a currency is selected
if the currency is JPY set the pattern to block decimals, if not set the pattern to nothing