'How 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:

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">&nbsp;</p>
</div>

https://jsfiddle.net/ianjmonk/637quxLn/9/

javascripthtmlbuttoninput


Solution 1:[1]

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.

Solution 2:[2]

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 :

enter image description here

Solution 3:[3]

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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dario K
Solution 2
Solution 3

Related Questions