Hello Everyone,

Below is the working code, that I just coded for you guys to understand in a easier way:

<html>
<head>
<script type="text/javascript">

function updateTotal()
{
var sundayTotal = Number(document.getElementById('sunday').value);
var mondayTotal = Number(document.getElementById('monday').value);

document.getElementById('total').value = sundayTotal + mondayTotal;

}
</script>
</head>
<body>

Sunday Duration: <input type="text" id="sunday" onkeyup="updateTotal()">
Monday Duration: <input type="text" id="monday" onkeyup="updateTotal()">

Total Duration: <input type="text" id="total">

</body>
</html>

I want to work on the same lines in ASP.NET except, instead of input I would want to use asp:textbox.

Well, I know this isn't a big deal. But, since this is the first time I am working with JavaScripts in ASP.NET. I find it tough to figure out.

It would be great, if you guys could help me out in this regard.

I look forward to hearing from you.

Regards,
tHegaMe

just go to your page load event of your page then you are going to add this javascript events to your asp.net texbox controls as follows:

nameofyourTextBox.attributes.add("onkeyup","updateTotal();");

just go to your page load event of your page then you are going to add this javascript events to your asp.net texbox controls as follows:

nameofyourTextBox.attributes.add("onkeyup","updateTotal();");

Hi Serkan,

I did try doing what you asked me up. But it did not work (for some reason)

I guess, I am going wrong in the aspx page:

Example of whats there in my aspx pg:

<asp:TextBox runat="server" ID="monday" onkeyup="TextChanged" />

 function TextChanged()    {

var monday = Number(document.getElementById('monday').value);

}

Code Behind: In the Page Load

monday.Attributes.Add("onkeyup", "TextChanged();");

I look forward to hearing from you.

Thank you.

--tHegaMe

remove onkeyup from this section
asp:TextBox runat="server" ID="monday" onkeyup="TextChanged" />
it should be only added from code behind and during page load event. you are trying to add the same thing twice.

remove onkeyup from this section
asp:TextBox runat="server" ID="monday" onkeyup="TextChanged" />
it should be only added from code behind and during page load event. you are trying to add the same thing twice.

Thank you for the prompt response.

But, something is going wrong which I am not able to figure out. I mean even after doing changes as per your suggestion, it doesn't work. Is the runat="server" an issue?

Thank you,
--tHegaMe

mhm the problem is this, i didnt look at your javascript code, when a server control is rendered to a browser, its id changes. you can either pass the generated id from code as yourcontrolname.ClientID or you can bind it in the .aspx page
<%= yourcontrolname.ClientID %>
if you cant do with your info, post your whole page here with code behind, i will post you back replacing the values.

Thank you for the concern.

.aspx page

<td>
 <asp:TextBox Width="30px" runat="server" ID="timeDur_Sat"  />
 <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" TargetControlID="timeDur_Sat"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />
</td>
<td>
    <asp:TextBox Width="30px" runat="server" ID="timeDur_Sun"   />
     <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" TargetControlID="timeDur_Sun"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />
</td>
<td>
    <asp:TextBox Width="30px" runat="server"  ID="timeDur_Mon"  />
     <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender3" TargetControlID="timeDur_Mon"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />                                        
</td>
<td>
    <asp:TextBox Width="30px" runat="server" ID="timeDur_Tues"  />
     <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" TargetControlID="timeDur_Tues"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />
</td>
<td>
    <asp:TextBox Width="30px" runat="server" ID="timeDur_Wed"   />
     <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender5" TargetControlID="timeDur_Wed"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />
</td>
<td>
    <asp:TextBox Width="30px" runat="server" ID="timeDur_Thurs" />
     <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender6" TargetControlID="timeDur_Thurs"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />
</td>
<td>
    <asp:TextBox Width="30px" runat="server" ID="timeDur_Fri" />
     <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender7" TargetControlID="timeDur_Fri"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />
</td>

Code Behind:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            filterDate.Text = System.DateTime.Now.Date.ToString().Substring(0, System.DateTime.Now.Date.ToString().IndexOf(" "));
        }
            timeDur_Sat.Attributes.Add("OnKeyUp", "TextChanged();");
            timeDur_Sun.Attributes.Add("OnKeyUp", "TextChanged();");
            timeDur_Mon.Attributes.Add("OnKeyUp", "TextChanged();");
            timeDur_Tues.Attributes.Add("OnKeyUp", "TextChanged();");
            timeDur_Wed.Attributes.Add("OnKeyUp", "TextChanged();");
            timeDur_Thurs.Attributes.Add("OnKeyUp", "TextChanged();");
            timeDur_Fri.Attributes.Add("OnKeyUp", "TextChanged();");
        
    }

