Looking for a way to format a textbox within a gridview using JavaScript? Take a look at how the gridview columns are set up:
<Columns>
<asp:TemplateField>
<ItemTemplate><asp:ImageButton runat="server" id="imgbtnEnterAmt" ImageUrl="~/Images/bullet_list.png" Width="12px" Height="12px" OnClick="imgbtnEnterAmt_Click" /> </ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="particulars" HeaderText="HOSPITAL CHARGES/ PARTICULARS" />
<asp:TemplateField HeaderText="ACTUAL">
<%--<ItemTemplate><asp:TextBox runat="server" ID="txt_ipamt" OnTextChanged="txt_ipamt_TextChanged" AutoPostBack="true"></asp:TextBox> </ItemTemplate> --%>
<ItemTemplate><input type="text" id="txth_ipamt" onblur="format_amt()" /> </ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="deductions" HeaderText="DEDUCTION/ PHILHEALTH" />
</Columns>
In order to execute proper formatting of the textbox, here is the associated JavaScript function:
function format_amt()
{
var str_amt = document.getElementById('txth_ipamt').value;
var n = parseFloat(str_amt).toFixed(2);
document.getElementById('txth_ipamt').value = n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
An issue arises when adding more rows as only the first textbox gets formatted upon blur. Additionally, triggering the blur event again results in double formatting and incorrect output.