-1

Bom galera, eu tenho um cadastro com diversos inputs, onde tenho um select de dependentes e é possível escrever até 8 dependentes. Após concluir o cadastro é gerado um pdf e nesse PDF, ele até me mostra oque foi digitado, caso a pessoa selecione um ou mais dependentes e escreva, porém o restante dos inputs aparecem no PDF, porém vazios.

A pergunta é, como posso fazer uma condição para aparecer somente os campos digitados no PDF?

HTML SELECT E INPUTS:

            <h4>Dependentes</h4>
            <div class="form-row">
            <div class="form-group col-md-6">
  <label>Selecione a quantidade de dependentes</label>
  <select id="mySelect" class="form-control">
    <option value="Não selecionado" selected>Selecione...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
  </select>
 </div>
            </div>

                <div id="inputOculto" class="form-row">
  <div class="form-group col-md-4">
      <label>Nome</label>
      <input type="text" name="nome_dp1" class="form-control" placeholder="Nome Completo" >
    </div>
    <div class="form-group col-md-2">
      <label>Data de nascimento</label>
      <input type="text" id="data_6" name="dt_nasc1" class="form-control" >
    </div>
    <div class="form-group col-md-3">
      <label>CPF</label>
      <input type="text" name="dp_cpf1" class="form-control cpf" placeholder="xxx.xxx.xxx-xx" >
    </div>
    <div class="form-group col-md-3">
      <label>Grau Parentesco</label>
      <select name="grau1" id="inputState5" class="form-control">
        <option value="Não selecionado" selected>Selecione...</option>
        <option value="Filho(a)">Filho(a)</option>
        <option value="Esposa">Esposa</option>
      </select>
     </div>
  </div>

  <div id="inputOculto2" class="form-row">
  <div class="form-group col-md-4">
      <label>Nome</label>
      <input type="text" name="nome_dp2" class="form-control" placeholder="Nome Completo" >
    </div>
    <div class="form-group col-md-2">
      <label>Data de nascimento</label>
      <input type="text" id="data_7" name="dt_nasc2" class="form-control" >
    </div>
    <div class="form-group col-md-3">
      <label>CPF</label>
      <input type="text" name="d_cpf2" class="form-control cpf" placeholder="xxx.xxx.xxx-xx" >
    </div>
    <div class="form-group col-md-3">
      <label>Grau Parentesco</label>
      <select name="grau2" class="form-control">
        <option value="Não selecionado" selected>Selecione...</option>
        <option value="Filho(a)">Filho(a)</option>
        <option value="Esposa">Esposa</option>
      </select>
     </div>
  </div>

  <div id="inputOculto3" class="form-row">
  <div class="form-group col-md-4">
      <label>Nome</label>
      <input type="text" name="nome_dp3" class="form-control" placeholder="Nome Completo" >
    </div>
    <div class="form-group col-md-2">
      <label>Data de nascimento</label>
      <input type="text" id="data_8" name="dt_nasc3" class="form-control" >
    </div>
    <div class="form-group col-md-3">
      <label>CPF</label>
      <input type="text" name="dq_cpf3" class="form-control cpf" placeholder="xxx.xxx.xxx-xx" >
    </div>
    <div class="form-group col-md-3">
      <label>Grau Parentesco</label>
      <select name="grau3" class="form-control">
        <option value="Não selecionado" selected>Selecione...</option>
        <option value="Filho(a)">Filho(a)</option>
        <option value="Esposa">Esposa</option>
      </select>
     </div>
  </div>

  <div id="inputOculto4" class="form-row">
  <div class="form-group col-md-4">
      <label>Nome</label>
      <input type="text" name="nome_dp4" class="form-control" placeholder="Nome Completo" >
    </div>
    <div class="form-group col-md-2">
      <label>Data de nascimento</label>
      <input type="text" id="data_9" name="dt_nasc4" class="form-control" >
    </div>
    <div class="form-group col-md-3">
      <label>CPF</label>
      <input type="text" name="db_cpf4" class="form-control cpf" placeholder="xxx.xxx.xxx-xx" >
    </div>
    <div class="form-group col-md-3">
      <label>Grau Parentesco</label>
      <select name="grau4" class="form-control">
        <option value="Não selecionado" selected>Selecione...</option>
        <option value="Filho(a)">Filho(a)</option>
        <option value="Esposa">Esposa</option>
      </select>
     </div>
  </div>

  <div id="inputOculto5" class="form-row">
  <div class="form-group col-md-4">
      <label>Nome</label>
      <input type="text" name="nome_dp5" class="form-control" placeholder="Nome Completo" >
    </div>
    <div class="form-group col-md-2">
      <label>Data de nascimento</label>
      <input type="text" id="data_10" name="dt_nasc5" class="form-control" >
    </div>
    <div class="form-group col-md-3">
      <label>CPF</label>
      <input type="text" name="dn_cpf5" class="form-control cpf" placeholder="xxx.xxx.xxx-xx" >
    </div>
    <div class="form-group col-md-3">
      <label>Grau Parentesco</label>
      <select name="grau5" class="form-control">
        <option value="Não selecionado" selected>Selecione...</option>
        <option value="Filho(a)">Filho(a)</option>
        <option value="Esposa">Esposa</option>
      </select>
     </div>
  </div>

  <div id="inputOculto6" class="form-row">
  <div class="form-group col-md-4">
      <label>Nome</label>
      <input type="text" name="nome_dp6" class="form-control" placeholder="Nome Completo" >
    </div>
    <div class="form-group col-md-2">
      <label >Data de nascimento</label>
      <input type="text" id="data_11" name="dt_nasc6" class="form-control" >
    </div>
    <div class="form-group col-md-3">
      <label>CPF</label>
      <input type="text" name="qn_cpf6" class="form-control cpf" placeholder="xxx.xxx.xxx-xx" >
    </div>
    <div class="form-group col-md-3">
      <label for="inputState5">Grau Parentesco</label>
      <select name="grau6" class="form-control">
        <option value="Não selecionado" selected>Selecione...</option>
        <option value="Filho(a)">Filho(a)</option>
        <option value="Esposa">Esposa</option>
      </select>
     </div>
  </div>

  <div id="inputOculto7" class="form-row">
  <div class="form-group col-md-4">
      <label >Nome</label>
      <input type="text" name="nome_dp7" class="form-control" placeholder="Nome Completo" >
    </div>
    <div class="form-group col-md-2">
      <label>Data de nascimento</label>
      <input type="text" id="data_12" name="dt_nasc7" class="form-control" >
    </div>
    <div class="form-group col-md-3">
      <label>CPF</label>
      <input type="text" name="pp_cpf7" class="form-control cpf" placeholder="xxx.xxx.xxx-xx" >
    </div>
    <div class="form-group col-md-3">
      <label>Grau Parentesco</label>
      <select name="grau7" class="form-control">
        <option value="Não selecionado" selected>Selecione...</option>
        <option value="Filho(a)">Filho(a)</option>
        <option value="Esposa">Esposa</option>
      </select>
     </div>
  </div>

  <div id="inputOculto8" class="form-row">
  <div class="form-group col-md-4">
      <label>Nome</label>
      <input type="text" name="nome_dp8" class="form-control" placeholder="Nome Completo" >
    </div>
    <div class="form-group col-md-2">
      <label>Data de nascimento</label>
      <input type="text" id="data_13" name="dt_nasc8" class="form-control" >
    </div>
    <div class="form-group col-md-3">
      <label>CPF</label>
      <input type="text" name="gp_cpf8" class="form-control cpf" placeholder="xxx.xxx.xxx-xx" >
    </div>
    <div class="form-group col-md-3">
      <label>Grau Parentesco</label>
      <select name="grau8" class="form-control">
        <option value="Não selecionado" selected>Selecione...</option>
        <option value="Filho(a)">Filho(a)</option>
        <option value="Esposa">Esposa</option>
      </select>
     </div>
  </div>

