AJAX/PHP Mulitple form POST submit

Question

I am attempting to submit the form data to another page to be processed and am currently need receiving any data. Below are the forms in question. Default form is the login for requesting username/password. One submit button.

                <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>

I would like to submit what ever the current form data is

                $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);
?>

Right now the only response is an empty Array. Any ideas?

Answer 1

There are two issues - one as indicated in the comments - you need to use $_POST.

Another lies in,

data: $(this).serialize(),

$(this) is pointing to the button, so you are posting the serialized button. Try as follows :

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

Answer 2

As mentioned previously, fix the $(this) and make it $("#form_wrapper") also fix the $POST to $_POST . Your JS should look like this.

$('#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);
        }
    });
});

AFTER THE QUESTION ABOUT THE BUTTON NAME.

Added code to the data line of the ajax call.

Answer 3

First, you're serializing $(this) in the click even of an input element. You might want to use data: $(this).closest('form').serialize() . Second, it's print_r($_POST) (you're missing the underscore).