Can't get AJAX registration form to submit
<p>I am trying to incorporate this code to allow me to register a user after their details are given, and then load the new page, all done using AJAX.</p>

<p>Step 1:
User registers enters their details in the form within register.php. Upon submit using the input with the ID "reg-submit", the details are passed to click.js.</p>

<p>Step 2:
If the user is successful, the information is processed in click.js, and prepared via ajax to be passed to usersubmit.php for DB insertion.</p>

<p>Step 3:
data has been successfully inserted into the DB and next-page.php loads into the "#main-content" div (located within index.php).</p>

<p>To help keep things in context. All pages are loaded within the #main-content div within index.php. They are all loaded via the same function used that you will see in the click.js portion upon ajax success. Register.php is simply one of the pages that loads within this div.</p>

<p>I need the registration to happen, and then load the next page while all of the back end database information is inserted appropriately.</p>

<p>register.php</p>

<pre><code>&lt;script src="js/click.js"&gt;&lt;/script&gt;

&lt;form action="click.js" method="post"&gt;

   &lt;label for="first_name"&gt;First Name:&lt;/label&gt;
   &lt;input type="text" id="first_name" name="first_name" /&gt;&lt;br&gt;

   &lt;label for="last_name" &gt;Last Name:&lt;/label&gt;
   &lt;input type="text" id="last_name" name="last_name" /&gt;&lt;br&gt;

   &lt;label for="username"&gt;Username:&lt;/label&gt;
   &lt;input type="text" id="username" name="username" /&gt;&lt;br&gt;

   &lt;label for="password"&gt;Password:&lt;/label&gt;
   &lt;input type="text" id="password" name="password" /&gt;&lt;br&gt;

   &lt;label for="email"&gt;Email:&lt;/label&gt;
   &lt;input type="email" id="email" name="email" /&gt;&lt;br&gt;

   &lt;button type="submit" id="reg-submit" name="submit"&gt;Submit&lt;/button&gt;&lt;br&gt;

&lt;/form&gt;
</code></pre>

<p>click.js</p>

<pre><code>$(document).ready(function(){

  $('#reg-submit').click(function() {
     var firstName = $('#first_name').val();
     var lastName = $('#last_name').val();
     var userName = $('#username').val();
     var password = $('#password').val();
     var email = $('#email').val();
     var dataString = 'name1=' + firstName + '&amp;lastname1=' + lastName + '&amp;user1=' + userName + '&amp;password1=' + password + '&amp;email1=' + email;

     if (firstName == "" || lastName == "" || userName == "" || password == "" || email == "") {
         alert('missing some information');
     }  else {
         $.ajax({
           type: "POST",
           url: "usersubmit.php",
           data: dataString,
           cache: false,
           success: function(){
             $('#main-content').load('php/next-page.php').hide().fadeIn('slow');                
          }
        });
      };
   return false;
   });
});
</code></pre>

<p>the DB connection takes place within the users_db.php.</p>

<p>usersubmit.php</p>

<pre><code>&lt;?php 

   include 'users_db.php';

   $first1=$_POST['name1'];
   $last1=$_POST['lastname1'];
   $username1=$_POST['user1'];
   $pass1=$_POST['password1'];
   $email01=$_POST['email1']; 

   $userinfo = $conn-&gt;prepare("INSERT INTO registered_users (FirstName, LastName, Username, Password, Email) VALUES ('$first1', '$last1', '$username1'', '$pass1', '$email01')");

   $userinfo-&gt;execute();


   $conn = null;
?&gt;
</code></pre>

<p>Much appreciated!</p>

<p>If you see any other problems I may have here outside of the form simply not submitting, feel free to point them out.</p>