Question

我有一个使用jquery验证的表单。表单的id是“contact”，它位于名为“formdiv”的div中。

我希望在提交时，不要将我带到新页面“contact_received.php”，将“formdiv”的内容替换为“contact_received.php”的内容，包括提交的$ _GET数据。（例如：回声'谢谢你，'。$ _ 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主菜单=＆gt; Web development =＆gt;错误控制台）。我希望英文菜单相同，我是法国人。

编辑：我还在你的php文件名称之前添加了一段时间：url: './contact_received.php'。在我的电脑上，如果我不写，我提交表格时没有任何反应（没有重定向，没有）

Answer 2

好的，您正在使用validate插件。尝试更改此内容：

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

到此：

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

当我没有表单代码时，删除我之前提供的返回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函数以在调用它之前定义完整的函数，而不是像你拥有它之后那样。

试一试。

如何在验证后更改包含div的表单＆amp;提交？

2 个答案: