Appear only field typed pdf

Asked

Viewed 49 times

-1

Good guys, I have a register with several inputs, where I have a select of dependents and it is possible to write up to 8 dependents. After completing the registration a pdf is generated and in this PDF, it even shows me what was typed, if the person selects one or more dependents and write, but the rest of the inputs appear in the PDF, but empty.

The question is, how can I make a condition to appear only the fields typed in the PDF?

HTML SELECT AND 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>
javascript html mpdf

1 answer

1


I realized that this PDF template is only html, I therefore imagine that html will be created by javascript, and then one chooses the PDF printer on their system. In Javascript for you to hide fields the element needs to be identified or found, I suggest identify with ID.

Add a DIV block, or SPAN, for example:

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

And in 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
    }
});

TIP: There is how to use Google Forms (which fills a spreadsheet) and using the Script Editor you can generate PDF, DOC... and send by email or saved in Google Drive for download. (I made a certificate generator using this and I can put it on github to illuminate you).

  • Tip 2: You could put a class in the input div &#xA;<div id="inputOculto" class="form-row campos">&#xA;&#xA;$(document).ready(function() {&#xA; $('.campos).hide(); //oculta todos os elementos com a classe campos&#xA;});&#xA;

  • The Javascript I put in my index? sorry for the delay

  • or place where it generates the pdf?

  • javascript is for the page where you have the Forms. What’s your idea to view the data in the template? via Javascript or PHP

Browser other questions tagged javascript html mpdf

You are not signed in. Login or sign up in order to post.