php - 重置ajax表单提交，以便可以再次发送新信息

Question

这是一个弹出表单，我想使用，问题是表单提交一次后，它不会再次显示以发送不同的信息，唯一有效的方法是重新加载页面，但我不想那样做。

这是网站

这是现场演示

   <!-- basic fancybox setup -->
 <script type="text/javascript">
function validateEmail(email) { 
    var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|         (\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-  zA-Z]{2,}))$/;
    return reg.test(email);
}

 $(document).ready(function() {
    $(".modalbox").fancybox();
    $("#contact").submit(function() { return false; });


    $("#send").on("click", function(){
        var emailval  = $("#email").val();
        var msgval    = $("#msg").val();
        var msglen    = msgval.length;
        var mailvalid = validateEmail(emailval);

        if(mailvalid == false) {
            $("#email").addClass("error");
        }
        else if(mailvalid == true){
            $("#email").removeClass("error");
        }

        if(msglen < 4) {
            $("#msg").addClass("error");
        }
        else if(msglen >= 4){
            $("#msg").removeClass("error");
        }

        if(mailvalid == true && msglen >= 4) {
            // if both validate we attempt to send the e-mail
            // first we hide the submit btn so the user doesnt click twice
            $("#send").replaceWith("<em>sending...</em>");

            $.ajax({
                type: 'POST',
                url: 'sendmessage.php',
                data: $("#contact").serialize(),
                success: function(data) {
                    if(data == "true") {
                        $("#contact").fadeOut("fast", function(){
                            $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
                            setTimeout("$.fancybox.close()", 1000);
                        data == "true"; 
                        });
                    }
                }
            });
        }
    });
});

Answer 1

在模型框锚链接上单击下面的代码。

$('#contact').show().prev('p').hide();

所以完整的代码将是

$('.modalbox').click(function(){
   //$('#contact').show().prev('p').hide();
   $('#contact').prev('p').hide();
   $('#contact').show();
});

Answer 2

您正在使用代码隐藏表单：

$("#contact").fadeOut("fast", function(){
  $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
  setTimeout("$.fancybox.close()", 1000);
}

因此，您应该添加带有 ID 的新 div 来代替它，例如。result并在那里显示发送结果。

$("#result").html("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
setTimeout("$.fancybox.close()", 1000);