2

O código que tenho para validar o botão não funciona:

$(document).ready(function(){  
  $("#sendCat").prop('disabled', true);
  if ($('#cat').val()!= "") {
    $("#sendCat").prop('disabled', false);  
  }
 
});
<form action="proc_cat.php" method="post">
        <div class="input-field col s5">
            <input id="cat" name="name_cat" type="text">
            <label>Categoria:</label>
        </div>
        <div class="input-field col s5">
            <input name="sub_cat" type="text">
            <label>SubCategoria</label>
        </div>
        <div class="input-field col s2">
            <button id="sendCat" class="btn">Adicionar</button>
        </div>
    </form>

3
  • 1
    Tens de ter um oscultador de eventos para ir verificando se houve mudanças, é isso que procuras? $('#cat').on('change', function(){...
    – Sergio
    Commented 20/03/2017 às 19:17
  • @Sergio, funcionou, porem tem dois problemas com este metodo, quando deleto dados do campo input e fica vazio, o botão não desabilita novamente e só é habilitado quando saio do input, seria interessante que habilitasse o botão digitar a primei letra no input. Commented 20/03/2017 às 19:34
  • Respondi isso na minha resposta em baixo, usando o evento input, dá uma olhada.
    – Sergio
    Commented 20/03/2017 às 19:35

2 Respostas 2

3

Coloca o atributo disabled diretamente no HTML para evitar esperar pelo JavaScript.

Depois junta um osculator de eventos para saberes quando ocorre uma mudança no #cat. Poderia ser assim:

$(document).ready(function(){  
  $('#cat').on('input', function(){
    $('#sendCat').prop('disabled', !this.value);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="proc_cat.php" method="post">
        <div class="input-field col s5">
            <input id="cat" name="name_cat" type="text">
            <label>Categoria:</label>
        </div>
        <div class="input-field col s5">
            <input name="sub_cat" type="text">
            <label>SubCategoria</label>
        </div>
        <div class="input-field col s2">
            <button id="sendCat" disabled class="btn">Adicionar</button>
        </div>
    </form>

2

Para habilitar o botão o correto é colocar algum evento em #cat, como change por exemplo:

$(document).ready(function() {
  $("#sendCat").prop('disabled', true);
});

$("#cat").change(function(a) {
  let botao = $("#sendCat");
  $(this).val() ? botao.prop('disabled', false) : botao.prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="proc_cat.php" method="post">
  <div class="input-field col s5">
    <input id="cat" name="name_cat" type="text">
    <label>Categoria:</label>
  </div>
  <div class="input-field col s5">
    <input name="sub_cat" type="text">
    <label>SubCategoria</label>
  </div>
  <div class="input-field col s2">
    <button id="sendCat" class="btn">Adicionar</button>
  </div>
</form>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .