Want to use Web Control(asp:textbox) instead of HTML Control(input type=text)

Question

vigneshsr 0 Newbie Poster

15 Years Ago

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

asp.net html-css

2 Contributors
15 Replies
181 Views
3 Days Discussion Span
Latest Post 15 Years Ago Latest Post by serkan sendur

serkan sendur 821 Postaholic

15 Years Ago

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();");

serkan sendur 821 Postaholic

15 Years Ago

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.

serkan sendur 821 Postaholic

15 Years Ago

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.

serkan sendur 821 Postaholic

15 Years Ago

please mark this as saved.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

vigneshsr 0 Newbie Poster · Answer 1 · 2009-06-19T23:57:22+00:00

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

vigneshsr 0 Newbie Poster · Answer 2 · 2009-06-20T01:14:30+00:00

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

vigneshsr 0 Newbie Poster · Answer 3 · 2009-06-20T01:44:19+00:00

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

vigneshsr 0 Newbie Poster · Answer 4 · 2009-06-20T09:57:32+00:00

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

serkan sendur 821 Postaholic Banned Featured Poster · Answer 5 · 2009-06-20T20:23:16+00:00

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.

vigneshsr 0 Newbie Poster · Answer 6 · 2009-06-22T19:19:08+00:00

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

serkan sendur 821 Postaholic Banned Featured Poster · Answer 7 · 2009-06-22T19:56:08+00:00

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.

vigneshsr 0 Newbie Poster · Answer 8 · 2009-06-22T21:21:46+00:00

Hey Serkan,

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

Anyways, once again thanks for your time and concern.

--tHegaMe

serkan sendur 821 Postaholic Banned Featured Poster · Answer 9 · 2009-06-22T22:23:15+00:00

serkan sendur 821 Postaholic

15 Years Ago

you are welcome

vigneshsr 0 Newbie Poster · Answer 10 · 2009-06-22T23:33:37+00:00

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

serkan sendur 821 Postaholic Banned Featured Poster · Answer 11 · 2009-06-23T00:26:18+00:00

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).