What is the code to create a form that changes the background color of a button when a user begins typing in an input field using JavaScript, HTML, and CSS?

Question

What is the code to create a form that changes the background color of a button when a user begins typing in an input field using JavaScript, HTML, and CSS?

const buttonOne = document.getElementById("btn1");
const inputfieldOne = document.getElementById("username1");

inputfieldOne.addEventListener("keyup", function(e) {
  const valueOne = e.target.value;
  if (valueOne === "") {
    buttonOne.disabled = true;
    buttonOne.style.backgroundColor = "grey";
  } else {
    buttonOne.disabled = false;
    buttonOne.style.backgroundColor = "orange";
  }
})

<div class="container">
  <input id="username1" placeholder="Username" class="input" />
  <button disabled id="btn1" type="button" class="button">Submit</button>
</div>

Currently, this code only works for one specific input and button pair. How can I modify the JavaScript to apply to multiple pairs of input fields and buttons?

I would appreciate any assistance in solving this issue. Thank you.

If you have a complete jQuery solution, that is also welcome.

javascript html jquery css event-handling

Answer 1

Answer №1

In my solution, I utilized a custom class to encapsulate both the input and button elements within a div container. By iterating over each of these divs, I was able to access the child inputs and buttons and apply the necessary functionality using the provided code snippet.

const buttons = document.getElementsByClassName('inputButton');

for (let j = 0; j < buttons.length; j++) {
  let inputEle = buttons[j].querySelector('input');
  let btn = buttons[j].querySelector('button');

  inputEle.addEventListener("keyup", function(event) {
    const value = event.target.value;
    if (value === "") {
      btn.disabled = true;
      btn.style.backgroundColor = "grey";
    } else {
      btn.disabled = false;
      btn.style.backgroundColor = "orange";
    }
  });
}

<div class="wrapper">
  <div class="inputButton">
    <input id="user1" placeholder="Username" class="input" />
    <button disabled id="btn1" type="button" class="button">Submit</button>
  </div>
  <div class="inputButton">
    <input id="user2" placeholder="Username" class="input" />
    <button disabled id="btn2" type="button" class="button">Submit</button>
  </div>
  <div class="inputButton">
    <input id="user3" placeholder="Username" class="input" />
    <button disabled id="btn3" type="button" class="button">Submit</button>
  </div>
</div>

Answer 2

In my solution, I utilized a custom class to encapsulate both the input and button elements within a div container. By iterating over each of these divs, I was able to access the child inputs and buttons and apply the necessary functionality using the provided code snippet.

const buttons = document.getElementsByClassName('inputButton');

for (let j = 0; j < buttons.length; j++) {
  let inputEle = buttons[j].querySelector('input');
  let btn = buttons[j].querySelector('button');

  inputEle.addEventListener("keyup", function(event) {
    const value = event.target.value;
    if (value === "") {
      btn.disabled = true;
      btn.style.backgroundColor = "grey";
    } else {
      btn.disabled = false;
      btn.style.backgroundColor = "orange";
    }
  });
}

<div class="wrapper">
  <div class="inputButton">
    <input id="user1" placeholder="Username" class="input" />
    <button disabled id="btn1" type="button" class="button">Submit</button>
  </div>
  <div class="inputButton">
    <input id="user2" placeholder="Username" class="input" />
    <button disabled id="btn2" type="button" class="button">Submit</button>
  </div>
  <div class="inputButton">
    <input id="user3" placeholder="Username" class="input" />
    <button disabled id="btn3" type="button" class="button">Submit</button>
  </div>
</div>

Answer 3

Answer №2

To enhance the functionality, you can enclose it within an additional div element and loop through each "input-group". By adding an event listener to the input child within each group, you can easily modify the styling of the button child.

document.querySelectorAll('.input-group').forEach((group) => {
  let input = group.querySelector('input');
  let button = group.querySelector('button');
  input.addEventListener('keyup', () => {
    if(input.value !== "") {
      button.disabled = false; 
    } else {
      button.disabled = true;
    }
  });
});

#btn[disabled] {
  background: red;
}

#btn {
  background: green;
}

<div class="container">
  <div class="input-group">
    <input id="username" placeholder="Username" class="input" />
    <button disabled id="btn" type="button" class="button">Submit</button>
  </div>
  <div class="input-group">
    <input id="username" placeholder="Username" class="input" />
    <button disabled id="btn" type="button" class="button">Submit</button>
  </div>
  <div class="input-group">
    <input id="username" placeholder="Username" class="input" />
    <button disabled id="btn" type="button" class="button">Submit</button>
  </div>
