Loading data from form into MySQL with PHP and AJAX

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();
?>

where is the action attribute in form and what is the reason of putting form in another form — M Khalid Junaid
– M Khalid Junaid, Commented Aug 19, 2012 at 21:22
NEVER insert values from a form into the database with a normal query that hasn't been escaped, because this is a very high security risc. Use prepared statements (this includes escaped server-side) and the new mysqli library instead. This will prevent you from sql injections: php.net/manual/de/mysqli.prepare.php — drjd
– drjd, Commented Aug 19, 2012 at 21:33

Itamar · Accepted Answer · 2012-08-19 21:53:28Z

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.

edited Aug 19, 2012 at 21:53

answered Aug 19, 2012 at 21:23

Itamar

5341 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lukas Pleva Over a year ago

Thank you for the thorough response. Any chance you could further explain the "In the PHP code , when posting , you only post the field you send through ajax"? Thanks!

Itamar Over a year ago

Of course- in the php file , you could notice there are a lot of $_POST fields - first , last, email , gpa , etc. On the other hand, i the ajax submittion the only data field you send is (assuming you've fixed the submittion as I suggested ) dataString . The rest of the field are not even sent . The JSON formatted data you send in the data field , in .$ajax is the data you may post in the php file. Please accept the answer if it helped you , so others will be able to use it .

Lukas Pleva Over a year ago

See my updated AJAX code. I actually left it almost intact, and it works now -- all of the data is getting saved into the database. Only problem is I am still not getting any alerts...

Itamar Over a year ago

I can't notice any changed, what exactly have you changed?

M Khalid Junaid · Accepted Answer · 2012-08-20 07:43:52Z

 <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

Collectives™ on Stack Overflow

Loading data from form into MySQL with PHP and AJAX

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related