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

Question

我有一个使用 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 页面。我做错了什么？

Answer 1

我在我的电脑上试过你的代码，它运行良好。我什至添加了一些规则和消息。

$("#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 name@domain.com",
        },
        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'。在我的电脑上，如果我不写，提交表单时什么都不会发生（没有重定向，什么都没有）

Answer 2

好的，您正在使用验证插件。尝试改变这个：

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

到这里：

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

并删除我之前在没有表单代码时提供的 return false。

好的，现在我们已经过去了。试试这个：

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

    }
});

我调整了 ajax 函数以在调用它之前定义完整的函数，而不是像你之前那样定义它。

试试看。