Show an input or another depending on the previous selection
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>