Hi,
I have Two text boxes which are hide when it's in a list. After Clicking Edit, I would like to show the text boxes visible.
From the below code when I say the text box "visible" it displays accordingly. But I need to show the text boxes when it's in a edit mode.
Please help me how to visible/show when i click the button.
- show the text boxes after i click the "Edit" button
- hide the text boxes after I click the "save" button.
Thanks for reading and help would be great.
@model IEnumerable<NameList>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function ShowEdit(par) {
$("#divBDate-" + par).attr("class", "hide");
$("#txtBDate-" + par).attr("class", "visible");
$("#divEDate-" + par).attr("class", "hide");
$("#txtEDate-" + par).attr("class", "visible");
$("#btnEdit-" + par).attr("class", "hide");
$("#btnSave-" + par).attr("class", "visible");
}
function SaveEdit(par) {
$("#divBDate-" + par).attr("class", "visible");
$("#txtBDate-" + par).attr("class", "hide");
$("#divEDate-" + par).attr("class", "visible");
$("#txtEDate-" + par).attr("class", "hide");
$("#btnEdit-" + par).attr("class", "visible");
$("#btnSave-" + par).attr("class", "hide");
var -bDate = $("#txtBDate-" + par).val();
var -dDate = $("#txtEDate-" + par).val();
var url = '@Url.Action("GetUser", "Cust")';
$.post(url, { RoleId: par, userId: -userId, startDate: -startDate },
function (data) {
$("#divResult").html(data);
});
}
</script>
<div id=divResult">
<table class="table">
<tr>
<th>Name</th>
<th>Area</th>
<th>Beginning Date</th>
<th>End Date</th>
</tr>
@foreach (NamesList n in Model)
{
<tr>
<td> @n.Name </td>
<td>@n.Area </td>
<td>
<div id="
[email protected]" class="visible">@n.BDate</div>
<input id="
[email protected] type=" text" class="hide"
[email protected] />
</td>
<td>
<div id="
[email protected]" class="visible">@n.EndDate</div>
<input id="
[email protected] type=" text" class="hide"
[email protected] />
</td>
<td>
<button id="
[email protected]" class="visible" onclick="ShowEdit(@n.ID); return false;">Edit</button>
<button id="
[email protected]" class="hide" onclick="SaveEdit(@n.ID); return false;">Save</button>
</td>
</tr>
}
</table>
</div>