Question

我有一个AJAX的表格。当fade in成功或失败时，我想使其成为submit。如果成功，则script将class has-success添加到div并使用append更改内容。更改内容和类时，我想使其成为fade in。我在fadeIn(500)之后尝试了append，但是没有用。您可以看到一个实时示例here。

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

Answer 1

嘿，先检查此解决方案，您需要从服务器发送回响应。

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

希望这可以解决您的问题。告诉我是否为您服务

附加文本并使用fadeIn

1 个答案: