为什么我的jQuery表单不会重新提交?

时间:2011-08-22 03:20:07

标签: php javascript jquery

所以我已经做了几次并且它已经工作了,但由于某种原因,这次我的表格不起作用。当我提交表单时,jQuery使用mail.php进行最后一次验证。然后,它要么提交它,要么将错误回显给表单。

所以基本上当我提交有错误的表单时,它会回显相应的错误,但是当我更正值并尝试重新提交时,它将不会重新提交。

以下是代码:

<html>
<head>
    <title>Contact Form Example</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            $('#email').keypress(function() {
                p = {};
                p['email'] = document.getElementById("email").value;
                $("#emailcheck").load("validate_email.php", p);
            });

            $('#message').keypress(function() {
                p = {};
                p['message'] = document.getElementById("message").value;
                $("#messagecheck").load("validate_message.php", p);
            });

                $('#mail').click(function() {

                    p = {};
                    p['email'] = document.getElementById("email").value;
                    p['message'] = document.getElementById("message").value;
                    $("#body").load("mail.php", p);

                });

        });
    </script>

</head>
<body>

    <table style="display: block;" id="body">
        <form action="mail.php" method="POST">
        <tr>
            <td align="right">
                <label for="email">Email:</label>
            </td>
            <td align="left">
                <input type="text" name="email" id="email" />
            </td>
            <td id="emailcheck"></td>
        </tr>
        <tr>
            <td align="right" valign="top">
                <label for="message">Message:</label>
            </td>
            <td align="left">
                <textarea rows="5" cols="30" name="message" id="message"></textarea>
            </td>
            <td id="messagecheck"></td>
        </tr>
        <tr>
            <td></td><td><input id="mail" type="submit" value="Email" onclick="return false;"/></td>
        </tr>
        </form>
    </table>

</body>

2 个答案:

答案 0 :(得分:2)

就在这里:

$("#body").load("mail.php", p);

您正在替换#body的整个内容。这包括你绑定回调的所有元素,因此所有这些回调都会丢失。这可能只留下onclick="return false;"作为#mail的动作,因此你的表格已经死了。

您可以使用livedelegate绑定回调,或在替换#body时重新绑定所有处理程序。

答案 1 :(得分:1)

您需要重新绑定按钮的事件处理程序(#mail),或者只使用live()

当您加载回HTML时,绑定到该元素的事件将丢失。

此外,p没有作用于该函数的范围,因此保留这些属性(如果没有将其显式重新分配给空对象文字)。

始终使用var为变量定义添加前缀,除非您确实需要隐含的全局(99.9%的时间不需要)。