How to write Javascript coding in C# code behind?

Question

i am creating textboxes dynamically so how to call below javascript function for textbox 'onchange' event?

<script type="text/javascript">
    debugger;
    function myFunction() {
        var btn = document.getElementById('<%= temp.ClientID%>').value;
        var btntemp = document.getElementById('<%= txttemp2.ClientID%>').value;
        var val = parseInt(btn) + parseInt(btntemp);
        document.getElementById('<%= TextBox1.ClientID%>').value = val;
    }        
</script>
<asp:TextBox ID="temp" runat="server" onchange="myFunction()"></asp:TextBox>
   <asp:TextBox ID="txttemp2" runat="server" onchange="myFunction()"></asp:TextBox>

Here iam creating textboxex dynamically.

Table table = (Table)this.Page.FindControl("PlaceHolder1").FindControl("Table1");
for (int i = 0; i < rowsCount; i++)
 {
   for (int j = 0; j < colsCount; j++)
    {
     TextBox tb = (TextBox)table.Rows[i + 1].Cells[j].FindControl("TextBoxRow_" + i + "Col_" + j);
     tb.Text = Request.Form["TextBoxRow_" + i + "Col_" + j];

here iam getting first column's textbox value

else if (j == 2)
 {
   int quantityText;
   TextBox quantity = (TextBox)table.Rows[i +1].Cells[j].FindControl("TextBoxRow_" + i + "Col_" + j);

here iam getting second column's textboxes value

else if (j == 3)
  {
    double rateText;
    TextBox rate = (TextBox)table.Rows[i + 1].Cells[j].FindControl("TextBoxRow_" + i + "Col_" + j);

here iam generating textboxes dynamically.

private void GenerateTable(int rowsCount)
 {
  Table table = new Table();
            table.ID = "Table1";
            PlaceHolder1.Controls.Add(table);
           for (int i = 0; i < rowsCount; i++)
            {
                TableRow row = new TableRow();
                row.ID = "Row_" + i;
                else if (j < colsCount - 1)
                    {
                        TableCell cell = new TableCell();
                        TextBox tb = new TextBox();
                      tb.ID = "TextBoxRow_" + i + "Col_" + j;
                      cell.Controls.Add(tb);
                     row.Cells.Add(cell);
                    }

Why you need to call js function in code behind.You can do it using scriptmanager but doesnt work that reilably. — AkshayJ
– AkshayJ, Commented Jun 2, 2015 at 5:16
i want to calculate two dynamically created textboxes values. — Ashwini
– Ashwini, Commented Jun 2, 2015 at 5:18
How are you creating your text boxes dynamically, show that so we have a better understanding of what you are trying to do? You can't call javascript functions from the server side if that is what you are trying to do. — Jon P
– Jon P, Commented Jun 2, 2015 at 5:28
TextBox tb = (TextBox)table.Rows[i + 1].Cells[j].FindControl("TextBoxRow_" + i + "Col_" + j); looks like it is finding an existing text box not creating one. — Jon P
– Jon P, Commented Jun 2, 2015 at 5:43
oops ,yeah its for inserting ..now I updeted at last plz check there — Ashwini
– Ashwini, Commented Jun 2, 2015 at 6:15

shreyansh · Accepted Answer · 2015-06-02 05:45:03Z

1

use this for calling javascript function in code behind

ClientScript.RegisterClientScriptBlock(myFunction(), "AlertMsg", "<script> 
                              alert('Inserted successfully');</script>", true)

edited Jun 2, 2015 at 5:45

answered Jun 2, 2015 at 5:21

shreyansh

1,6875 gold badges30 silver badges49 bronze badges

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

1 Comment

Ashwini Over a year ago

where is textbox onchange event?

Steve K · Accepted Answer · 2015-06-02 07:00:38Z

0

You need your script to have the runat="server" attribute if your textbox does. I think your script needs to be c# in order to work this way. You could rewrite your original function as:

<script runat="server">
    void textBox_Change(Object sender, EventArgs e) {
        TextBox1.Text = Int32.parse(temp.Text) +                      
            Int32.parse(txttemp2.Text)
    }
</script>
<asp:TextBox ID="temp" runat="server" ontextchanged="textBox_Change" autopostback="true"></asp:TextBox>
<asp:TextBox ID="txttemp2" runat="server" ontextchanged="textBox_Change" autopostback="true"></asp:TextBox>

Your handler attribute is also wrong. The event for changing the text in a TextBox control is ontextchange="" as shown in the code box above, and also requires autopostback="true" to be set... but it will only take effect when the user changes focus away from the TextBox control.

You can also use jQuery for a pure javascript handler:

$(document).on("change","#temp,#txttemp2",myFunction);

This will detect changes to your textboxes in the client and fire your method. Because it's a delegated handler, it will catch the events even if the items weren't created when you registered it originally. You could even set a class for your items so that you don't need to know their IDs:

 $(document).on("change",".waitingForChangeForMyFunction",myFunction);

And then when you generate your textboxes, just do:

TextBox tb = new TextBox();
tb.CssClass="waitingForChangeForMyFunction";

edited Jun 2, 2015 at 7:00

answered Jun 2, 2015 at 5:21

Steve K

4,9112 gold badges34 silver badges41 bronze badges

5 Comments

Ashwini Over a year ago

where to write this line of code in codebehind? because the textboxes creating in loop ..

Ashwini Over a year ago

and how to assign textbox id here

Steve K Over a year ago

Ashwini if you're using jQuery you can write that line of code anywhere, but I suggest writing it outside your loop. You can compile a list of ID's to pass to the selector in your loop, and then register the handler at the end.

Steve K Over a year ago

Updated for completeness.

Ashwini Over a year ago

actually i dnt have client side textboxes,i written above to show example..like this i want to get dynamically created textboxes ids.

Siamak Ferdos · Accepted Answer · 2015-06-02 08:06:01Z

0

you can use RegisterClientScriptBlock:

String scripts = "function myFunction(clientID) {
        var btn = document.getElementById('clientID').value;
        var btntemp = document.getElementById('clientID').value;
        var val = parseInt(btn) + parseInt(btntemp);
        document.getElementById('clientID').value = val;
    }     ";

ClientScript.RegisterClientScriptBlock(this.GetType(), 
               "CounterScript", scripts, true);    

for (int i = 0; i < rowsCount; i++)
 {
   for (int j = 0; j < colsCount; j++)
    {
     TextBox quantity = (TextBox)table.Rows[i +1].Cells[j].FindControl("TextBoxRow_" + i + "Col_" + j);

     quantity .Attributes.Add("onchange", "jsFunc('TextBoxRow_'" + i + "Col_" + j + "')");
    }

}

edited Jun 2, 2015 at 8:06

answered Jun 2, 2015 at 5:22

Siamak Ferdos

3,3096 gold badges35 silver badges60 bronze badges

10 Comments

Ashwini Over a year ago

where is textbox onchange property? where to assign textboxes ids?

Siamak Ferdos Over a year ago

Appended to code. your javascript should define a function that you use on TextBoxAttribute

Ashwini Over a year ago

I updated my code above plz check there and reply that related solution.

Siamak Ferdos Over a year ago

Well, what's the problem when you add event to every TextBox you want like example? rate .Attributes.Add("onchange", "jsFunc()");

Ashwini Over a year ago

but in javascript function how to get ids of these loop wise creating textboxes ids?

|

Ashwini · Accepted Answer · 2015-06-02 11:02:21Z

I got my answer successfully which is in below. script side have to write like below

    <script type="text/javascript">
             function myFunction() {
                 var btn = document.getElementById('<%= TextBox1.ClientID%>').value;
                 var sum = [0, 1, 2]
                 for (var j = 0; j <= btn; j++) {
                     var elements = document.getElementsByClassName("sum"+j);
                     for (var i = 0, length = elements.length; i < length; i++) {
                         if (elements[i].value) {
                             sum[0] = parseInt(elements[0].value);
                             sum[1] = parseInt(elements[1].value);
                             sum[2] = parseInt(elements[2].value);
                         }
                         elements[2].value = sum[0] * sum[1];
                     }
                 }
             }        
    </script>
</head>
<body>
    <form id="form1" runat="server">
<div style="display:none">
    <asp:HiddenField ID="HiddenField2" runat="server" />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </div> </form>
</body>
</html>

and while creating dynamically textboxes have to add class to which we have to get values and calculate it and then show the result

private void GenerateTable(int rowsCount)
        {
            //ContentPlaceHolder content = (ContentPlaceHolder)this.Master.FindControl("ContentPlaceHolder1");
            TextBox1.Text = rowsCount.ToString();
            Table table = new Table();
            table.ID = "Table1";
            PlaceHolder1.Controls.Add(table);
            for (int i = 0; i < rowsCount; i++)
            {
                TableRow row = new TableRow();
                row.ID = "Row_" + i;
for (int j = 0; j < colsCount; j++)
                {
if (j < colsCount - 1)
                    {
                        TableCell cell = new TableCell();
                        TextBox tb = new TextBox();
if (j == 2)
                        {
                            tb.ID = "TextBoxRow_" + i + "Col_" + j;
                            tb.CssClass = "sum"+i;
                            tb.Attributes.Add("onchange", "myFunction();");
                        }
                        else if (j == 3)
                        {
                            tb.ID = "TextBoxRow_" + i + "Col_" + j;
                            tb.CssClass = "sum"+i;
                            tb.Attributes.Add("onchange", "myFunction();");
                        }
                        else if (j == 4)
                        {
                            tb.ID = "TextBoxRow_" + i + "Col_" + j;
                            tb.ReadOnly = true;
                            tb.CssClass = "sum"+i;
                        }
                        cell.Controls.Add(tb);                       
                        row.Cells.Add(cell);
                    }
table.Rows.Add(row);
            }  
                SetPreviousData(rowsCount, colsCount);    
            rowsCount++;
            ViewState["RowsCount"] = rowsCount;
        }

Collectives™ on Stack Overflow

How to write Javascript coding in C# code behind?

4 Answers 4

1 Comment

5 Comments

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related