0

Olá, sou iniciante em PHP e Ajax e estou criando um formulário para recuperação de senha que valida o e-mail, data de nascimento e cpf do usuário e envia a senha para o e-mail cadastrado.

Nó código abaixo fiz a requisição via Ajax e funcionou corretamente, porém preciso mudar a classe da div de ID #errolog de acordo com a resposta do Ajax que pode ser:

print "Verifique o e-mail, CPF e data de nascimento informados!";   

ou

print ("Em breve você receberá a sua senha pelo e-mail $email <br><a href='login.php'>Login</a>");

Ajax:

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('#verifica-senha').submit(function(){
    var dados = jQuery(this ).serialize();

    jQuery.ajax({
      type: "POST",
      url: "valida-recuperar.php",
      data: dados,
      success: function( data )
      {
        //alert( data );
        $('#errolog').css('display', 'block')
                     .html('<p>' + data + '</p>');  
      }
    });

    return false;
  });
});

valida-recuperar.php:

<?php 

include("conexao.php");


$email = $_POST['email'];
$cpf = $_POST['cpf'];
$nascimento = $_POST['nascimento']; 

$destinatario=$email;

$validadados = mysqli_query($con, "SELECT * FROM tb_cliente WHERE email = '{$email}' AND cpf = '{$cpf}' AND nascimento = '{$nascimento}'");

$rpes = mysqli_fetch_assoc($validadados);
$senha = $rpes['senha'];


$mensagem = "Olá, recebemos uma requisição de recuperação de senha. Sua senha é $senha !";

if(mysqli_num_rows($validadados)<=0) {
    print "Verifique o e-mail, CPF e data de nascimento informados!";   
    }
else {
    mail("$destinatario", "Recuperação de senha", "$mensagem","From: email");
    print ("Em breve você receberá a sua senha pelo e-mail $email <br><a href='login.php'>Login</a>");
}

?>

2
  • qual classe você quer mudar? Commented 28/03/2018 às 17:26
  • Utilizo as classes de alerta do bootstrap. Preciso que em caso de sucesso exiba class="alert alert-success" e em caso de erro exiba class="alert alert-danger". Commented 28/03/2018 às 17:41

1 Resposta 1

0

Recupere o elemento através o ID e adicione a nova classe:

jQuery('#errolog').addClass('nova-class');

Como você pode ter mais de uma class em elementos HTML, adicionando uma nova class não irá remover a antiga. Se você quer alterar uma pré-existente, é importante remover a class.

jQuery('#errolog').removeClass('class-antiga').addClass('nova-class');

Faça todo esse procedimento dentro do método success e/ou error do ajax, conforme a sua necessidade.

Como você quer retornar de forma condicional, é importante validar (no javascript) o retorno antes de mudar a class. Dessa forma, sugiro utilizar o retorno como json, pois, você pode retornar uma flag contendo o status e a mensagem de sucesso/erro.

echo json_encode(['success' => true , 'message' => 'Mensagem de sucesso']);

Na chamada do método ajax, adicione o atributo dataType='json':

jQuery.ajax({
  /** demais atributos omitidos **/
    dataType='json'
    success: function( data )
    {
        var $errorLog = jQuery('#errolog');

        if (data.success)
        {
            $errorLog.addClass('success-class');
        }
        else
        {         
            $errorLog.addClass('error-class');
        }

        $errorLog.html(data.message)

    }
});

Mas isso dependerá da lógica que você quiser aplicar.

4
  • Obrigado, Gabriel. Mais uma pergunta, na página valida-recuperar.php como eu defino o que é sucesso ou erro? Commented 28/03/2018 às 18:02
  • Você já possui os prints com a mensagem de erro e sucesso. Basta substituir aqueles prints pelo respectivo json. Quando for sucesso status deve ser true. Quando for erro status deve ser false. Commented 28/03/2018 às 18:08
  • Deu certo, Gabriel. Muito obrigado! Commented 28/03/2018 às 18:15
  • @RodrigoBianchini Excelente. Marque a resposta como solução da pergunta. Commented 28/03/2018 às 18:27

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 .