post form data using ajax? - php

Question

i have the following form:
<form name="register" id="register" action="include/process_registration.php" method="post">
<div class="form_error">Ooops! There is some missing or incorrect information. Please look back over this section. </div>
<div class="left_form2" >
<div class="inner_form1">
<p>Your First Name:*</p>
<p>Your Last Name:*</p>
<p>Date of Birth:*</p>
</div>
<div class="inner_form2">
<input type="text" name="firstname" id="firstname" class="login_form2" autocomplete="off"><br/>
<input type="text" name="lastname" id="lastname" class="login_form2" autocomplete="off"><br/>
<input type="text" name="dob" id="dob" class="login_form2"><br/>
</div>
</div>
<div class="left_form2" style="text-align:right;">
<div class="inner_form1">
<p>Email Address:*</p>
<p>Confirm Email:*</p>
</div>
<div class="inner_form2">
<input type="text" name="email" id="email" class="login_form2" autocomplete="off"><br/>
<input type="text" name="email2" id="email2" class="login_form2" autocomplete="off"><br/>
</div>
</div>
<input type="submit" id="register1" name="register" value="Register" class="buttons_register">
</form>
i am then using ajax to post my form data to my mysql query process_registration.php:
Ajax:
<script type="text/javascript">
$(function() {
//alert('Document is ready');
$('#register1').click(function() {
var a = $('#firstname').html();
var b = $('#lastname').html();
var c = $('#dob').html();
var d = $('#email').html();
var f = $('#email2').html();
//alert('You picked: ' + sel_stud);
$.ajax({
type: "POST",
url: "include/process_registration.php",
data: {theOption: a, theOption2: b, theOption3: c, theOption4: d, theOption5: f},
success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
$('#LaDIV').html(whatigot);
$('#theButton').click(function() {
alert('You clicked the button');
});
} //END success fn
}); //END $.ajax
}); //END dropdown change event
}); //END document.ready
</script>
my php file process_registration which contains my mysql query looks like so:
<?php
session_start();
include("config.php");
include("verify.php");
//retrieve our data from POST
$firstname = $_POST['theOption'];
$lastname = $_POST['theOption2'];
$dob = $_POST['theOption3'];
$email = $_POST['theOption4'];
$email2 = $_POST['theOption5'];
$firstname = stripslashes($firstname);
$firstname = mysql_real_escape_string($firstname);
$lastname = stripslashes($lastname);
$lastname = mysql_real_escape_string($lastname);
$email = stripslashes($email);
$email = mysql_real_escape_string($email);
$email2 = stripslashes($email2);
$email2 = mysql_real_escape_string($email2);
$dob = stripslashes($dob);
$dob = mysql_real_escape_string($dob);
include '../dependables/secure.php';
$sql = "INSERT INTO supplier_registration (id, first_name, last_name, supplier_email, supplier_password, salt, dob, date) VALUES ('', '$firstname','$lastname','$email2', '$hash', '$salt', '$dob', now())";
$result2 = mysql_query($sql);
?>
for some reason i am getting taken to the process_registation.php page on the form submit and getting undefined index errors for all my form values. Can someone please show me where i am going wrong? Thanks

Answer 1

You are going to that page because the action of the form says it.
You can prevent that with javascript/jquery when submiting the form and then do the ajax code.
$("#register1").on("click", function(e) {
e.preventDefault();
//rest of your code
});
Also you won't get the inputs values with .html(), should use .val()
PS: you can get less code with serialize function for your forms. Take a look on jQuery API.

Answer 2

Remove this from your form...
action="include/process_registration.php"
Just make it action="" if you want it to reload the current page.
You might want to actually echo something from your process_registration.php too, otherwise the "whatigot" from the success function will always be empty.

Answer 3

You'll want to use e.preventDefault() to stop the submit click working as it is usually expected to.
You also need to use .val() instead of .html() as you should be getting the value of the input and not the html within the input.
$('#register1').click(function(e) {
e.preventDefault();
var a = $('#firstname').val();
var b = $('#lastname').val();
var c = $('#dob').val();
var d = $('#email').val();
var f = $('#email2').val();
// AJAX Call
});