Tengo una entrada de moneda en mi formulario.
Primero selecciona una moneda (seleccionar) y luego ingresa el valor (ingrese el número de tipo)
La entrada debe permitir solo 2 decimales en <input type="number"> si la moneda no es JPY . Si la moneda seleccionada es JPY (moneda predeterminada), no se permiten decimales.
Lo que he probado:
<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>Funciona muy bien si la moneda no es JPY.
Como puedo hacer para que, si la moneda seleccionada es JPY, en lugar de mostrar esa entrada, se muestre esta otra:
<input required type="number" class="form-control" name="price" pattern="[0-9]" title="Estimated Value">
Puede poner un oyente en la selección haciendo (de esta manera no tiene que tener 2 entradas)
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})?$') } });para más información echa un vistazo a esto .
Agregue una clase al padre de la selección. Condicional para verificar el valor establecido de la selección. Cambie el atributo de marcador de posición usando el.parentNode.nextElementSibling.placeholder el.parentNode.nextElementSibling.pattern
Configure su devolución de llamada en un evento para el cambio y llámelo inicialmente.
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>intente establecer la propiedad de patrón del elemento de entrada cuando se selecciona una moneda
si la moneda es JPY, establezca el patrón para bloquear decimales, si no, establezca el patrón en nada