Question

I have a form with AJAX. I want to make it fade in when the submit make success or failed. If is success The script add the class has-success to the div and change the content with append. I want to make it fade in when change the content and class. I tried with fadeIn(500) after the append but didn't work. You can see a live example here ^[1].

<div class="container">
<form class="ajaxForm" action="https://formcarry.com/s/YN2IlAj4rfL" method="POST" accept-charset="UTF-8" >
<div class="form-group">
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" name="Correo" placeholder="Correo electrónico"><!-- use this to reply visitors and prevent spam via akismet -->
</div>
<div class="form-group"><input type="text" class="form-control" id="nombre" name="Nombre" placeholder="Nombre"></div>
<div class="form-group"><textarea rows="4" class="form-control" id="textarea" name="Mensaje" placeholder="Cuéntanos"></textarea></div>
<input type="hidden" name="_gotcha"><!-- use this to prevent spam -->
<div class="form-group"><input type="submit" class="btn-contacto float-right"><div class="spinner-border" role="status">
  <span class="sr-only">Cargando...</span>
</div></div></div></form></div>

JQuery:

$(function(){
    $(".ajaxForm").submit(function(e){
        $('.spinner-border').css("display", "block");
        e.preventDefault();
        var href = $(this).attr("action");
        $.ajax({
            type: "POST",
            dataType: "json",
            url: href,
            data: $(this).serialize(),
            success: function(response){
                if(response.status == "success"){
        $(".ajaxForm").html(response).addClass("has-success");
        $(".ajaxForm").append( "<p>¡Gracias! Contactaremos contigo lo antes posible.</p>" ).fadeIn(500);

                }else{
                    alert("An error occured.");
                }
            }
        });
    });
});

[1] http://residenciarucab.es/rucab/contacto.html

Answer 1

Hey check this solution first you need to send response back from your server.

if (isset($_POST['Correo'])) {
// your server side logic or send success or failed response
echo json_encode(['status' => 'success']);die;
}


 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
 <body>
<div class="container">
<form class="ajaxForm" action="https://formcarry.com/s/YN2IlAj4rfL" method="POST" accept-charset="UTF-8" >
 <div class="form-group">
 <input type="email" class="form-control" id="email" aria-describedby="emailHelp" name="Correo" placeholder="Correo electrónico"><!-- use this to reply visitors and prevent spam via akismet -->
  </div>
  <div class="form-group"><input type="text" class="form-control" id="nombre" name="Nombre" placeholder="Nombre"></div>
  <div class="form-group"><textarea rows="4" class="form-control" id="textarea" name="Mensaje" placeholder="Cuéntanos"></textarea></div>
  <input type="hidden" name="_gotcha"><!-- use this to prevent spam -->
  <div class="form-group"><input type="submit" class="btn-contacto float-right"><div class="spinner-border" role="status">
  <span class="sr-only">Cargando...</span>
  </div></div></div></form></div>`

Javascript code i append message after form

$(function(){
$(".ajaxForm").submit(function(e){
        $('.spinner-border').css("display", "block");
$(document).find('#msg').remove();e.preventDefault();
var href = $(this).attr("action");
$.ajax({
    type: "POST",
    dataType: "json",
    url: href,
    data: $(this).serialize(),
    success: function(response){
    $('.spinner-border').css("display", "hide");
    $(".ajaxForm").addClass("has-success");
    $(".ajaxForm").after( "<p id='msg'>¡Gracias! Contactaremos contigo lo antes posible.</p>" ).fadeIn(500);
}else{
      $('.spinner-border').css("display", "hide");  
                alert("An error occured.");
            }
        }
    });
});
});

Hope this will solve your problem. let me know worked for you or not