Hiding a button until 2 inputs are filled

1

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

2 answers

1

You can apply a keyup in the input and go check the value of them 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, it checks if the fields are empty and if they are you show some messages, such 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 did not test the second method but it should work. Note: If this is a function that will be repeated over each line you add, you must reset the values applied to the button in your function.

    
18.12.2016 / 15:21
0

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><divid="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 bit. The idea in JavaScript / jQuery is to run a function each time the input changes and generate a boolean to see if it is all filled:

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

then show or hide button as preenchidos com

$(this).toggle(preenchidos);

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

( 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'));
    
18.12.2016 / 15:31