How to make complete form in which background color of button changes when user starts typing in inp-CodePudding

const btn = document.getElementById("btn");
const inputfield = document.getElementById("username");

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

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

Now the issue is that it only works for one input and the associated button field it does not work for another pair of input field and button , so what changes should i make in the above javascript code in which it runs for as many as input field and button i want?

Please can anyone help me in this. Thank you

If you have full jquery code it's also accepted.

CodePudding user response：

My approach was to put the input and button in a div with a custom class. And just loop over every div, get the child inputs and buttons and just use your existing code for every div.

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

for (let i = 0; i < btns.length; i  ) {
  let input = btns[i].querySelector('input');
  let button = btns[i].querySelector('button');

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

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

CodePudding user response：

Just wrap it into a additional div element and iterate trough. For each "input-group" you can add an event listener to the input child and edit the style 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 >
  <div >
    <input id="username" placeholder="Username"  />
    <button disabled id="btn" type="button" >Submit</button>
  </div>
  <div >
    <input id="username" placeholder="Username"  />
    <button disabled id="btn" type="button" >Submit</button>
  </div>
  <div >
    <input id="username" placeholder="Username"  />
    <button disabled id="btn" type="button" >Submit</button>
  </div>
</div>

CodePudding user response：

You can make a loop with a class to add an event listener to every input you want. You can use data-whateverYouWant to link the button to the input Also, should make your style in css.

let inputs = document.getElementsByClassName("an-input");
for (var 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  placeholder="Username"  />
<button disabled data-placeholder="Username" type="button" >Submit</button>

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