Hide a button until 2 input is filled

Question

I intend to hide each of the 3 buttons until the 2 inputs that are on top of each button are filled , I had already tried and it works , but if I try to add more than once it is always visible even with nothing in the 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>

Answer 1

You can apply a keyup to the input and go checking their value for example:

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

Or you can keep the button visible and the moment the user presses you check if the fields are empty and if they are you show some message, as:

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

Or

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

I haven’t tested the second method, but it should work. Note: If this is a function that will keep repeating itself to each line you add, you should reset the values applied to the button in its function.

Answer 2

You can do it like this:

(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>

I organized the HTML a little bit. The idea in Javascript / jQuery is to run a function each time the input changes and generate a boleano to know if everything is filled:

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

then show or hide the button according to the value of preenchidos with

$(this).toggle(preenchidos);

If you want to keep the same HTML you can do so:

(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'));