標準の HTML フォームがあり、そのフォームのデータを MySQL データベースに保存したいと考えています。すべてが正しく機能していましたが、ページが更新されないように AJAX を実装したいと考えており、突然問題が発生しています。
問題: 「成功」アラートが生成されず、データがデータベースに保存されません。
私は Jquery/AJAX にほとんど触れておらず、外出先で学習しているので、基本的な間違いを犯した場合はご容赦ください。
*更新1***
これは私の新しい AJAX コードです。フォームからのデータがデータベースに保存されるようになりましたが、成功のアラートはまだありません。実際、ポップアップは表示されません。
<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>
これがフォームです (末尾に AJAX コードが含まれています)。(更新: このコードはもう使用されていません。上記を参照してください)
<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>
これが 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();
?>