0
264
Views¿Cómo habilito/desactivo un botón en función de un valor de entrada específico?
Tengo una aplicación simple que tiene una entrada (URL) y un botón.
El botón tiene algo de JavaScript que toma la URL y reemplaza el dominio con un nuevo dominio.
Básicamente, un usuario ingresa "www.old.company.com/products" y la aplicación devuelve "www.new.company.com/products".
El programa funciona, pero ahora estoy tratando de hacerlo para que el botón esté deshabilitado hasta que la entrada tenga un dominio específico. Intenté agregar un atributo disabled al botón, pero no puedo averiguar cómo eliminar el atributo según el valor de entrada.
Por ejemplo:
- www.old.company.com/products > botón habilitado
- www.old.company.com/about-us > botón habilitado
- www.companyX.com/products > botón deshabilitado
- www.google.com > botón inhabilitado
- en blanco > botón deshabilitado
function replace() { var a = document.getElementById('input').value; var b = a.replace(/old.company.com/g, "new.company.com"); document.getElementById('output').innerHTML = b; } button { background-color: #003359; min-width: 150px; border: none; color: #ffffff; padding: 10px 20px; text-align: center; text-decoration: none; font-size: 14px; text-transform: uppercase; font-weight: bold; margin: 0px 20px 20px 0px; border-radius: 2px; } button:disabled { background-color: #f5f5f5; min-width: 150px; border: none; color: #9A9A9A; padding: 10px 20px; text-align: center; text-decoration: none; font-size: 14px; text-transform: uppercase; font-weight: bold; margin: 0px 20px 20px 0px; border-radius: 2px; } <div> <input id="input" style="width: 30%; margin: 20px;" type="text" placeholder="https://old.company.com/..." pattern="^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?old+([\-\.]company+)\.[az]{2,5}(:[0-9]{1,5})?(\/.*)?$" /> <button onclick="replace()" class="button">Create</button> <p id="output"> </p> </div>3 answers
Answer question0
new URL("https://www.old.company.com/products").hostname === 'www.old.company.com' function handleChange(event){ const urlInput = event.target.value.startswith('https://') ? event.target.value : `https://${event.target.value}`; if(new URL(urlInput).hostname === 'www.old.company.com') return document.querySelector('.button').disabled = false; return document.querySelector('.button').disabled = true; }0
if(value.includes('your string')) { buttonElement.disabled = true } else { buttonElement.disabled = false }Si usa este patrón en el evento onChange, siempre se actualizará según el valor
const buttonElement = document.querySelector('button') const inputElement = document.querySelector('input') inputElement.addEventListener('change', (e) => { if(e.target.value.includes('old.company.com')){ buttonElement.disabled = false } else { buttonElement.disabled = true } }Así es como valido los campos de formulario si no es demasiado complicado, también podría usar la coincidencia de expresiones regulares con este patrón.
0
Tal vez pueda usar el atributo "onchange" en la entrada .
Le dará el valor de la entrada cada vez que se actualice el elemento
https://www.w3schools.com/jsref/event_onchange.asp
HTML
<input onchange="handleChange(this" />JS => Obtendrás una cadena
const button = document.getElementById('myButton') function handleChange(event){ let inputValue = event.value; console.log(inputValue) }Ahora debes comparar el inputValue
Si el inputValue no es igual a su dominio => button.setAttribute('disabled','') // Means that we add the disabled attribute to the button
Y en el caso de que su dominio esté bien , entonces => button.removeAttribute('disabled')
En tu código:
