?
Solved

Javascript - adding textbox values on an aspx page

Posted on 2007-08-06
24
Medium Priority
?
605 Views
Last Modified: 2008-01-09
I have a gridview that has twelve textboxes, one for each month, that the user enters dollar information for.  At the end of those is a textbox for total.  When it's originally populated the amounts are coming from the database and the sum calculated on the DB side.  I'm trying to figure out how to produce a javascript that will sum all of the boxes and change the value of the total box every time the user keys up on one of the month boxes.  I did something like this in ASP a million years ago but I'm confused about how to do it in .NET.  We're also using master pages so I'm lost as to how to even include the JS file where we'll store the script.  
0
Comment
Question by:stretch73
  • 13
  • 10
24 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 19639303
Untested example:

function calcTotal()
{
    var i = 0;
    var sum = 0;
    for (i = 0; i < 13; i++)
   {
       var txt = document.getElementById('TextBox' + i.toString());
       sum += parseFloat(txt.value);
   }
   var total = document.getElementById('Total');
   total.value = sum;
}

Bob
0
 
LVL 5

Expert Comment

by:rajups
ID: 19639362
Hi,
U can use the <Script src="your java script path" />  in the aspx file, which will include your JS file.

U can atatche the text changed event either from item teplate or from the code behind on "ItemDataBound" event.

All the Best,
Raju P S
0
 

Author Comment

by:stretch73
ID: 19639566
Okay, I have the function in a separate script like this (big ups Learned, this is way cooler than what I had):
function calcTotal()
{
    var i = 0;
    var sum = 0;
    for (i = 0; i < 13; i++)
   {
       var txt = document.getElementById('txtM' + i.toString() + 'Amt_add');
       sum += parseFloat(txt.value);
   }
   var total = document.getElementById('txtTotalExpense_add');
   total.value = sum;
}

I'm also adding the attribute in the rowdatabound event as such:

Dim txtM1Amt As TextBox = e.Row.Controls(4).FindControl("txtM1Amt")
 txtM1Amt.Attributes.Add("OnTextChanged", "calcTotal();")

I have this line in the master page being referenced by the page I'm on:

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

And that's where the trouble starts.  It blows up my CSS and throws a javascript error when I click 'Edit' in the gridview.  I know I'm close, what am I missing?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 96

Expert Comment

by:Bob Learned
ID: 19639629
txtM1Amt.Attributes("onKeyUp", "calcTotal();")

Bob
0
 

Author Comment

by:stretch73
ID: 19639713
Okay, it's really close.  Took out:

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

and added:

<link href="include/js_functions.js" type="text/javascript" />.

Changed "onTextChanged" to "onKeyUp".  Attribute is now getting added, I checked the source code, but now I'm getting an "object expected" Javascript error in the onKeyUp event.  Now the total box where I'm expecting the result of the function to appear is called :

ctl00$ContentPlaceHolder1$gvRecords$ctl02$txtTotalExpense_add

I've run into this little nightmare with master pages and javascript before.  Not sure how to get around that.
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 19639773
You can specify the unique id in document.getElementById, or pass in the UniqueID from a FindControl call into the Javascript function call as an argument.

Bob
0
 

Author Comment

by:stretch73
ID: 19639791
Hey Bob,

Tried specifying the unique ID:

function calcTotal()
{
    var i = 0;
    var sum = 0;
    for (i = 0; i < 13; i++)
   {
       var txt = document.getElementById('txtM' + i.toString() + 'Amt_add');
       sum += parseFloat(txt.value);
   }
   var total = document.getElementById('ctl00$ContentPlaceHolder1$gvRecords$ctl02$txtTotalExpense_add');

   total.text = sum;
}

but it doesn't fly.  I'm not crazy about that anyway since I'm probably going to re-use this function.  Can you help me with passing it in through FindControl?

0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 19639799
Where does 'gvRecords' live?  Is it part of the ContentPlaceHolder, or the GridView?

Bob
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 19639806
Also, I think I was wrong on that UniqueID, I think you need the ClientID (or name) with getElementById.

Bob
0
 

Author Comment

by:stretch73
ID: 19639862
gvRecords is the gridview where all of this is taking place.  It's part of a content page:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

That content page is house in RTGMaster.master.  

0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 19639876
Sorry, I meant 'txtTotalExpense_add'.

Bob
0
 

Author Comment

by:stretch73
ID: 19639901
txtTotalExpense_add is in the editTemplate of gvRecords.  So the user clicks edit, they see the textboxes for each month, and when they change a value it updates txtTotalExpense_add.  Well, it's supposed to anyway.
0
 

Author Comment

by:stretch73
ID: 19639957
And hey, if we get this I'd like to add more points to this question, if you can tell me how to do that as well I'd appreciate it.  For some reason I can't find the edit functionality.
0
 

Author Comment

by:stretch73
ID: 19640519
Bob?
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 19640539
Where are you adding the attributes for 'onChange' to the TextBox controls?

Bob
0
 

Author Comment

by:stretch73
ID: 19640609
gvRecords_RowDataBound

Dim txtM1Amt As TextBox = e.Row.Controls(4).FindControl("txtM1Amt")
txtM1Amt.Attributes.Add("onKeyUp", "calcTotal();")

And they're being added properly.  I created another function to only allow numbers to be entered, fires on the keypress event, and it works fine.
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 19640639
Try this:

Dim txtM1Amt As TextBox = e.Row.FindControl("txtM1Amt")
Dim txtTotalExpense As TextBox = e.Row.FindControl("txtTotalExpense_add")
txtM1Amt.Attributes.Add("onKeyUp", String.Format("calcTotal('{0}');", txtTotalExpense.ClientId))

function calcTotal(totalID)


Bob
0
 

Author Comment

by:stretch73
ID: 19640709
Still blowing up.  Here's the function at present:

function calcTotal(totalID)
{
    var i = 0;
    var sum = 0;
   
    for (i = 0; i < 13; i++)
   {
       var txtMonth = document.getElementById('txtM' + i.toString() + 'Amt_add');
       sum += parseFloat(txtMonth.value);
   }
   var txtTotal = document.getElementById(totalID);
   
   txtTotal.value = sum;
}
0
 

Author Comment

by:stretch73
ID: 19640717
Pulling it apart line by line, this is the first problem:

sum += parseFloat(txtMonth.value);
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 19640770
That is going to suffer from the same problem as the total TextBox.  Are all these TextBox controls on the same row in the GridView?

Bob
0
 

Author Comment

by:stretch73
ID: 19640788
Yes, everything is in the edit template of the same row.
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 2000 total points
ID: 19640802
I would just pass in the initial prefix for the ClientID:
   ctl00_ContentPlaceHolder1_gvRecords_ctl02

and prepend it to the ID's for all the controls in the script block.

Bob
0
 

Author Comment

by:stretch73
ID: 19640979
Still getting 'object expected'.  Wondering if this is even possible.
0
 

Author Comment

by:stretch73
ID: 19641147
Got it working.  Bob, you are the man.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month14 days, 9 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question