I have 3 texboxes ( Name, Age, Address) and 1 checkbox (for email selection).
Name is dropdown while Age and Address is normal textbox.
On the dropdown change I want do:
when i choose Name it will autoload data for textbox Age and Address.
I already can do the combobox but for the auto load data in other textboxes is failed.
This is my code
View
@using (Html.BeginForm("Save", "Home", FormMethod.Post))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-inline">
<div class="form-group">
<label for="st" class="mr-sm-2">Platform:</label>
<input type="text" id="txtPlatform" name="CustomerName" onchange="get_sbu()"/>
<input type="hidden" id="hfCustomer" name="CustomerId" />
</div>
<div class="form-group">
<label for="st" class="mr-sm-2">PH Number:</label>
@Html.TextBoxFor(m => m.pNum, new { id = "task" })
</div>
<label for="st" class="mr-sm-2">Base Type:</label>
@Html.TextBoxFor(m => m.bType, new { id = "task2" })
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
}
Script for autocomplete
<script type="text/javascript">
$(function () {
$("#txtPlatform").autocomplete({
source: function (request, response) {
$.ajax({
url: '/Home/AutoComplete/',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data, function (item) {
return item;
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#hfCustomer").val(i.item.val);
},
minLength: 0
}).focus(function () {
$(this).autocomplete("search");
});
});
</script>
Script for auto load data into textbox
<script type="text/javascript">
function get_sbu() {
var id = $('#txtPlatform').find(":selected").attr('value');
$.ajax({
type: "POST",
url:"@Url.Action("GetData", "Home")",
dataType: "json",
data: "id=" + id,
success: function (data) {
if (data.length > 0) {
$('#task').val(data[0].pNum);
$('#task2').val(data[0].bType);
}
}
});
}
</script>
Controller
//GET
public ActionResult ViewList()
{
List<SelectListItem> items = new List<SelectListItem>();
var selectItems = db.tblPlatformLists.ToList();
foreach (var item in selectItems)
{
items.Add(new SelectListItem
{
Text = item.list_id.ToString(),
Value = item.pName
});
}
TempData["platform"] = items;
ViewBag.platform = db.tblPlatformLists.Where(z=> z.iSelected == true).ToList();
PlatformList PlatformList = new PlatformList();
PlatformList.listPlatform = db.tblPlatformLists.Where(x => x.iSelected == true).ToList();
ViewBag.platformlist = PlatformList.listPlatform;
return View(PlatformList);
}
[HttpPost]
public JsonResult AutoComplete(string prefix)
{
var platforms = (from platform in db.tblPlatformLists
where platform.pName.StartsWith(prefix)
select new
{
label = platform.pName,
val = platform.list_id
}).ToList();
return Json(platforms);
}
///AUTOLOAD INTO TEXTBOX
public JsonResult GetData(int id)
{
List<PlatformList> plist = populatePlatform();
return Json(plist.Where(p => p.list_id == id));
}
private static List<PlatformList> populatePlatform()
{
order_15GEntities db = new order_15GEntities();
List<PlatformList> list = new List<PlatformList>();
var platform = db.tblPlatformLists.ToList();
foreach (var item in platform)
{
list.Add(new PlatformList
{
list_id = item.list_id,
pName = item.pName,
pNum = item.pNum,
bType = item.bType
});
}
return list;
}