how do I get values of textbox in listview and perform calculations in javascript

Question

1.50/5 (2 votes)

See more:

I want to total every row from my listview

tallies total infected people and percentage
____________________________________________________________________
CityID | City | Population | Male | Female | Total | Percentage |

Population, male, and female columns are user inputs
total column is male+female textbox value per row
percentage= (total/population)*100 also per row
to calculate total and percentage on every textchange

here is my html code:

XML

<asp:ListView ID="ListView1" runat="server">
   <LayoutTemplate>
      <table style="border: solid 2px #336699;" cellspacing="0" cellpadding="3" rules="all">
         <tr style="background-color: #336699; color: White;">

            <th>City</th>
            <th>Population</th>
            <th>Male</th>
            <th>Female</th>
            <th>Total</th>
            <th>%</th>
         </tr>
         <tbody>
            <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
         </tbody>
      </table>
   </LayoutTemplate>
   <ItemTemplate>
      <tr>
        <td> <asp:Label ID="lblCtyID" runat="server" Text='<%# Bind("CityID") %>' /> </td>
        <td> <asp:Label ID="lblCty" runat="server" Text='<%# Bind("CityName") %>'/> </td>
         <td><asp:TextBox ID="txtPopu" runat="server"/></td>
         <td>
         <asp:TextBox ID="txtMale" runat="server" Width="69px" ValidationGroup="check"/>
         <asp:RegularExpressionValidator ID="RegularExpressionValidator1" Display="Dynamic" runat="server" ForeColor="Maroon" SetFocusOnError="True" ControlToValidate="txtMale" ErrorMessage="X" ValidationExpression="[0-9]*" ValidationGroup="check"></asp:RegularExpressionValidator>
         </td>
         <td><asp:TextBox ID="txtFemale" runat="server" Width="69px" onpaste = "return false;" onkeyup ="keyUP(event.keyCode)" onkeydown = "return isNumeric(event.keyCode);"/></td>
         <td><asp:TextBox ID="txtTotal" runat="server" enabled="false" Width="85px"/></td>
         <td><asp:TextBox ID="txtPercent" runat="server" enabled="false" Width="85px"/></td>

      </tr>
   </ItemTemplate>
</asp:ListView>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Save Info"
            Width="136px" />
<br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:GeraldConnString2 %>"
            SelectCommand="SELECT [CityID], [CityName] FROM [Cities]"></asp:SqlDataSource>

Posted 28-Nov-10 20:48pm

gherard

Updated 28-Nov-10 21:16pm

v3

Add a Solution

3 solutions

Solution 3

CSS

<pre lang="Javascript">><<small><code><big><pre lang="Delphi"><pre lang="text"><pre lang="c++"><pre lang="HTML"><pre lang="Javascript">

Posted 25-Oct-12 1:03am

mani5155

Solution 2

http://img26.imageshack.us/img26/4043/listview.png[^]

onkeypress was not valid attribute so I used onkeydown.

I have tried your javascript function but it displays nothing

*I have 0 values on my textbox fields as default
*the function is being called but does nothing

I dont get this one, do I have to substitute values for this one?
does obj stands for the listview1(name)?
please explain. thanks.

C#

var tr=obj.parentNode.parentNode

this is the present javascript I have

XML

<script type="text/javascript" language="javascript">
        function CalculateValue(obj)
       {
       var tr=obj.parentNode.parentNode //get the entered row object.
       var txtPopu=tr.cells[2].getElementByTagName("INPUT")[0] //population textbox
       var txtMale=tr.cells[3].getElementByTagName("INPUT")[0] //male textbox
       var txtFemale=tr.cells[4].getElementByTagName("INPUT")[0] //female textbox
       var txtTotal=tr.cells[5].getElementByTagName("INPUT")[0] //total textbox
       var txtPercent=tr.cell[6].getElementByTagName("INPUT")[0] //percentage textbox
       txtTotal.value=parseInt(txtMale.value) + parseInt(txtFemale.value); //total value calculation.
       txtPercent.value= (parseInt(txtTotal.value) / parseInt(txtPopu.value)) * 100 //percentage calculation.
       }
   </script>

Posted 29-Nov-10 0:37am

gherard

Updated 29-Nov-10 0:53am

v2

Comments

Kirankumar Ballapalli 29-Nov-10 6:45am

Hi,are you getting any javascript error? place one alert inside function.And check whether you are getting tr as exact row or check the index positions of your cells.Please mention error what you are getting.

gherard 29-Nov-10 10:32am

thanks for your reply kiran,
I am slowly getting this to work.
var txtPercent gets undefined which is in cell[6]
now i am confused other var retrieves the right value but in cell[6] it is undefined.

do you have any ideas?

gherard 29-Nov-10 11:53am

haha..ok I got it. it should have been cells[6]

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kirankumar Ballapalli · Accepted Answer · 2010-11-28T22:53:00

Hi,

You can solve the above function by writing following javascript fucntion.

Call the below function in Population, male, and female columns on onkeypress event of text boxes as follows.

C#

onkeypress="javascript:return CalculateValue(this);";

function CalculateValue(obj)
{
    var tr=obj.parentNode.parentNode //get the entered row object.
    var txt1=tr.cells[2].getElementByTagName("INPUT")[0] //population textbox

    var txt2=tr.cells[3].getElementByTagName("INPUT")[0] //male textbox
    var txt3=tr.cells[4].getElementByTagName("INPUT")[0] //female textbox
    var txt4=tr.cells[5].getElementByTagName("INPUT")[0] //total textbox
    var txt5=tr.cell[6].getElementByTagName("INPUT")[0] //percentage textbox

txt4.value=parseInt(txt2.value) + parseInt(txt3.value); //total value calculation.

txt5.value= (parseInt(txt4.value) / parseInt(txt1.value)) * 100 //percentage calculation.

}

Make sure that by default your textboxes need to have zero.

Regards,
Kiran.