Javascript:

  $(document).ready(function() {
  $('#inputOculto').hide();
  $('#inputOculto2').hide();
  $('#inputOculto3').hide();
  $('#inputOculto4').hide();
  $('#inputOculto5').hide();
  $('#inputOculto6').hide();
  $('#inputOculto7').hide();
  $('#inputOculto8').hide();

  $('#mySelect').change(function() {
    if ($('#mySelect').val() == '1') {
      $('#inputOculto').show();
    } else {
      $('#inputOculto').hide();
    }
  });

  $('#mySelect').change(function() {
    if ($('#mySelect').val() == '2') {
      $('#inputOculto').show();
      $('#inputOculto2').show();

    } else {
      $('#inputOculto2').hide();
    }
  });


  $('#mySelect').change(function() {
    if ($('#mySelect').val() == '3') {
      $('#inputOculto').show();
      $('#inputOculto2').show();
      $('#inputOculto3').show();

    } else {
      $('#inputOculto3').hide();
    }
  });

  $('#mySelect').change(function() {
    if ($('#mySelect').val() == '4') {
      $('#inputOculto').show();
      $('#inputOculto2').show();
      $('#inputOculto3').show();
      $('#inputOculto4').show();

    } else {
      $('#inputOculto4').hide();
    }
  });

  $('#mySelect').change(function() {
    if ($('#mySelect').val() == '5') {
      $('#inputOculto').show();
      $('#inputOculto2').show();
      $('#inputOculto3').show();
      $('#inputOculto4').show();
      $('#inputOculto5').show();

    } else {
      $('#inputOculto5').hide();
    }
  });

  $('#mySelect').change(function() {
    if ($('#mySelect').val() == '6') {
      $('#inputOculto').show();
      $('#inputOculto2').show();
      $('#inputOculto3').show();
      $('#inputOculto4').show();
      $('#inputOculto5').show();
      $('#inputOculto6').show();

    } else {
      $('#inputOculto6').hide();
    }
  });

  $('#mySelect').change(function() {
    if ($('#mySelect').val() == '7') {
      $('#inputOculto').show();
      $('#inputOculto2').show();
      $('#inputOculto3').show();
      $('#inputOculto4').show();
      $('#inputOculto5').show();
      $('#inputOculto6').show();
      $('#inputOculto7').show();

    } else {
      $('#inputOculto7').hide();
    }
  });

  $('#mySelect').change(function() {
    if ($('#mySelect').val() == '8') {
      $('#inputOculto').show();
      $('#inputOculto2').show();
      $('#inputOculto3').show();
      $('#inputOculto4').show();
      $('#inputOculto5').show();
      $('#inputOculto6').show();
      $('#inputOculto7').show();
      $('#inputOculto8').show();

    } else {
      $('#inputOculto8').hide();
    }
  });

});

