Ao enviar form, jquery fazer pesquisa e exibir resultado na aba seguinte

Andreia Regina · Abril 25, 2017

Bom dia,

estou fazendo um cadastro de usuário em abas usando php, mysql e jquery.

Na primeira aba para os dados pessoais e gravo no banco mysql;

Na segunda para os dados dos dependentes e gravo no banco mysql;

Na terceira para os dados de beneficiários e gravo no banco mysql.

Como normalmente repetem os dados contidos em Dependentes e Beneficiários, preciso que, ao gravar o form2, ou seja, a segunda aba, e ao seguir para a terceira aba já apareçam os nomes cadastrados como dependentes para que o usuário precise apenar marcar/desmarcar conforme o caso, assim ele não precisa cadastrar novamente os mesmos dados.

;

// Função para carregar os dados de DEPENDENTES nos beneficiários
$(document).ready(function() {
    $('#form2').submit(function(){
    $('#peculiotb').empty(); //Limpando a tabela
    var busca = $('#socio_proposta').val();
    if(busca != "" && busca.length >= 1){
            $.ajax({
                type:'post',
                dataType: "json",   
                url: "consulta_dependentes.php",
                data:{ 'term': busca, }, 
                success: function( dados ) {
                  response(dados);
                  console.log(dados);
                  if(data.length === 0) {
                   for(var i=0;dados.length>i;i++){
                    $('#beneficiariotb').append('<tr>'+'<td>'+i+'</td>'+'<td><label class="campo" for="beneficiario1"><input type="text" name="beneficiario[]" id="beneficiario1" maxlength="100" tabindex="67" title="Nome" value="'+dados[i].dependente+'"/></label></td>'+'<td><label class="data" for="parentescobn1"><input type="text" name="parentescobn[]" id="parentescobn1" tabindex="68" title="Grau de Parentesco" value="'+dados[i].parentesco+'"</td>'+'<td><label class="data" for="estadocivilbn1"><input type="text" name="estadocivilbn[]" id="estadocivilbn1" tabindex="69" title="Estado Civil" value="'+dados[i].descricao_civil+'"</td>'+'<td><label class="numero" for="nascimentobn1"><input type="text" name="nascimentobn[]" id="nascimentobn1" tabindex="70" title="Estado Civil" value="'+dados[i].nascimento+'"</td>'+'</tr>');
                   }/*for(var i=0;data.length>i;i++)*/
                  }/*if(data.length === 0)*/
                }/*success*/
                });/*$.ajax*/
        }/*if(busca != "" && busca.length >= 1)*/
  })/*$('#form2').submit(function(){*/
});

O form está assim:

        <form class="form-horizontal" id="form2" action="" method="POST">
        <fieldset class="formulario">
        <input type="hidden" name="socio_proposta" id="socio_proposta" value="<?php echo $_SESSION['ultimo_id_usuario'];?>"/>
<div class="form-group">
<div class="checkbox-nice">          
  <input class="form-check-input" type="checkbox" name="sem_dependentes" id="recursos-3" value="S" title="Não possuo dependentes a declarar." <?php if(isset($_SESSION['sem_dependentes'])){ echo "checked='checked'"; }?>>
    <label for="recursos-3"> N&atilde;o possuo dependentes a declarar. </label>
</div>
</div>    
       <table>
        <thead>
         <tr>
          <th colspan="5">DECLARA&Ccedil;&Atilde;O DE FAM&Iacute;LIA (Dependentes)</th>
         </tr>
         <tr>
          <th colspan="2">NOME DOS DEPENDENTES</th>
          <th>PARENTESCO</th>
          <th>ESTADO CIVIL</th>
          <th>NASCIMENTO</th>
         </tr>
        </thead>
        <tbody>
         <tr>
          <td>1</td>
          <td>
            <label class="campo" for="nomeparente1">
            <input type="text" name="nomeparente[]" id="nomeparente1" maxlength="100" tabindex="23" title="Nome" /></label>
          </td>
          <td>
            <label class="data" for="parentesco1">
            <select name="parentesco[]" id="parentesco1" tabindex="24" title="Grau de Parentesco">
            <option value="" selected="selected">Selecione</option>         
<?php         $grau_parentesco = listarParentesco($db);
              foreach($grau_parentesco as $grau){
            print "<option title=\"Parentesco\" value=\"".$grau["codigo"]."\">".$grau["descricao"]."</option>";
          }?></select>
            </label>
          </td>
          <td>
            <label class="data" for="estadocivil1">
            <select name="estadocivil[]" id="estadocivil1" tabindex="25" title="Estado Civil">
            <option value="" selected="selected">Selecione</option>         