I look forward to hearing from you.

Once again, thank you for all your time and concern.
--tHegaMe

Thank you for the concern.

.aspx page

<td>
 <asp:TextBox Width="30px" runat="server" ID="timeDur_Sat"  />
 <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" TargetControlID="timeDur_Sat"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />
</td>
<td>
    <asp:TextBox Width="30px" runat="server" ID="timeDur_Sun"   />
     <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" TargetControlID="timeDur_Sun"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />
</td>
<td>
    <asp:TextBox Width="30px" runat="server"  ID="timeDur_Mon"  />
     <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender3" TargetControlID="timeDur_Mon"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />                                        
</td>
<td>
    <asp:TextBox Width="30px" runat="server" ID="timeDur_Tues"  />
     <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" TargetControlID="timeDur_Tues"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />
</td>
<td>
    <asp:TextBox Width="30px" runat="server" ID="timeDur_Wed"   />
     <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender5" TargetControlID="timeDur_Wed"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />
</td>
<td>
    <asp:TextBox Width="30px" runat="server" ID="timeDur_Thurs" />
     <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender6" TargetControlID="timeDur_Thurs"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />
</td>
<td>
    <asp:TextBox Width="30px" runat="server" ID="timeDur_Fri" />
     <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender7" TargetControlID="timeDur_Fri"
        runat="server" FilterMode="ValidChars" ValidChars=".1234567890" />
</td>

Code Behind:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            filterDate.Text = System.DateTime.Now.Date.ToString().Substring(0, System.DateTime.Now.Date.ToString().IndexOf(" "));
        }
            timeDur_Sat.Attributes.Add("OnKeyUp", "TextChanged();");
            timeDur_Sun.Attributes.Add("OnKeyUp", "TextChanged();");
            timeDur_Mon.Attributes.Add("OnKeyUp", "TextChanged();");
            timeDur_Tues.Attributes.Add("OnKeyUp", "TextChanged();");
            timeDur_Wed.Attributes.Add("OnKeyUp", "TextChanged();");
            timeDur_Thurs.Attributes.Add("OnKeyUp", "TextChanged();");
            timeDur_Fri.Attributes.Add("OnKeyUp", "TextChanged();");
        
    }

I look forward to hearing from you.

Once again, thank you for all your time and concern.
--tHegaMe

@serkan

I figured out, what you were trying to say.

That was of great help to me.

Thanks a lot for your time and concern.

--tHegaMe

i am glad that you figured it out but for future visitors let me show what must be modified :

<asp:TextBox runat="server" ID="monday" onkeyup="TextChanged" />

 function TextChanged()    {

var monday = Number(document.getElementById('monday').value);

}

this does not work because javascript engine cant find 'monday' element because textbox is rendered differently, the solution is :

<asp:TextBox runat="server" ID="monday" onkeyup="TextChanged" />

 function TextChanged()    {

var monday = Number(document.getElementById('<%= monday.ClientID %>').value);

}

i am lazy to show the code behind approach, verbally, you need to pass clientID of textbox to javascript as a parameter.

Hi Serkan,

Quick Q. How do we get the value from the Client Side in the Code Pg.
I mean, I want to store this total value (sunday+monday) on the client side, once a button is hit.

I look forward to hearing from you.

Thank you,
--tHegaMe

instead of client-side use viewstate which is more secure, or you can write to cookies of the user, which is not hundred percent sure as user might have disabled them. search google with using viewstate for better understanding, the snytax will be ViewState["variableName"] = some string then when you get it from view state just cast it to that type ViewState["variableName"].ToString()
and please mark this thread as solved which is already solved.

Hey Serkan,

Thank you. I by mistake hit the mark as Unsolved, my mistake.

Anyways, once again thanks for your time and concern.

--tHegaMe

Hi Serkan,

Quick Q, if I would want to use a Label & textbox using javascript for multiplication, for example.

label.text=54;

label * monday in the previous example.

How do we go about with this?

Thanks.
--tHegaMe

the important thing is your goal, if you dont want to consume server resources javascript is a good thing. if all you care is nifty user interface then you can download ajax extentions and use update panel to do such stuff, the page does not post back to server, does not flush, but the operation take place in the server. i would use update panel control, instead of pure javascript(which can be modifiable by hackers).

This question has already been answered. Start a new discussion instead.