How to use a javascript variable in the OnClientClick attribute of a ASP.NET control

Question

I have a single textbox txtUser where a user can input a username, and there is a Delete button beside this textbox. I am providing a delete confirmation using the OnClientClick attribute of the <asp:button>.

The message is: Are you sure you want to delete this user? This works.

I want to change this message to Are you sure you want to delete 'username'? by getting the value of the username from the textbox using the GetElementByID("<%= txtUser.ClientID %>") and storing it in a variable user

<script type="text/javascript">
var username = document.GetElementByID(<%= txtUser.ClientID %>")
</script>

Now I want to use this username variable in the OnClientClick call. I tried something like this, but it didn't work:

    <asp:Button ID="BtnDelete" runat="server" 
OnClientClick="return confirm('Are you sure you want delete "+username+"');">
Delete</asp:Button>

Steven V · Accepted Answer · 2013-05-10 03:20:20Z

2

Almost there...

<script type="text/javascript">
var username = document.getElementByID("<%= txtUser.ClientID %>").value;
</script>

then

<asp:Button ID="BtnDelete" runat="server" OnClientClick="return confirm('Are you sure you want delete '+username+'?');">Delete</asp:Button>

Should do it. You need to get the value of the text box, and then append the username to the are you sure string, not append it to the ASP control.

As a word of possible warning, if attempt to get the value of the textbox and assign it to username before the textbox is rendered, it will result in an error. Make sure the assignment of username is after the textbox in the markup, or use something like window.onload.

edited May 10, 2013 at 3:20

answered May 10, 2013 at 3:15

Steven V

16.7k3 gold badges66 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Animesh D Over a year ago

I made sure the script tag is after textbox in the markup, but I am seeing the alert message as are you sure you want to delete undefined?

Steven V Over a year ago

I'd make sure txtUser.ClientID is returning the same ID as the <input type="text" ... has in the source code

Animesh D Over a year ago

I was getting object doesn't support GetElementById all along when I checked in IE JS Debugger. It turned out to be as simple as writing GetElementById instead of getElementById. Thanks!

Kiarash · Accepted Answer · 2013-05-10 04:15:48Z

1

This is a bit clearer for the next developer who wants to look at what you did

<script type="text/javascript">
function getUserName()
{
 var userTextBoxId ='<%= txtUser.ClientID %>'; 
 return document.getElementByID(userTextBoxId).value;
}
</script>

Then

<asp:Button ID="BtnDelete" runat="server" OnClientClick="return confirm('Are you sure you want delete ' + getUserName() + '?');">Delete</asp:Button>

answered May 10, 2013 at 4:15

Kiarash

1,9592 gold badges18 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to use a javascript variable in the OnClientClick attribute of a ASP.NET control

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related