Добавить текст и добавить класс с FadeIn - PullRequest
Новая
       5

Добавить текст и добавить класс с FadeIn

0 голосов
/ 03 апреля 2019

У меня есть форма с AJAX.Я хочу сделать это fade in, когда submit удастся или не получится.Если успех script добавьте class has-success к div и измените содержимое с помощью append.Я хочу сделать это fade in при изменении содержимого и класса.Я попытался с fadeIn(500) после append, но не сработало.Вы можете увидеть живой пример здесь . 

<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 Ответ

0 голосов
/ 03 апреля 2019

Эй, сначала проверьте это решение, вам нужно отправить ответ обратно с вашего сервера. 

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 код я добавляю сообщение после формы 

$(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.");
            }
        }
    });
});
});

Надеюсь, это решит вашу проблему. дайте мне знать, работал у вас или нет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...