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

Question

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

3

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

我希望在提交时，不是将我带到一个新页面“contact_received.php”，而是用“contact_received.php”的内容替换“formdiv”的内容，包括提交的$_GET数据。(例如：echo'谢谢，'.$_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页面。我错在哪里了？

- pg.

要明确的是，验证工作正常，一切都很好，除了我不想提交。我应该从表单中删除“action”吗？ - pg.

是的，请试一试。我更新了我的答案。 - jk.

2个回答

1

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

<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函数，将complete函数定义放在调用之前而不是之后，就像你之前写的那样。

试一下吧。

- jk.

谢谢，但这并没有改变什么。它在验证内部，我将编辑它以包括整个 JQuery 脚本。 - pg.

好的，我可以一直猜测，但没有表单代码，很难弄清楚发生了什么。 - jk.

哦，我也会包括那个，抱歉。 - pg.

已更新答案。请告诉我发生了什么。 - jk.

谢谢您的帮助！当我这样做时，提交后我被返回到初始页面（在url中附加 $_GET 数据），问题是包含 DIV 没有被替换。 - pg.

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Romain Guidoux · Accepted Answer

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

$("#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'。在我的电脑上，如果我不写它，当我提交表单时什么也不会发生（没有重定向，没有任何反应）。