Attributes.Add Onclick Event in c# code behind

Question

Hello all.

I have two textboxes tbxProdAc & txtbxHowMany. I would like to write a bit of code in the code behind so that when I enter text in one, any text that may have been in the other is removed.

How would one go about achieving this and in which event should I place it?

I have tried to use

txtbxHowMany.Attributes.Add("onclick", "document.getElementById('tbxProdAC').innerText='';");

in the page load event but twithout success...should this be in the pre_init?

As you can probalby tell, complete novice at work here.

Answer 1

If you use the design view, you can just double click your textboxes and it will create these methods for you:

    private void tbxProdAc_TextChanged(object sender, EventArgs e)
    {

    }

    private void txtbxHowMany_TextChanged(object sender, EventArgs e)
    {

    }

then you just have to edit them like this:

     private void tbxProdAc_TextChanged(object sender, EventArgs e)
    {
        txtbxHowMany.Clear();
    }

    private void txtbxHowMany_TextChanged(object sender, EventArgs e)
    {
        tbxProdAc.Clear();
    }

Answer 2

First off, make sure that when the page has been generated that the ID is still "tbxProdAC" if this is a .Net control, the ID would have been changed. In this case you can use a class.

Try the following, - This uses JQuery - you will need to include that

txtbxHowMany.Attributes.Add("onclick", "$('#tbxProdAC').val('');");

Add the following to the Head Section of your page.

 <script type="text/javascript" src="jquery.js"></script>

And you can get the JQuery.Js file from here: http://docs.jquery.com/Downloading%5FjQuery#Download%5FjQuery

And Why: http://stackoverflow.com/questions/308751/why-use-jquery

Answer 3

ASP.NET Changes the ID's of the generated controls, so probably your tbxProdAc will have its id changed to something else. You need to run the app once, view source and know the Id of your control and then replace the "tbxProdAc" with the new Id in your

txtbxHowMany.Attributes.Add("onclick", "document.getElementById('tbxProdAC').innerText='';");

and yes it will work onLoad.

Answer 4

Hi,

main issue here is that when your control is inside another control (for example a grid) asp.net prefixes the id of your control to keep the id of the control unique, for example the id won't be txbProdAc but it will be Gridview1_txbProdAc or even this: Panel1_Panel2_gridview1_txProdAc.

if you want to know in code behind which id asp.net will 'give' or 'rename' your control, yo can use the .ClientID property: txtProdAc.ClientID will give you the id you have to use from javascript/jquery.

if you ever place your txbProdAc within another control it will still work because the .ClientID function will always give you the right id for the control in client script.

Michel

Answer 5

To expand on Michel's answer, you're event adding should be correct but you need to set the id selector differently as ASP.NET changes the id that gets sent to the client:

txtbxHowMany.Attributes.Add("onclick", string.Format("document.getElementById('{0}').innerText='';", tbxProdAC.ClientID));