How to enable a button after input is filled [closed]

Question

How to enable a button after input is filled [closed]

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

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

php javascript

asked by anonymous 08.05.2018 / 21:48

2 answers

Select hide / show DIVs according to the selected value (jquery) Android - Share Preferences for another device

score 1 · Answer 1

You can use 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><inputid="campo" type="text">
  <button id="manda" disabled>Mandar</button>

Now it will do a check, after 3 characters, it changes the property to different than the value it has, in case it removes the disabled from the button and you can proceed.

score 0 · Answer 2

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 you have focused the field, change the "input" by "blur" .