</div>

Answer 4

To enhance the functionality, you can enclose it within an additional div element and loop through each "input-group". By adding an event listener to the input child within each group, you can easily modify the styling of the button child.

document.querySelectorAll('.input-group').forEach((group) => {
  let input = group.querySelector('input');
  let button = group.querySelector('button');
  input.addEventListener('keyup', () => {
    if(input.value !== "") {
      button.disabled = false; 
    } else {
      button.disabled = true;
    }
  });
});

#btn[disabled] {
  background: red;
}

#btn {
  background: green;
}

<div class="container">
  <div class="input-group">
    <input id="username" placeholder="Username" class="input" />
    <button disabled id="btn" type="button" class="button">Submit</button>
  </div>
  <div class="input-group">
    <input id="username" placeholder="Username" class="input" />
    <button disabled id="btn" type="button" class="button">Submit</button>
  </div>
  <div class="input-group">
    <input id="username" placeholder="Username" class="input" />
    <button disabled id="btn" type="button" class="button">Submit</button>
  </div>
</div>

Answer 5

Answer №3

To efficiently add an event listener to multiple input elements, you can create a loop with a class and use data attributes to connect the button to the respective input field. Additionally, ensure to define your styling in CSS for consistency.

let inputs = document.getElementsByClassName("an-input");
for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("keyup", function(e) {
    let btn  = document.querySelectorAll("[data-placeholder="+this.placeholder+"]")[0];
    if (this.value === "") {
      btn.disabled = true;
    } else {
      btn.disabled = false;
    }
 })
}

button{
  background-color:orange;
}
button:disabled,
button[disabled]{
  background-color:grey;
}

<input class="an-input" placeholder="Username" class="input" />
<button disabled data-placeholder="Username" type="button" class="button">Submit</button>

<input class="an-input" placeholder="email" class="input" />
<button disabled data-placeholder="email" type="button" class="button">Submit</button>

Answer 6

To efficiently add an event listener to multiple input elements, you can create a loop with a class and use data attributes to connect the button to the respective input field. Additionally, ensure to define your styling in CSS for consistency.

let inputs = document.getElementsByClassName("an-input");
for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("keyup", function(e) {
    let btn  = document.querySelectorAll("[data-placeholder="+this.placeholder+"]")[0];
    if (this.value === "") {
      btn.disabled = true;
    } else {
      btn.disabled = false;
    }
 })
}

button{
  background-color:orange;
}
button:disabled,
button[disabled]{
  background-color:grey;
}

<input class="an-input" placeholder="Username" class="input" />
<button disabled data-placeholder="Username" type="button" class="button">Submit</button>

<input class="an-input" placeholder="email" class="input" />
<button disabled data-placeholder="email" type="button" class="button">Submit</button>

What is the code to create a form that changes the background color of a button when a user begins typing in an input field using JavaScript, HTML, and CSS?

Answer №1

Answer №2

Answer №3

Similar questions

You cannot embed a YouTube video using its iframe code in an HTML document, according to YouTube's guidelines

Fonts appear altered on a Windows computer

Conceal a div once the content in a separate div has finished loading

How can you transform an array of objects into an array of strings?

Enhance the worth of text box

Why does this function properly on every browser except for Opera?

Tips for creating (icon + label) combinations on the initial page of a jQuery mobile application

Problems encountered with the ajax contact form embedded in a WordPress theme

Updating documents in a mongoDB collection can be done by simply

Modifying the column layout of a CSS grid using a media query

Looking to retrieve the full browser URL in Next.js using getServerSideProps? Here's how to do

Node's 'fs' module not triggering the If/Else If block

Eliminate items from one BS4 ResultSet that are also found in a different BS4 ResultSet

Tips on modifying the message "Please fill out this field" in the JQuery validation plugin

Using a ForEach iteration to loop through a table in C# and jQuery

What is the best way to determine the width of the browser in JavaScript?

What is the best way to include a new user in the memory database when there is no database or storage back-end?

Sleek and Speedy jQuery Popup Dialog

Utilizing the "return" keyword in Javascript outside of function declarations

Using an SVG image to change the cursor to a pointer in CSS