I have a gridview where one column is an "Add" / "Remove" asp:button which I would like to toggle the text when clicked with either jquery or javascript. I have not been able to locate a good example for this.
Here is my markup for the template field:
<asp:TemplateField HeaderText="ADD <br /> REMOVE" HeaderStyle-ForeColor="White" >
<ItemTemplate >
<asp:Button id="btnBuy" runat="server" Width="50px" Height="15px" BorderStyle="Solid" Text="ADD" Font-Size="7pt" BackColor="#FFFF80" />
</ItemTemplate>
<HeaderStyle Width="7%" />
<ItemStyle CssClass="sessionItems" VerticalAlign="Middle" HorizontalAlign="Center" />
</asp:TemplateField>
Here is some jquery but it doesn't work as I expect this is more for a single button:
$('#btnBuy').click(function()
{
if ($(this).text() == "ADD")
{
$(this).text("REMOVE");
} else {
$(this).text("ADD");
}
})
Please advise how to correctly toggle the gridview button text?
Thank you, Jim
Here is my checkbox and it does not post back:
<asp:TemplateField HeaderText="Select <br /> Files" HeaderStyle-ForeColor="White" >
<ItemTemplate >
<asp:CheckBox ID="chkSelectVideo" runat="server" OnClick="checkboxClicked(this)" ToolTip="Select file for download"
Enabled='<%# Eval("SORD_EnableSelectionCheckBox") %>' Checked='<%# Eval("SORD_SelectedForDownloadFlag") %>' />
</ItemTemplate>
<HeaderStyle Width="6%" />
<ItemStyle VerticalAlign="Middle" HorizontalAlign="Center" />
</asp:TemplateField>
One thing what you could try is in the OnClientClick event of the button, call a function as shown below
OnClientClick="SomeJSFunction(this)"
In this way you get access to your button control in the JS Function, so now you can modify the text of the button in the function as shown below:
function SomeJSFunction(source) {
if (source.value === 'Add') {
source.value = 'Remove';
} else if (source.value === 'Remove') {
source.value = 'Add';
}
}