如何解决如何在Ajax中使用下拉菜单自动填写表格？
我有一个HTML表单：
@using (Html.BeginForm("UpdateServiceClientInformation","contracts",new { id = Model.Id },FormMethod.Post,new { role = "form" }))
{
<div class="row">
<div class="col-sm-6">
@if (Model.AvailableClients.Count > 0)
{
<div class="form-group">
@Html.LabelFor(m => m.AvailableClients)
@{
Model.AvailableClients.Insert(0,new SelectListItem
{
Text = "None",Value = "0"
});
}
@Html.DropDownListFor(m => m.AvailableClientId,Model.AvailableClients,new { @class = "form-control" })
</div>
}
</div>
</div>
<div id="clientInformationInputsWrapper">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
@Html.LabelFor(m => m.ClientForm.FirstName)
@Html.TextBoxFor(m => m.ClientForm.FirstName,new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.ClientForm.FirstName,"",new { @class = "text-danger" })
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
@Html.LabelFor(m => m.ClientForm.LastName)
@Html.TextBoxFor(m => m.ClientForm.LastName,new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.ClientForm.LastName,new { @class = "text-danger" })
</div>
</div>
</div>
<input type="submit" class="btn btn-sm btn-primary pull-right" value="Save Changes" />
}
它包含可用客户端的下拉菜单。现在我需要的是，当我选择下拉菜单时，表单必须为“自动填充”。我正在使用Ajax：
$("#AvailableClientId").on("change",function () {
var serviceCliendId = $(this).val();
if (serviceCliendId == "0") {
$("#clientInformationInputsWrapper :input").val("");
} else {
$.ajax({
url: "/ServiceClient/Details/" + serviceCliendId,type: "GET",success: function (resp) {
$("#ClientForm.FirstName").val(resp.FirstName);
$("#ClientForm.LastName").val(resp.LastName);
}
})
}
})
虽然使用此ajax方法可以访问API，但表单值没有变化。我该如何解决？
解决方法
首先通过放置console.log来检查change事件是否正在生效，然后从那里还检查serviceCliendId和ajax响应。
$("#AvailableClientId").on("change",function () {
console.log('Change Event Fired')
var serviceCliendId = $(this).val();
console.log('serviceCliendId: ' + serviceCliendId)
if (serviceCliendId == "0") {
$("#clientInformationInputsWrapper :input").val("");
} else {
$.ajax({
url: "/ServiceClient/Details/" + serviceCliendId,type: "GET",success: function (resp) {
console.log('resp: ' + JSON.stringify(resp))
$("#ClientForm.FirstName").val(resp.FirstName);
$("#ClientForm.LastName").val(resp.LastName);
}
})
}
})
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。