0
253
VisualizaçõesHow do I enable/disable a button based on a specific input value?
I have simple app that has one input (URL) and one button.
The button has some JavaScript that takes the URL and replaces the domain with a new domain.
Basically, a user enters "www.old.company.com/products" and the app returns "www.new.company.com/products".
The program works, but now I'm trying to make it so the button is disabled until the input has a specific domain. I tried adding a disabled attribute to the button, but I can't figure out how to get remove the attribute based on the input value.
For example:
- www.old.company.com/products > button enabled
- www.old.company.com/about-us > button enabled
- www.companyX.com/products > button disabled
- www.google.com > button disabled
- blank > button disabled
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+)\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$" />
<button onclick="replace()" class="button">Create</button>
<p id="output"> </p>
</div>3 Respostas
Responde à pergunta0
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
}
If you use this pattern in onChange event it would always be updated based on the value
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
}
}
This is how I validate form fields if its not too complicated, you could also use regex match with this pattern.
0
Maybe you can use the "onchange" attribute on the input.
It will give you the value of the input everytime that the element is updated
https://www.w3schools.com/jsref/event_onchange.asp
HTML
<input onchange="handleChange(this" />
JS => You'll get a string
const button = document.getElementById('myButton')
function handleChange(event){
let inputValue = event.value;
console.log(inputValue)
}
Now you must compare the inputValue
If the inputValue is not equal to your domain => button.setAttribute('disabled','') // Means that we add the disabled attribute to the button
And in the case if your domain is OK then => button.removeAttribute('disabled')
In your code :
