验证和提交后如何更改表单的包含div？

问题描述

| 我有一个使用jquery进行验证的表单。表单的ID为\“ contact \”，并且位于名为\“ formdiv \”的div中。 我希望它在提交时，而不是将我带到新页面\“ contact_received.PHP \”，而是将\“ formdiv \”的内容替换为\“ contact_received.PHP \”的内容，包括已提交的$ _GET数据。 （例如：echo \'thank you，\'。$ _ GET [\'name \']。\'与我们联系，我们会再次与您联系\'。$ _ GET [\'message \']） 。我在网上寻找类似的东西，并认为我会使用jquery提交处理程序：

$(\"#contact\").validate({    
rules: {SOME RULES-clipped for length},messages: {SOME MESSAGES-clipped for length},submitHandler: function() { 
    $.ajax({
        url: \'/contact_received.PHP\',type: \"GET\",data: datastring,cache: false,success: function (html) {             
            $(\'#formdiv\').fadeOut(\'slow\',complete);
            function complete() { 
                $(\'#formdiv\').fadeIn(\'slow\').html(html); 
                $(\'.loading\').hide();
            }
        }
    });
}
});

表单代码在这里：

<div id=\"formdiv\">

    <form id=\"contact\" name=\"contact\" action=\"/contact_received.PHP\" method=\"get\">

        Your Name

        <input type=\"text\" name=\"name\" id=\"name\" value=\"\" style=\"display:block;\">

     Your Email

      <input type=\"text\" name=\"email\" value=\"\" style=\"display:block;\">

      messsage

      <textarea name=\"message\" cols=\"50\" rows=\"5\" style=\"display:block;\"></textarea>

     <input type=\"submit\" class=\"btn\" value=

      \"Contact Us\" name=\"Submit\">

  </form> 
</div>

这不会破坏验证，但只会带我直接进入contact_received.PHP页面。我究竟做错了什么？     

解决方法

        我在PC上尝试了您的代码，效果很好。我什至还添加了一些规则和消息。

$(\"#contact\").validate({
    rules : {
        name : { required: true,minlength: 3 },email : { required: true,email: true },message: { required: true,minlength: 5 }
    },messages: {
        name: {
           required: \"We need your name to identify you\",minlength: jQuery.format(\"At least {0} characters required!\")
        },email: {
           required: \"We need your email address to contact you\",email: \"Your email address must be in the format of [e-mail]\",},message: {
            required: \"You need to write something\",minlength: jQuery.format(\"At least {0} characters required!\")
        }
    },submitHandler: function() { 
        $.ajax({
            url: \'./contact_received.php\',type: \"GET\",data: \'name=Romain&message=something\',cache: false,success: function (html) {            
                $(\'#formdiv\').fadeOut(\'slow\',complete);
                function complete() { 
                    $(\'#formdiv\').fadeIn(\'slow\').html(html); 
                    $(\'.loading\').hide();
                }
            }
        });
    }
});

我建议您向我们展示您的规则和消息。如果您在javascript代码中遇到语法错误，则会在目标页面上将您重定向。 （提示：要查看Firefox中的Javascript错误，请转到Firefox主菜单=> Web开发=>错误控制台）。我希望菜单是英文的，我是法语的。 编辑：我还添加了一个句点，在您的php文件名之前：

url: \'./contact_received.php\'

。在我的计算机上，如果我不写它，则提交表单时什么也不会发生（没有重定向，什么也没有）     ,        好的，您正在使用validate插件。尝试更改此：

<form id=\"contact\" name=\"contact\" action=\"/contact_received.php\" method=\"get\">

对此：

<form id=\"contact\" name=\"contact\" action=\"\">

并删除我之前没有表单代码时提供的return false。 好的，现在我们已经过去了。尝试这个：

$.ajax({
    url: \'/contact_received.php\',data: datastring,success: function (html) {
        function complete() { 
            $(\'#formdiv\').fadeIn(\'slow\').html(html); 
            $(\'.loading\').hide();
        }             
        $(\'#formdiv\').fadeOut(\'slow\',complete);

    }
});

我对ajax函数进行了调整，以在调用它之前而不是在您拥有它之后定义完整的函数。 试试看。