Is it possible to set the value of a control whose control id is saved in a variable. The code looks like
var textmonth = $(this).parent().find('input[id$=txtmonths]').attr("id");
I’m trying to do something like this
textmonth.val("Only numbers");
Is it really possible?
The demo code is given below:
The html code is:
<div id="pagecontent">
<h1>
Collection Master</h1>
<table cellpadding="1" cellspacing="2" style="padding-left:40px; font-size:medium; padding-right:20px"
width="100%" border="0">
<tr>
<td colspan="2" style="width: 100%">
<asp:GridView ID="grdFees" runat="server" AllowPaging="false" CssClass="Grid" AutoGenerateColumns="false"><Columns>
<asp:TemplateField HeaderText="SI NO" HeaderStyle-HorizontalAlign="center"
ItemStyle-HorizontalAlign="center" ItemStyle-Width="3%">
<ItemTemplate>
<%# Container.DataItemIndex + 1%>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Sub Category" DataField="SUB_CAT" ItemStyle-CssClass="subcat" ItemStyle-Width="15%"
HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" />
<asp:BoundField HeaderText="Fees Paid (Months,Quarters)" DataField="PAID_FEES" ItemStyle-Width="15%"
HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" />
<asp:BoundField HeaderText="Pending Fees" DataField="PEND_FEES" ItemStyle-Width="5%"
HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" />
<asp:TemplateField HeaderText="Current Payment" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center"
ItemStyle-Width="10%">
<ItemTemplate>
<asp:TextBox ID="txtmonths" Width="80%" runat="server"
CssClass="Textbox"></asp:TextBox>
<a href="#" class="openModalLink">
<img style="vertical-align: middle; border: none" width="9%" alt=""
src="../Images/ico_map.gif" id="imgmap" class="zoom"/></a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
<div id="overlay" class="web_dialog_overlay">
</div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title" style="height: 16px">
Month Chooser</td>
<td class="web_dialog_title align_right" style="height: 16px">
<a href="#" id="btnClose">Close</a>
</td>
</tr>
<tr>
<td colspan="2">
<asp:GridView ID="grdpopup" runat="server" TabIndex="5">
<Columns>
<asp:TemplateField HeaderText="Select" HeaderStyle-HorizontalAlign="center"
ItemStyle-HorizontalAlign="center" ItemStyle-Width="2%">
<ItemTemplate>
<asp:CheckBox ID="chkselect" runat="server" CssClass="checkbox"
Width="15px" Checked="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Term" DataField="TERM" ItemStyle-Width="35%" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="Left" ItemStyle-CssClass="term" />
<asp:BoundField HeaderText="Fee Amt." DataField="FEE_AMT" ItemStyle-Width="35%" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" ItemStyle-CssClass="feeamt" />
</Columns>
</asp:GridView>
</td></tr>
<tr>
<td rowspan="2" colspan="2" style="text-align: center; vertical-align:middle">
<input id="btnSubmit1" type="button" value="Submit" class="button" />
</td>
</tr>
</table>
</div>
</div>
The JS code is
<script src="../Jquery Autocomplete/jquery-1.7.2.min.js" type="text/javascript">
</script>
<script src="../Jquery Autocomplete/jquery.json-2.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function()
{
var textmonth;
var textamount;
$(".openModalLink").click(function()
{
textmonth = $(this).parent().find('input[id$=txtmonths]').attr("id");
textamount = $(this).parent().parent().find('input[id$=txtAmount]').attr("id");
ShowDialog();
});
$("#btnClose").click(function(e)
{
textmonth = null;
textamount = null;
HideDialog();
});
$('#btnSubmit1').click(function(e)
{
var month = null;
var amount = 0;
$(':checkbox:checked').each(function(i)
{
var amt=$(this).closest("tr").find(".feeamt").text();
if(amt != '')
{
amount = amount + parseInt(amt,10);
if(month == null)
{
month = $(this).closest("tr").find(".term").text();
}
else
{
month = month + ',' + $(this).closest("tr").find(".term").text();
}
}
});
$("#"+textamount).val(amount);
$("#"+textmonth).val(month);
HideDialog();
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal) {
$("#overlay").unbind("click");
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>
Then Use That ID With Jquery Selector by concating the ID Selector