PDF:

<div class="jumbotron">
<h4>Dependentes</h4>
<b>Nome:</b> #nome_dp1<br>
<b>Data de nascimento:</b> #dt_nasc1<br>
<b>CPF:</b> #dp_cpf1<br>
<b>Grau Parentesco:</b> #grau1<br>

<b>Nome:</b> #nome_dp2<br>
<b>Data de nascimento:</b> #dt_nasc2<br>
<b>CPF:</b> #d_cpf2<br>
<b>Grau Parentesco:</b> #grau2<br>

<b>Nome:</b> #nome_dp3<br>
<b>Data de nascimento:</b> #dt_nasc3<br>
<b>CPF:</b> #dq_cpf3<br>
<b>Grau Parentesco:</b> #grau3<br>

<b>Nome:</b> #nome_dp4<br>
<b>Data de nascimento:</b> #dt_nasc4<br>
<b>CPF:</b> #db_cpf4<br>
<b>Grau Parentesco:</b> #grau4<br>

<b>Nome:</b> #nome_dp5<br>
<b>Data de nascimento:</b> #dt_nasc5<br>
<b>CPF:</b> #dn_cpf5<br>
<b>Grau Parentesco:</b> #grau5<br>

<b>Nome:</b> #nome_dp6<br>
<b>Data de nascimento:</b> #dt_nasc6<br>
<b>CPF:</b> #qn_cpf6<br>
<b>Grau Parentesco:</b> #grau6<br>

<b>Nome:</b> #nome_dp7<br>
<b>Data de nascimento:</b> #dt_nasc7<br>
<b>CPF:</b> #pp_cpf7<br>
<b>Grau Parentesco:</b> #grau7<br>

<b>Nome:</b> #nome_dp8<br>
<b>Data de nascimento:</b> #dt_nasc8<br>
<b>CPF:</b> #gp_cpf8<br>
<b>Grau Parentesco:</b> #grau8<br>
</div>

1 Resposta 1

1

Percebi que este template do PDF é só html, eu imagino portanto que o html será criado por javascript, e então a pessoa escolhe a impressora PDF no seu sistema. Em Javascript para você ocultar campos o elemento precisa ser identificado ou encontrado, eu sugiro identificar com ID.

Adicione um bloco DIV, ou SPAN, por exemplo:

<span id="pdf_dp8">
  <b>Nome:</b> #nome_dp8<br>
  <b>Data de nascimento:</b> #dt_nasc8<br>
  <b>CPF:</b> #gp_cpf8<br>
  <b>Grau Parentesco:</b> #grau8<br>
</span>

E no Javascript:

$('input[name="nome_dp8"]').change(function() { //se houve mudanças
    if ($this.val() != '') { //se tem algo preenchido
      $('#pdf_dp8').show(); //entao mostra o bloco
    }
});

DICA: Há como usar o Google Forms (que preenche uma planilha) e usando o Editor de Scripts você pode gerar PDF, DOC... e enviar por email ou salva no Google Drive para download. (Eu fiz um gerador de certificados usando isto e posso colocar no gitHub para te iluminar).

4
  • Dica 2: Voce poderia colocar uma classe nos div dos inputs ``` <div id="inputOculto" class="form-row campos"> $(document).ready(function() { $('.campos).hide(); //oculta todos os elementos com a classe campos }); ```
    – Leo Moraes
    2/06/2019 às 15:35
  • O Javascript eu coloco no meu index? desculpe a demora
    – JeanTDZ
    4/06/2019 às 23:43
  • ou coloco onde gera o pdf?
    – JeanTDZ
    5/06/2019 às 0:43
  • o javascript é para a página onde tem os forms. Qual a sua ideia para visualizar os dados no 'template'? via Javascript ou PHP
    – Leo Moraes
    1/07/2019 às 14:03

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 .