Loading data from form into MySQL with PHP and AJAX - php

Question

I have a standard HTML form, and I'd like to store the data from that form into a MySQL database. I had everything working correctly, but now am wanting to implement AJAX to prevent the page from refreshing, and all of sudden am running into trouble.
Problem: the "success" alert is not being generated, and the data is not being saved into the database.
I have very, very little exposure into Jquery/AJAX, and am learning on-the-go, so please bear with me if I made an elementary mistake.
*UPDATE 1***
This is my new AJAX code. The data from the form is now getting saved into the database, but still no success alerts. In fact, NO pop-up appears.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('form').bind('submit', function(){
$.ajax({
type: 'post',
url: "InsertNewMentor.php",
data: $("form").serialize(),
success: function() {
alert("Success!");
}
});
return false;
});
});
</script>
This is the form (includes AJAX code at the end). (update: no longer using this code, see above)
<form>
<table cellpadding="10">
<tr>
<td><b>Chapter:</b></td>
<td><input type="text" name="chapter"></td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="first"></td>
<td>Last Name:</td>
<td><input type="text" name="last"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</td>
<td>Ethnicity:</td>
<td>
<form action="">
<select name="ethnicity">
<option value="white">White/Caucasian</option>
<option value="hispanic">Hispanic</option>
<option value="asian">Asian/Pacific Islander</option>
<option value="native_american">Native American Indian</option>
<option value="other">Other</option>
</form>
</td>
</tr>
<tr>
<td>Year in School</td>
<td>
<form action="">
<select name="year_in_school">
<option value="freshman">Freshman</option>
<option value="sophomore">Sophomore</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
</form>
</td>
<td>Phone Number:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>Email Address:</td>
<td><input type="text" name="email"></td>
<td>Street Address:</td>
<td>
<input type="text" name="address">
</td>
</tr>
<tr>
<td>Apt/Suite:</td>
<td>
<input type="text" name="suite_num">
</td>
<td>City:</td>
<td>
<input type="text" name="city">
</td>
</tr>
<tr>
<td>State:</td>
<td>
<select name="state">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</td>
<td>Zip Code:</td>
<td>
<input type="text" name="zip_code">
</td>
</tr>
<tr>
<td>Cumulutative GPA:</td>
<td><input type="text" name="gpa"></td>
<td>Major/Area of Study:</td>
<td><input type="text" name="major"></td>
</tr>
<tr>
<td>Twitter handle:</td>
<td>
<input type="text" name="twitter_handle">
</td>
</tr>
<tr>
<td colspan="2">
<p>Please describe any relevant teaching experience:</p>
<textarea rows="6" cols="45" name="teaching_experience">
</textarea>
</td>
<td colspan="2">
<p>Why do you want to join Moneythink?</p>
<textarea rows="6" cols="43" name="why_moneythink">
</textarea>
</td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" value="Apply"></td>
<td><input type="reset" value="Clear"></td>
</tr>
</table>
</form>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('form').bind('submit', function(){
$.ajax({
type: 'post',
url: "/InsertNewMentor.php",
data: $("form").serialize(),
success: function() {
alert("form was submitted");
}
});
return false;
});
});
</script>
And this is InsertNewMentor.hp
<?php
$username="";
$password="";
$database="";
$first = $_POST['first'];
$last = $_POST['last'];
$email = $_POST['email'];
$gpa = $_POST['gpa'];
$year = $_POST['year_in_school'];
$address = $_POST['address'];
$phone = $_POST['phone'];
$gender = $_POST['gender'];
$ethnicity = $_POST['ethnicity'];
$year_in_school = $_POST['year_in_school'];
$suite_number = $_POST['suite_num'];
$city = $_POST['city'];
$state = $_POST['state'];
$zip_code = $_POST['zip_code'];
$major = $_POST['major'];
$twitter_handle = $_POST['twitter_handle'];
$why_moneythink = $_POST['why_moneythink'];
$teaching_experience = $_POST['teaching_experience'];
$date = date("m/d/Y");
mysql_connect(localhost,$username,$password);
#mysql_select_db($database) or die( "Unable to select database");
$query = "INSERT INTO students VALUES ('','$address','$phone','$first','$last','$gender', '$ethnicity', '$year_in_school', '$email', '$suite_number','$city','$state','$zip_code','$major','$gpa','$twitter_handle','$why_moneythink','$teaching_experience','pending','$date')";
mysql_query($query);
mysql_close();
?>

Answer 1

First of all , the serialize() function returns a text string ,and not an array of values - for further information read jQuery documentaion.
Now for the ajax submittion -
$(function() {
$('form').bind('submit', function(){
$.ajax({
type: 'post',
url: "/InsertNewMentor.php",
**data: {dataString: $("form").serialize()} ,**
success: function() {
alert("form was submitted");
}
});
return false;
});
You have got to send a JSON formatted data , as explanied above ( notice the change in the data field)
In the PHP code , when posting , you only post the field you send through ajax - i.e - dataString.
Furtheremore , in the success function you might use :
success: function(result) {
alert(result);
}
});
so you could debug any errors , if exist.
Good luck.

Answer 2

<form id="formPost" method="POST">
<table cellpadding="10">
<tr>
<td><b>Chapter:</b></td>
<td><input type="text" name="chapter"></td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="first"></td>
<td>Last Name:</td>
<td><input type="text" name="last"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</td>
<td>Ethnicity:</td>
<td>
<select name="ethnicity">
<option value="white">White/Caucasian</option>
<option value="hispanic">Hispanic</option>
<option value="asian">Asian/Pacific Islander</option>
<option value="native_american">Native American Indian</option>
<option value="other">Other</option>
</td>
</tr>
<tr>
<td>Year in School</td>
<td>
<select name="year_in_school">
<option value="freshman">Freshman</option>
<option value="sophomore">Sophomore</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
</td>
<td>Phone Number:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>Email Address:</td>
<td><input type="text" name="email"></td>
<td>Street Address:</td>
<td>
<input type="text" name="address">
</td>
</tr>
<tr>
<td>Apt/Suite:</td>
<td>
<input type="text" name="suite_num">
</td>
<td>City:</td>
<td>
<input type="text" name="city">
</td>
</tr>
<tr>
<td>State:</td>
<td>
<select name="state">
<option value="Alabama">Alabama</option>
.....
</select>
</td>
<td>Zip Code:</td>
<td>
<input type="text" name="zip_code">
</td>
</tr>
<tr>
<td>Cumulutative GPA:</td>
<td><input type="text" name="gpa"></td>
<td>Major/Area of Study:</td>
<td><input type="text" name="major"></td>
</tr>
<tr>
<td>Twitter handle:</td>
<td>
<input type="text" name="twitter_handle">
</td>
</tr>
<tr>
<td colspan="2">
<p>Please describe any relevant teaching experience:</p>
<textarea rows="6" cols="45" name="teaching_experience">
</textarea>
</td>
<td colspan="2">
<p>Why do you want to join Moneythink?</p>
<textarea rows="6" cols="43" name="why_moneythink">
</textarea>
</td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" value="Apply"></td>
<td><input type="reset" value="Clear"></td>
</tr>
</table>
</form>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('form').bind('submit', function(){
$.ajax({
type: 'post',
url: "/InsertNewMentor.php",
data: $("#formPost").serialize(),
success: function() {
alert("form was submitted");
}
});
return false;
});
});
</script>
try this