1

Pretendo esconder cada um dos 3 botões ate que os 2 inputs que estão em cima de cada botão estejam preenchidos , eu já tinha tentado fazer e funciona , mas se tento adicionar mais do que uma vez ele fica sempre visivel mesmo com nada nos input

    <div id="addElements">
      <input type="text" name="exame" id="examedisciplina"  placeholder="Nome da disciplina">
      <input type="date" id="dataExame" >

      <button type="button" id="add_exame" onclick="addToTableExame()" >Adicionar Exame</button>

       <input type="text" name="teste" id="testedisciplina"  placeholder="Nome da disciplinas">
        <label id='label5'>Data:</label> <input type="date" id="dataTeste" >

       <button type="button" id="add_teste" onclick="addToTableTeste()">Adicionar Teste</button>

       <input type="text" name="trabalho" id="trabalhodisciplina"  placeholder="Nome da disciplinas"><p></p>
        <label id='label6'>Data:</label> <input type="date" id="dataTrabalho" >


      <button type="button" id="add_trabalho" onclick="addToTableTrabalho()">Adicionar Trabalho</button>
    </div>

2 Respostas 2

1

Você pode aplicar um keyup no input e ir verificando o value deles por exemplo:

$(document).on('keyup', '.form input', function(){
     var val1 = $('.input1').val();
     var val2 = $('.input2').val();
     if(val1 != "" && val2 != ""){
         $('.botao').show();
     }else{
         $('.botao').hide();
     }
});

Ou você pode manter o botão visível e no momento em que o usuário o pressionar você verifica se os campos estão vazios e se estiverem você mostra alguma mensagem, como:

$('.meuButton').click(function(){
    $(".seuForm input").each(function() {
       if($(this).val() === ""){
          alert("Campos em branco");
       }else{
           //execute sua função aqui
       }
    });
});

Ou

$('.meuButton').click(function(){
    var val1 = $('.meuInput1').val();
    var val2 = $('.meuInput2').val();
    if(val1 != "" && val2 != ""){
        //execute sua função aqui
    }else{
        alert("Campos em branco");
    }
});

Não testei o segundo método mas deve funcionar. Obs: Se essa é uma função que vai ficar se repetindo a cada linha que você adicionar, você deve resetar os valores aplicados ao botão em sua função.

7
  • O que o AP precisa é mostrar/esconder se cada 2 inputs estiverem preenchidos. No teu primeiro exemplo só verificas um input.
    – Sergio
    Commented 18/12/2016 às 14:48
  • 1
    A minha ideia era mesmo esconder o botão e só aparecer quando os 2 inputs estiverem preenchidos Commented 18/12/2016 às 15:06
  • @ForçaChape alterei o exemplo 1 de forma que você possa verificaros inputs, e ainda usar o botão escondido e se mostrar caso os dois campos estejam preenchidos aqui um exemplo jsfiddle.net/A7UbK/58
    – Leo Letto
    Commented 18/12/2016 às 15:16
  • A questão é que um dos inputs é do tipo data Commented 18/12/2016 às 15:28
  • @ForçaChape é só alterar o type do input para date, se a data não for preenchida o mesmo será reconhecido como um campo vázio e o botão não será mostrado jsfiddle.net/A7UbK/59
    – Leo Letto
    Commented 18/12/2016 às 15:30
0

Podes fazer isso assim:

(function(bts) {
    bts.each(function() {
        var inputs = $(this).closest('section').find('input');
        inputs.on('change', verificarInputs.bind(this, inputs.get()));
    });
    function verificarInputs(inputs) {
        var preenchidos = inputs.filter(i => !i.value).length == 0;
        $(this).toggle(preenchidos);
    }
})($('#addElements button'));
#addElements button {
	display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addElements">
    <section>
        <input type="text" name="exame" id="examedisciplina" placeholder="Nome da disciplina">
        <input type="date" id="dataExame">
        <button type="button" id="add_exame" onclick="addToTableExame()">Adicionar Exame</button>
    </section>
    <section>
        <input type="text" name="teste" id="testedisciplina" placeholder="Nome da disciplinas">
        <label id='label5'>Data:</label>
        <input type="date" id="dataTeste">
        <button type="button" id="add_teste" onclick="addToTableTeste()">Adicionar Teste</button>
    </section>
    <section>
        <input type="text" name="trabalho" id="trabalhodisciplina" placeholder="Nome da disciplinas">
        <label id='label6'>Data:</label>
        <input type="date" id="dataTrabalho">
        <button type="button" id="add_trabalho" onclick="addToTableTrabalho()">Adicionar Trabalho</button>
    </section>
</div>

Organizei o HTML um pouco. A ideia no JavaScript / jQuery é correr uma função cada vez que o input muda e gerar um boleano para saber se está tudo preenchido:

var preenchidos = inputs.filter(i => !i.value).length == 0;

depois mostrar ou esconder o button conforme o valor de preenchidos com

$(this).toggle(preenchidos);

Se quiseres manter o mesmo HTML podes fazer assim:

(jsFiddle)

(function(bts) {
    bts.each(function() {
        var inputs = $(this).prevAll('input').slice(0, 2);
        inputs.on('change', verificarInputs.bind(this, inputs.get()));
    });

    function verificarInputs(inputs) {
        var preenchidos = inputs.filter(i => !i.value).length == 0;
        $(this).toggle(preenchidos);
    }
})($('#addElements button'));
6
  • Não é possivel fazer isso sem mudar o html ? Commented 18/12/2016 às 14:59
  • @ForçaChape sim, é possivel. Adicionei à resposta. Ficaria assim: jsfiddle.net/zavsLz1m
    – Sergio
    Commented 18/12/2016 às 15:02
  • Não sei porque mas no meu os botões não aparecem mesmo que tenha tudo escrito , e copiei examete o codigo do JSFIDDLE Commented 18/12/2016 às 15:31
  • @ForçaChape onde estás a colocar o JavasScript? Coloca no final da página...
    – Sergio
    Commented 18/12/2016 às 15:31
  • Dentro da função que ocorre quando se carrega no botão mas agora percebi que isso nao faz sentido , onde devo colocar ? Commented 18/12/2016 às 15:32

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 .