I have a form that uses a [jQuery system](http://www.ajaxshake.com/demo/EN/296/f45e128b/jquery-validation-script-for-your-web-pages-jval.html) to verify the input. With the default way it works, if there are no errors, it will submit. I am pretty bad with JavaScript, so my question is:

**How would I go about making this submit to the same page and put the inputs in the `$_POST` variable, so it can execute the PHP code to handle the data, while having the jQuery validation working?**

What I've noticed:

* The type for the submit button must be set to `type="button"` for the validator to work
* Having the type set to button, makes the `<form>` not submittable

PHP Snippet to validate the input (see if it actually posted into the `$_POST` variable):

```
if(isset($_POST)){
    $username = $_POST['username'];
    $email = $_POST['email'];
    $password = $_POST['password'];
    echo $username."<br>".$email."<br>".$password;
}

```

The script for the form:

```
<form action="" method="post">
<table border=0 id="form" style="padding:10px;">
    <tr>
        <td>
            Username
        </td>
        <td align=left>
            <input name="username" type="text" size="20" jVal="{valid:function (val) { if (val.length < 3) return 'Invalid Name'; else return ''; }}">
        </td>
    </tr>
    <tr>
        <td>
            Email address
        </td>
        <td align=left>
            <input name="email" type="text" size="40" jVal="{valid:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message:'Invalid Email Address'}" jValKey="{valid:/[a-zA-Z0-9._%+-@]/, cFunc:'alert', cArgs:['Email Address: '+$(this).val()]}">
        </td>
    </tr>
    <tr>
        <td>
            Password
        </td>
        <td align=left>
            <input name="password" id="password" type="password" jVal="{valid:function (val) { if (val.length < 4) return false; else return true; }, message:'Password of 4 or more characters required'}">
        </td>
    </tr>
    <tr>
        <td style="padding-right:20px;">
            Verify password
        </td>
        <td align=left>
            <input name="passwordconfirm" id="passwordVerify" type="password" jVal="{valid:function (val) { if ( val != eval('$(\'#password\').val()') ) return false; else return true; }, message:'Password and Verify Password Must Match'}">
        </td>
    </tr>
    <tr>
        <td>
            <input type="hidden" name="antispam" value="banana" />
            <script>
            var antiSpam = function() {
                if (document.getElementById("antiSpam")) {
                        a = document.getElementById("antiSpam");
                        if (isNaN(a.value) == true) {
                                a.value = 0;
                        } else {
                                a.value = parseInt(a.value) + 1;
                        }
                }
                setTimeout("antiSpam()", 1000);
            }
            antiSpam();
            </script>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input id="submitButton" type="button" value="Click here to register!" onClick="if ( $('#form').jVal({style:'blank',padding:8,border:0,wrap:false}) ){ this.form.submit;}">
        </td>
    </tr>
</table>
</form>

```

[If needed, the files corresponding to the jVal system (validation) can be found here, but they are most likely not needed.](http://www.ajaxshake.com/demo/EN/296/f45e128b/jquery-validation-script-for-your-web-pages-jval.html)

Thanks ahead

PS. Please do not go saying to "narrow down the problem", when I had it narrowed down and posted the specific code snippets, I was told to post the entire code, so here it is.