AJAX / PHP多表单POST提交

时间:2014-03-16 05:41:51

标签: javascript php jquery ajax forms

我正在尝试将表单数据提交到另一个要处理的页面,目前我需要接收任何数据。以下是有问题的表格。默认表单是请求用户名/密码的登录名。一个提交按钮。

                <div id="form_wrapper" class="form_wrapper">
                <form class="register">
                    <h3>Register</h3>
                    <div>
                        <label>Username:</label>
                        <input type="text" name="regname"/>
                        <span class="error">This is an error</span>
                    </div>
                    <div>
                        <label>Password:</label>
                        <input type="password" name="regpass" />
                        <span class="error">This is an error</span>
                    </div>
                    <div class="bottom">
                        <div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
                        <input type="submit" value="Register"></input>
                        <a href="index.html" rel="login" class="linkform">You have an account already? Log in here</a>
                        <div class="clear"></div>
                    </div>
                </form>
                <form class="login active">
                    <h3>Login</h3>
                    <div>
                        <label>Username:</label>
                        <input type="text" name="username"/>
                        <span class="error">This is an error</span>
                    </div>
                    <div>
                        <label>Password: <a href="index.php" rel="forgot_password" class="forgot linkform">Forgot your password?</a></label>
                        <input type="password" name="password" />
                        <span class="error">This is an error</span>
                    </div>
                    <div class="bottom">
                        <div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
                        <input type="submit" value="Login"></input>
                        <a href="index.php" rel="register" class="linkform">You don't have an account yet? Register here</a>
                        <div class="clear"></div>
                    </div>
                </form>
                <form class="forgot_password">
                    <h3>Forgot Password</h3>
                    <div>
                        <label>Username or Email:</label>
                        <input type="text" name="forgotuser" />
                        <span class="error">This is an error</span>
                    </div>
                    <div class="bottom">
                        <input type="submit" value="Send reminder"></input>
                        <a href="index.php" rel="login" class="linkform">Suddenly remebered? Log in here</a>
                        <a href="index.php" rel="register" class="linkform">You don't have an account? Register here</a>
                        <div class="clear"></div>
                    </div>
                </form>
            </div>

我想提交当前的表单数据

                $form_wrapper.find('input[type="submit"]')
                         .click(function(e){
                            e.preventDefault();
                              $.ajax({
                                    url: 'locallogin.php',
                                    type: 'POST',
                                    data: $(this).serialize(),
                                    success: function (results) {
                                      alert(results);
                                    }
                                    });
                         });

locallogin.php

<?php
print_r($_POST);
?>

现在唯一的响应是一个空数组。有什么想法吗?

3 个答案:

答案 0 :(得分:4)

有两个问题 - 一个在评论中指出 - 你需要使用$ _POST。

另一个在于,

data: $(this).serialize(),

$(this)指向按钮,因此您将发布序列化按钮。请尝试如下:

data: $(".register").serialize(), 

答案 1 :(得分:2)

如前所述,修复$(this)并将其$("#form_wrapper")同时修复$POST$_POST。你的JS应该是这样的。

$('#form_wrapper').find('input[type="submit"]')
.click(function(e){
    e.preventDefault();
    $.ajax({
        url: 'locallogin.php',
        type: 'POST',
        data: $(this).closest('form').serialize()+'&buttonName='+$(this).val(),
        success: function (results) {
            alert(results);
        }
    });
});

关于按钮名称的问题之后。

在ajax调用的数据行中添加了代码。

答案 2 :(得分:0)

首先,即使是$(this)元素,您也会在点击中序列化input。您可能想要使用data: $(this).closest('form').serialize()。其次,它是print_r($_POST)(你错过了下划线)。