<?php         $estados_civil = listarEstadosCivil($db);
              foreach($estados_civil as $item){
              print "<option title=\"Estado Civil\" value=\"".$item["sigla"]."\">".$item["descricao"]."</option>";
            }?></select>
            </label>
          </td>
          <td>
            <label class="numero" for="nascimento1">
            <input type="data" name="nascimento[]" id="nascimento1" maxlength="10" tabindex="26" title="Nascimento" /> </label></td>
         </tr>
         <tr>
          <td>2</td>
         <td>
            <label class="campo" for="nomeparente2">
            <input type="text" name="nomeparente[]" id="nomeparente2" maxlength="100" tabindex="27" title="Nome" /></label>
          </td>
          <td>
            <label class="data" for="parentesco2">
            <select name="parentesco[]" id="parentesco2" tabindex="28" title="Grau de Parentesco">
            <option value="" selected="selected">Selecione</option>         
<?php         $grau_parentesco = listarParentesco($db);
              foreach($grau_parentesco as $grau){
            print "<option title=\"Parentesco\" value=\"".$grau["codigo"]."\">".$grau["descricao"]."</option>";
          }?></select>
            </label>
          </td>
          <td>
            <label class="data" for="estadocivil2">
            <select name="estadocivil[]" id="estadocivil2" tabindex="29" title="Estado Civil">
            <option value="" selected="selected">Selecione</option>         
<?php         $estados_civil = listarEstadosCivil($db);
              foreach($estados_civil as $item){
              print "<option title=\"Estado Civil\" value=\"".$item["sigla"]."\">".$item["descricao"]."</option>";
            }?></select>
            </label>
          </td>
          <td>
            <label class="numero" for="nascimento2">
            <input type="data" name="nascimento[]" id="nascimento2" maxlength="10" tabindex="30" title="Nascimento" /> </label></td>
         </tr>
        </tbody>
       </table>
       </fieldset>
       <div class="form-group">
         <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" id="bt_depend" class="btn btn-success">Cadastrar</button>
         </div>
       </div>
     </form>

Essa é a terceira aba onde preciso exibir os dados.

		<form class="form-horizontal" id="form3" action="" method="POST">
        <input type="hidden" name="form_id" id="form_id" value="form3"/>
        <input type="hidden" name="socio_proposta" id="socio_proposta" value="<?php echo $_SESSION['ultimo_id_usuario'];?>" />
<div class="form-group">
<div class="checkbox-nice">          
		<input class="form-check-input" type="checkbox" name="sem_beneficiario" id="recursos-4" value="N" title="Não possuo beneficiários a declarar." <?php if(isset($_SESSION['sem_beneficiario'])){ echo "checked='checked'"; }?>>
    <label for="recursos-4"> N&atilde;o possuo benefici&aacute;rios a declarar. </label>
</div>
</div>	  
      <table>
        <thead>
         <tr>
          <th colspan="5">DECLARA&Ccedil;&Atilde;O DE BENEFICI&Aacute;RIOS DO PEC&Uacute;LIO</th>
         </tr>
         <tr>
          <th colspan="2">NOME DOS BENEFICI&Aacute;RIOS</th>
          <th>PARENTESCO</th>
          <th>ESTADO CIVIL</th>
          <th>NASCIMENTO</th>
         </tr>
        </thead>
        <tbody id="peculiotb">
        </tbody>
       </table>
       <div class="form-group">
         <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-success">Cadastrar</button>
         </div>
       </div>
     </form>

E o arquivo de busca que funciona corretamente se eu definir um valor existente para a busca

<?php
  $busca = $_POST['term'];
  $busca = mysql_real_escape_string(RemoveAcentos($busca));
