Semi-working AJAX code: what's wrong?

[phpnoob1991]

Hi everyone,

 

First time here, so I am hoping one of y'all will be able to help me with my problem.

 

Quick background: I have a basic HTML form. I'd like to store all of the data from that form in a MySQL database. I was able to do this with PHP, but I don't want the page to refresh, so naturally I turned to AJAX. I have ZERO exposure to AJAX, and am learning on-the-go, so apologies if I am making an elementary mistake.

 

Anyway, here's the code of the HTML page with the input form and the AJAX code at the very end.

 

My main problem: upon clicking the "apply" button, I receive the "failure" dialog box, even though the data DOES get stored inside my database.

 

<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>
<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>
<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",
                    dataType: 'html',
                    data: $('form').serialize(),
                    ssuccess: function(){
    			alert('success');
  },
  error: function(){
    alert('failure');
  }
});

                return false;
            });
        });
    </script>

 

And here's InsertNewMentor.php

 

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

 

[trq]

The first thing I notice is that you have misspelt your success callback.

[Christian F.]

You will also need to read up on input validation and output escaping, as your script is wide open to attackers.

Also, please indent your code properly, as it makes it a lot easier to read. Preferably also use proper and semantic HTML, leaving all of the formatting to CSS. That means, no use of tables for layout purposes.

<form method="post" action="">
    <fieldset>
        <legend>Login form</legend>

        <label for="uname">Username:</label>
        <input id="uname" type="text" name="username" value="">

        <label for="passw">Password:</label>
        <input id="passw" type="password" name="password">
    </fieldset>

    <fieldset>
        <input type="submit" name="submit" value="Log in">
   </fieldset>
</form>

 

As you can see, this is a lot easier to read than the code you posted above. By using CSS you can make it look exactly the same, with the added benefit that it'll be useful everywhere.