我试图让表单“添加注册”在单击编辑按钮时自动填写，有时可以工作，有时却不能，“获取注册”总是返回正确的结果，但是javascript文件未在其中设置值每次都填写表格。
HTML:
<p><input type="button" id="addEnrolment" value="Add" class="button-add"></p>
<div id="dialog" style="display:none;" title="Enrolment Form">
<form id="addEnrolmentForm" name="myform" method="post" action="" >
<input type="hidden" name="id" value="" >
<table>
<tr>
<td> School </td>
<td><select name="school" id="school" onchange='change_category2(this.value);'>
<option value="--" >Select An Option: </option>
<option value="Moosomin">Moosomin</option>
<option value="Wapella">Wapella</option>
</select></td>
</tr>
<tr>
<td> Age Group </td>
<td><div class="selectbox" id="responce_event0">
<select name="agegrp" id="agegrp" disabled="disabled" >
<option value="--" >Select An Option:</option>
</select>
</div></td>
</tr>
<tr>
<td> Events </td>
<td><div class="selectbox" id="responce_event">
<select name="event" id="event" disabled="disabled" >
<option value="--" >Select An Option:</option>
</select>
</div></td>
</tr>
<tr>
<td>Athlete Name:</td>
<td><div class="selectbox" id="responce_event2">
<select name="athlete" id="athlete" disabled="disabled" >
<option value="--" >Select An Option:</option>
<option value="anOption"> An Option </option>
</select>
</div></td>
</tr>
</table>
<br>
<div class="center"><button type="submit" id='enter'> Submit </button></div>
</form>
</div>
<div id="enrolment">
<table align="left">
<tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
<th>School</th>
<th>AgeGroup</th>
<th>Event</th>
</tr>
<tr id="enrolment7">
<td>
<form style='display:inline;' id="editEnrolment7" method="post" action="">
<input type="hidden" name="enrolment_id" value="7" >
<input type="submit" id="button7" name="submit" value="Edit" class="button-edit">
</form>
<form style='display:inline;'id="deleteEnrolment7" method="post" action="">
<input type="hidden" name="enrolment_id" value="7" >
<input type="submit" id="button7" name="submit" value="Delete" class="button-delete">
</form>
<td>Mark</td>
<td>Edwards</td>
<td>Moosomin</td>
<td>Bantam Boys</td>
<td>1000 Meter</td>
</tr>
</table></div>
JavaScript:
$(function() {
$("#dialog").dialog({
autoOpen:false,
maxWidth:600,
maxHeight: 500,
width: 500,
height: 450,
close: function(){
$('#addEnrolmentForm').trigger("reset");
$.ajax({
type: "GET",
url: "/Ajax/ajax_reset_event.php",
success: function(html){
$("#responce_event").html(html);
}
});
$.ajax({
type: "GET",
url: "/Ajax/ajax_reset_athlete.php",
success: function(html){
$("#responce_event2").html(html);
}
});
$.ajax({
type: "GET",
url: "/Ajax/ajax_reset_age_group.php",
success: function(html){
$("#responce_event0").html(html);
}
});
}
});
$("#addEnrolment").on("click", function()
{
$("#dialog").dialog("open");
});
$("#addEnrolmentForm").submit(function(e)
{
e.preventDefault();
var postData = jQuery(this).serialize();
$("#dialog").dialog("close")
$.ajax({
type: "POST",
url: "AddEnrolment.php",
dataType: 'json',
data: postData,
success: function(data){
alert(data);
//alert("success");
}
});
});
$('[id^="editEnrolment"]').submit(function(e)
{
e.preventDefault();
var editData = jQuery(this).serialize();
$.ajax({
type: "POST",
url: "/Get/GetEnrolment.php",
dataType: 'json',
data: editData,
success: function(data){
var form = document.forms['addEnrolmentForm'];
form.id.value=data.id;
form.school.value=data.school;
//alert(data.school);
//alert(form.school.value);
change_category2(data.school);
$.ajax({
type: "POST",
url: "/Get/GetEnrolment.php",
dataType: 'json',
data: editData,
success: function(data){
form.agegrp.value=data.agegrp;
// alert(data.agegrp);
// alert(form.agegrp.value);
change_category(data.agegrp);
$.ajax({
type: "POST",
url: "/Get/GetEnrolment.php",
dataType: 'json',
data: editData,
success: function(data){
form.event.value=data.event;
// alert(data.event);
// alert(form.event.value);
form.athlete.value=data.athlete;
// alert(data.athlete);
// alert(form.athlete.value);
}});
}});
}
});
$("#dialog").dialog("open");
});
})
function change_category(id)
{
$.ajax({
type: "GET",
url: "/Ajax/ajax_get_event.php?age_group_name="+id,
data: id,
success: function(html){
$("#responce_event").html(html);
}
});
var school = document.getElementById("school").value;
$.ajax({
type: "GET",
url: "/Ajax/ajax_get_athlete.php?age_group_name="+id+"&school_name="+school,
data: id,
success: function(html){
$("#responce_event2").html(html);
}
});
}
function change_category2(id)
{
$.ajax({
type: "GET",
url: "/Ajax/ajax_get_age_group.php",
success: function(html){
$("#responce_event0").html(html);
}
});
$.ajax({
type: "GET",
url: "/Ajax/ajax_reset_event.php",
success: function(html){
$("#responce_event").html(html);
}
});
$.ajax({
type: "GET",
url: "/Ajax/ajax_reset_athlete.php",
success: function(html){
$("#responce_event2").html(html);
}
});
}
获取注册返回以下内容:
ajax_get_athlete
<select name="athlete">
<option value='--' >Select An Option:</option>
<option value="81">Mark Edwards </option>
<select/>
ajax_get_age_group
<select name='agegrp' onchange='change_category(this.value);'>
<option value='--' >Select An Option:</option>
<option value='Bantam Boys' > Bantam Boys</option>
<option value='Bantam Girls' > Bantam Girls</option>
</select>
ajax_get_events
<select name='event' >
<option value='--' >Select An Option:</option>
<option value='1000 Meter'>1000 Meter </option>
<select/>
最佳答案
我认为您在应该在文档就绪处理程序中的代码中犯了一个错误。
你用过
$(function() {
// Code
});
据我所知，它还没有绑定(bind)到准备好的文档。
尝试
$(document).ready(function() {
// Code
});
代替。这将在所有HTML加载完毕后进行绑定(bind)，这应该可以帮助您开展业务
关于javascript - 使用ajax和jQuery自动填写表单，但有时只能工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21038327/