//  $busca="5"; //echo $busca."<br />";

  if(!empty($busca)){
    $sql="SELECT tb_proposta_dependentes.dependente,tb_proposta_dependentes.nascimento, tb_proposta_dependentes.codigo_parentesco, tb_proposta_dependentes.estadocivil, tb_parentesco.codigo, tb_parentesco.descricao as parentesco,
tb_estados_civil.sigla, tb_estados_civil.descricao as descricao_civil FROM tb_proposta_dependentes 
INNER JOIN tb_parentesco ON(tb_proposta_dependentes.codigo_parentesco=tb_parentesco.codigo) 
INNER JOIN tb_estados_civil ON(tb_proposta_dependentes.estadocivil=tb_estados_civil.sigla) 
WHERE tb_proposta_dependentes.socio_proposta='$busca' ORDER BY tb_proposta_dependentes.dependente_id ASC";
	$sql=mysql_query($sql)  or die (mysql_error());
	while ($reg = mysql_fetch_array($sql)) {
	  $data_nova =strtotime($reg["nascimento"]);
	  $data_nova =date("d/m/Y", $data_nova);
	  $data[] =array(
		'dependente' 		=>$reg['dependente'], 
		'nascimento'       	=>$data_nova,
		'codigo_parentesco' =>$reg["codigo_parentesco"], 
		'estadocivil'     	=>$reg["estadocivil"], 
		'parentesco'    	=>$reg["parentesco"], 
		'sigla'       		=>$reg["sigla"],
		'descricao_civil'   =>$reg["descricao_civil"]
	  );
	}
	echo json_encode($data);
  }?>

Com exceção dessa consulta os outros códigos fazem parte do mesmo arquivo.

Já coloquei um alert para verificar se estava entrando na função e está, mas não exibe o resultado.

Onde estou errando?

Obrigado

Douglas Julião · Abril 25, 2017

No seu success tem um if verificando data.length, mas sua resposta se chama dados, talvez seja isso:

success: function( dados ) {
  response(dados);
  console.log(dados);
  if(data.length === 0) { //AQUI

Andreia Regina · Abril 26, 2017

Agradeço a tentativa @Douglas Julião, mas não é isso.

Alterei o script e continuou sem exibir os dados:

// Função para carregar os dados de DEPENDENTES nos beneficiários
$(document).ready(function() {
    $('#form2').submit(function(){
    $('#peculiotb').empty(); //Limpando a tabela
    var busca = $('#socio_proposta').val();
    if(busca != "" && busca.length >= 1){
            $.ajax({
                type:'post',
                dataType: "json",   
                url: "consulta_dependentes.php",
                data:{ 'term': busca, }, 
                success: function( dados ) {
                  response(dados);
                  console.log(dados);
                  for(var i=0;dados.length>i;i++){
                    $('#peculiotb').append('<tr>'+'<td>'+i+'</td>'+'<td><label class="campo" for="beneficiario1"><input type="text" name="beneficiario[]" id="beneficiario1" maxlength="100" tabindex="67" title="Nome" value="'+dados[i].dependente+'"/></label></td>'+'<td><label class="data" for="parentescobn1"><input type="text" name="parentescobn[]" id="parentescobn1" tabindex="68" title="Grau de Parentesco" value="'+dados[i].parentesco+'"</td>'+'<td><label class="data" for="estadocivilbn1"><input type="text" name="estadocivilbn[]" id="estadocivilbn1" tabindex="69" title="Estado Civil" value="'+dados[i].descricao_civil+'"</td>'+'<td><label class="numero" for="nascimentobn1"><input type="text" name="nascimentobn[]" id="nascimentobn1" tabindex="70" title="Estado Civil" value="'+dados[i].nascimento+'"</td>'+'</tr>');
                   }/*for(var i=0;data.length>i;i++)*/
                }/*success*/
                });/*$.ajax*/
        }/*if(busca != "" && busca.length >= 1)*/
  })/*$('#form2').submit(function(){*/
});

E nada de erro nem de dados.

Douglas Julião · Abril 28, 2017

Oi desculpe minha ausência, tem uma coisa que vi aqui que talvez possa estar errado também:

Tente evitar usar IDs repetidos no seu html tem esse aqui :

id="socio_proposta"

que está se repetindo nas suas 2 tabs.

O segundo id de mesmo nome deve estar subistituindo o primeiro, e por isso o seu ajax não vai funcionar.

Porque esse if está verificando o id da aba que é pra ser preenchida:

var busca = $('#socio_proposta').val();
if(busca != "" && busca.length >= 1)

tente usar ids diferentes para esses dois input hidden.

Boa sorte!

Entrar

Arquivado

Ao enviar form, jquery fazer pesquisa e exibir resultado na aba seguinte

Recommended Posts

Andreia Regina 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Douglas Julião 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

Andreia Regina 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Douglas Julião 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Arredondar Valor para cima

PHP - Atualizar INPUT com função moeda

PHP - Atualizar INPUT com função moeda

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante