使用 ajax 和 jQuery 自动填写表格，但有时只能工作
Posted
技术标签:
【中文标题】使用 ajax 和 jQuery 自动填写表格，但有时只能工作【英文标题】：Using ajax and jQuery to auto fill in a form but its only working sometimes 【发布时间】：2014-01-29 01:44:36 【问题描述】：我试图让“添加注册”表单在单击编辑按钮时自动填写，它有时有效，有时无效，获取注册总是返回正确的结果，但 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);
);
Get Enrollment 返回：
"id":9,"school":"Moosomin","agegrp":"Bantam Boys","event":"1000 Meter","athlete":"81"
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/>
【问题讨论】：
【参考方案1】：我认为您在文档就绪处理程序中的代码有误。
你用过
$(function()
// Code
);
据我所知，这并没有绑定到准备好的文档。
试试
$(document).ready(function()
// Code
);
相反。这会在所有 HTML 加载完成后进行绑定，应该可以让您开展业务
【讨论】：
以上是关于使用 ajax 和 jQuery 自动填写表格，但有时只能工作的主要内容，如果未能解决你的问题，请参考以下文章
如何在 laravel 中使用 jquery 自动填写 PayPal Guest Checkout 表单