How to change div class according to Ajax response?

Question

How to change div class according to Ajax response?

Navigation

#1 by (0 votes)

0

Hello, I am a beginner in PHP and Ajax and am creating a form for password recovery that validates the user's email, date of birth and cpf and sends the password to the registered email.

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

or

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

valid-retrieve.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>");
}

? >

php ajax

asked by anonymous 28.03.2018 / 19:19

1 answer

Error connecting user in GIT - Visual Studio 2017 Multiple inserts with JS (works in browser but in app generated by phonegap build not)

score 0 · Accepted Answer

Retrieve the element through the ID and add the new class:

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

Since you can have more than one class in HTML elements, adding a new class will not remove the old one. If you want to change a pre-existing, it's important to remove the class.

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

Do all this procedure within the success and / or error method of ajax, according to your need.

As you want to return conditionally, it is important to validate (in javascript) the return before changing the class. That way, I suggest using the return as json , because you can return a flag containing the status and the success / error message.

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

When calling the ajax method, add the dataType='json' attribute:

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)

    }
});

But that will depend on the logic you want to apply.