How to enable a button after input is populated

Asked

Viewed 3,104 times

1

I need to make a "next" button disabled while the user does not type inside the input

php javascript

2 answers

1

You can use the jquery to do this:

$(document).ready(function(){
  $('#campo').on('input', function(){
    $('#manda').prop('disabled', $(this).val().length < 3);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>Campo:</label>
    <input id="campo" type="text">
  <button id="manda" disabled>Mandar</button>

Now it will do a check, after 3 characters, it changes the property to other than the value it has, in case it removes the disabled of button and you can go on.

  • You have the possibility to enable this button only when you reach a character number?

  • Ready friend, I edited to show that now it will only enable the field, when the user type more than 3 characters.

  • Yes, but the least laborious is to use jquery. I don’t know, a matter of practicality and custom, my opinion. Perhaps changing the need for "can" improves my placement.

  • You can replace the prop condition with $('#manda').prop('disabled', $(this).val().length > 3); which will work the same, but the code gets a little cleaner.

0

You can create an event that listens when something is typed in the field and enable/disable the button:

document.body.querySelector("#texto").addEventListener("input", function(){
   
   var botao_proximo = document.body.querySelector("#proximo");
   
   // habilita o botão com 3 ou mais caracteres digitados
   botao_proximo.disabled = this.value.length >= 3 ? false : true;
   
});
<input type="text" id="texto">
<br>
<button id="proximo" type="button" disabled>Próximo</button>

If you want the action to occur after taking the focus off the field, change the "input" for "blur".

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.