Troubleshooting a Registration Form

JavaScript
1

I’m learning how to create registration/login forms, how to insert data from forms into databases, etc.

I found a great tutorial @ http://www.bewebdeveloper.com/tutorial-about-using-ajax-with-phpmysql I downloaded the source code and had a form that let me add and delete rows from a database table. I then found a registration form that I like better (though it has no associated database table) @ http://jqueryvalidation.org/files/demo/milk/

So I tried to combine the two, and I thought I had it figured out, but it isn’t working. You can see my test page @ http://www.govwa.org/test/registration.php

When I fill out the form and click the Submit button, I see the message “Submitted!” But my local database table remains unchanged. When I do the same thing online, a new row is added to my online table, but the value for every field is NULL.

At the bottom of the test page, you’ll see the error message “PDOException : SQLSTATE[23000]: Integrity constraint violation: 1048 Column ‘age’ cannot be null”

I got the same message on my local page. I fixed it by changing the Default value of every field from None to NULL. I changed the last field’s value back to None to let you see the error message.

Does anyone have a hunch what’s going on, or do you know how I can troubleshoot this form?

Here’s the PHP code that appears just before the form’s closing tag. (I wasn’t sure if I should post this in the JavaScript or PHP forum.)

 include('ajax-database/config.php');
 $pdo = connect();

try {
	$sql = "INSERT INTO g1_members (firstname, lastname, username, password, password_confirm, email, age) VALUES (:firstname, :lastname, :username, :password, :password_confirm, :email, :age)";
	$query = $pdo->prepare($sql);
	$query->bindParam(':firstname', $_GET['firstname'], PDO::PARAM_STR);
	$query->bindParam(':lastname', $_GET['lastname'], PDO::PARAM_STR);
	$query->bindParam(':username', $_GET['username'], PDO::PARAM_STR);
	$query->bindParam(':password', $_GET['password'], PDO::PARAM_STR);
	$query->bindParam(':password_confirm', $_GET['password_confirm'], PDO::PARAM_STR);
	$query->bindParam(':email', $_GET['email'], PDO::PARAM_STR);
	$query->bindParam(':age', $_GET['age'], PDO::PARAM_STR);

	$query->execute();
} catch (PDOException $e) {
	echo 'PDOException : '.  $e->getMessage();
}

Thanks!

2

Hi Chavista,

The reason you’re getting this error is because your PHP code is running every time the page is loaded, regardless of whether the form has been submitted or not.

The solution to this depends on whether you want to submit the form normally, or via AJAX.

Non-AJAX submit

To do this the non-AJAX way, which involves a page reload for the user, you could wrap the PHP code in an IF statement to check if the form has been submitted: 
if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    // Insert data into DB

}

Note that this relies on your form being submitted via POST, not GET, but this is a good idea anyway as you don’t always want your form data being displayed in the URL, and there’s a much smaller limit to how much data you can send with GET.

You’d also want to change your submitHandler to submit the form if the client-side validation passes:

submitHandler: function(form) {
    form.submit();
},

AJAX submit

To do this, you'll want to move your PHP code to a separate file and change your submitHandler to something like this: 
submitHandler: function(form) {
    $.post(
        'save-registration.php', 
        $(form).serialize(),
        success: function() {
            // display success message or something
        }
    );
},

Either way, it would be a good idea to add validation on the server-side too as JS is easily by-passed or disabled.

3

Thanks, that’s a good tip.

So my main page is @ mysite/test/registration.php. I took the PHP code out of that file and put it another file @ mysite/test/registration/php-code.php. Then I included the latter file in registration.php.

I then inserted the following code in the head section of the main page (registration.php). I fixed one syntax error, but I get another one on the line success: function() {

Does anyone know how to fix that?

<script>
submitHandler: function(form) {
    $.post(
        '/test/registration/php-code.php', 
        $(form).serialize(),
        success: function() {
            // display success message or something
            It works!
        }
    );
};
</script>
4

That would be because It works! is not a valid command.

5

OK, I deleted that, but I still get the same error.

But I finally fixed it by stripping out everything - AJAX, most of the form and PHP code, etc. I now have a form with just two boxes for first and last name, and it publishes to my database every time I fill it out and click the Submit button (and again whenever I refresh the page).

So I guess the problem is somewhere in the tutorial code.

Thanks.

6

Oops, sorry Chavista, that’s my fault! I made a mistake… the handler should be:

submitHandler: function(form) {
    $.post(
        '/test/registration/php-code.php', 
        $(form).serialize(),
        function() {
            console.log('It works!');
        }
    );
};

I’ve created a jsfiddle where you can see it working: http://jsfiddle.net/3vL6wrch/

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.