javascript and jquery to show values in lable instead of Textbox : The Official Microsoft ASP.NET Forums

Reply

Priya_here

Member

709 Points

1859 Posts

javascript and jquery to show values in lable instead of Textbox

Mar 01, 2012 03:32 AM|LINK

Hi

This is my aspx page

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowFooter="true">
        <Columns>
            <asp:TemplateField HeaderText="Rate">
                <ItemTemplate>
                    <asp:TextBox ID="Rate" runat="server" CssClass="textSelector" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Quantity">
                <ItemTemplate>
                    <asp:TextBox ID="Quantity" runat="server" CssClass="textSelector"  />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Amount">
                <ItemTemplate>
                    <asp:Label ID="Amount" runat="server"  />
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="GrandTotalWithoutTax" runat="server"  /><br />
                    <asp:Label ID="TaxValue" runat="server"  /><br />
                    <asp:Label ID="GrandtotalWithTax" runat="server"  /><br />
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

how would be my javascript code if Amount will be displayed in label also Gradtotalwithouttax,taxvalue,grandtotalwithtax your javascript

<head runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".textSelector").keyup(function() {
                var row = $(this).closest("tr");
                var Rate = parseFloat(row.find("input[type=text][id*=Rate]").val());
                if (isNaN(Rate)) Rate = 0;
                var Quantity = parseFloat(row.find("input[type=text][id*=Quantity]").val());
                if (isNaN(Quantity)) Quantity = 0;
                row.find("input[type=text][id*=Amount]").val(Rate * Quantity);
                var total = calculateTotal();
                var taxValue = parseFloat($("input[type=text][id*=TaxValue]").val());
                if (isNaN(taxValue)) taxValue = 0;
                $("input[type=text][id*=GrandtotalWithTax]").val(total + taxValue);
            });
        });
        function calculateTotal() {
            var total = 0;
            $("input[type=text][id*=Amount]").each(function() {
                temp = parseFloat($(this).val());
                if (isNaN(temp)) temp = 0;
                total = total + temp;
            });
            $("input[type=text][id*=GrandTotalWithoutTax]").val(total);
            return total;
        }
    </script>
</head>

The above javascript works fine if my 3rd column Itemtemplate and footertemplate will be Textbox now insted of Textbox i want to show in Label, so how would be my javascript..

Thanks

Waiting for your code

Reply

me_ritz

Star

9337 Points

1447 Posts

Re: javascript and jquery to show values in lable instead of Textbox

Mar 01, 2012 03:51 AM|LINK

Hi Priya,

Instead of TextBox , if its Label then.

code:

$("span[id*=GrandtotalWithTax]").text("yourtext");

Because label generates span.

Please mark the post as "Answer" that helps you.

Reply

MaheshKumarC...

Member

84 Points

51 Posts

Re: javascript and jquery to show values in lable instead of Textbox

Mar 01, 2012 03:58 AM|LINK

hai priya, when every .aspx page is rendering <asp:TextBox>, it will be converted in to <input type ="text" > like that ,but label is converted into span.

so you need write $("input[type=span][id*=GrandTotalWithoutTax]").val(total); instead of

$("input[type=text][id*=GrandTotalWithoutTax]").val(total);

Ch Mahesh Kumar
www.jkc-forum.in
Mark this post as answer if this helps.It can save others time.

Reply

Danny Gokey

Member

290 Points

56 Posts

Re: javascript and jquery to show values in lable instead of Textbox

Mar 01, 2012 05:09 AM|LINK

Hi

In the client ,the label control is interpreted as span element,

Please have a try this, $("span#GrandtotalWithTax").val(total) in the javascript.

Hope it helps

Reply

Priya_here

Member

709 Points

1859 Posts

Re: javascript and jquery to show values in lable instead of Textbox

Mar 01, 2012 05:30 AM|LINK

hi

Here is my complete code of my aspx page and CS page.. javascript not showing Amount,AmountTotal,GrandTotal check this and let me know correct jquery code..

ASPX page:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="addingDR.aspx.cs" Inherits="addingDR" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
   
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
     <script type="text/javascript">
        $(document).ready(function() {
            $(".textSelector").keyup(function() {
                var row = $(this).closest("tr");
                var Rate = parseFloat(row.find("input[type=text][id*=Rate]").val());
                if (isNaN(Rate)) Rate = 0;
                var Quantity = parseFloat(row.find("input[type=text][id*=Quantity]").val());
                if (isNaN(Quantity)) Quantity = 0;
                row.find("input[type=span][id*=Amount]").val(Rate * Quantity);
                var total = calculateTotal();
                var taxValue = parseFloat($("input[type=text][id*=Tax]").val());
                if (isNaN(taxValue)) taxValue = 0;
                $("input[type=text][id*=GT]").val(total + taxValue);
            });
        });
        function calculateTotal() {
            var total = 0;
            $("input[type=span][id*=Amount]").each(function() {
                temp = parseFloat($(this).val());
                if (isNaN(temp)) temp = 0;
                total = total + temp;
            });
            $("input[type=span][id*=AmountTotal]").val(total);
            return total;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:gridview ID="Gridview1" runat="server" ShowFooter="true"
                             AutoGenerateColumns="false">
        <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
        <asp:TemplateField HeaderText="Header 1">
            <ItemTemplate>
                <asp:TextBox ID="Rate" runat="server" CssClass="textSelector"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Header 2">
            <ItemTemplate>
                <asp:TextBox ID="Quantity" runat="server" CssClass="textSelector"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Header 3">
            <ItemTemplate>
                 <asp:Label ID="Amount" runat="server"></asp:Label>
            </ItemTemplate>
            <FooterStyle HorizontalAlign="Right" />
            <FooterTemplate>
            Total<asp:Label ID="AmountTotal" runat="server"></asp:Label><br />
            Tax<asp:Textbox ID="Tax" runat="server"></asp:Textbox><br />
            Grand Total<asp:Label ID="GT" runat="server"></asp:Label><br />
            <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" OnClick="ButtonAdd_Click1" />
            </FooterTemplate>
        </asp:TemplateField>
        </Columns>
</asp:gridview>
    
    </div>
    </form>
</body>
</html>

CS page:-

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class addingDR : System.Web.UI.Page
{
    private void SetInitialRow()
    {

        DataTable dt = new DataTable();
        DataRow dr = null;
        dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
        dt.Columns.Add(new DataColumn("Column1", typeof(string)));
        dt.Columns.Add(new DataColumn("Column2", typeof(string)));
        dt.Columns.Add(new DataColumn("Column3", typeof(string)));
        dt.Columns.Add(new DataColumn("AmountTotal", typeof(string)));
        dt.Columns.Add(new DataColumn("Tax", typeof(string)));
        dt.Columns.Add(new DataColumn("GT", typeof(string)));

        dr = dt.NewRow();
        dr["RowNumber"] = 1;
        dr["Column1"] = string.Empty;
        dr["Column2"] = string.Empty;
        dr["Column3"] = string.Empty;
        dr["AmountTotal"] = string.Empty;
        dr["Tax"] = string.Empty;
        dr["GT"] = string.Empty;
        dt.Rows.Add(dr);

        //Store the DataTable in ViewState
        ViewState["CurrentTable"] = dt;

        Gridview1.DataSource = dt;
        Gridview1.DataBind();
    }
  


    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            SetInitialRow();
        }
    }

    private void AddNewRowToGrid()
    {

        int rowIndex = 0;
        if (ViewState["CurrentTable"] != null)
        {
            DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
            DataRow drCurrentRow = null;
            if (dtCurrentTable.Rows.Count > 0)
            {
                for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
                {
                    //extract the TextBox values
                    TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("Rate");
                    TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("Quantity");
                    Label box3 = (Label)Gridview1.Rows[rowIndex].Cells[3].FindControl("Amount");
                    Label box4 = (Label)Gridview1.FooterRow.FindControl("AmountTotal");
                    TextBox box5 = (TextBox)Gridview1.FooterRow.FindControl("Tax");
                    Label box6 = (Label)Gridview1.FooterRow.FindControl("GT");

                    drCurrentRow = dtCurrentTable.NewRow();
                    drCurrentRow["RowNumber"] = i + 1;
                    drCurrentRow["Column1"] = box1.Text;
                    drCurrentRow["Column2"] = box2.Text;
                    drCurrentRow["Column3"] = box3.Text;
                    drCurrentRow["AmountTotal"] = box4.Text;
                    drCurrentRow["Tax"] = box5.Text;
                    drCurrentRow["GT"] = box6.Text;
            

                    rowIndex++;
                }

                //add new row to DataTable
                dtCurrentTable.Rows.Add(drCurrentRow);
                //Store the current data to ViewState
                ViewState["CurrentTable"] = dtCurrentTable;

                //Rebind the Grid with the current data
                Gridview1.DataSource = dtCurrentTable;
                Gridview1.DataBind();
            }
        }
        else
        {
            Response.Write("ViewState is null");
        }

        //Set Previous Data on Postbacks
        SetPreviousData();
    }


    private void SetPreviousData()
    {

        int rowIndex = 0;
        if (ViewState["CurrentTable"] != null)
        {
            DataTable dt = (DataTable)ViewState["CurrentTable"];
            if (dt.Rows.Count > 0)
            {
                for (int i = 1; i < dt.Rows.Count; i++)
                {
                    TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("Rate");
                    TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("Quantity");
                    Label box3 = (Label)Gridview1.Rows[rowIndex].Cells[3].FindControl("Amount");
                    Label box4 = (Label)Gridview1.FooterRow.FindControl("AmountTotal");
                    TextBox box5 = (TextBox)Gridview1.FooterRow.FindControl("Tax");
                    Label box6 = (Label)Gridview1.FooterRow.FindControl("GT");



                    box1.Text = dt.Rows[i]["Column1"].ToString();
                    box2.Text = dt.Rows[i]["Column2"].ToString();
                    box3.Text = dt.Rows[i]["Column3"].ToString();
                    box4.Text = dt.Rows[i]["AmountTotal"].ToString();
                    box5.Text = dt.Rows[i]["Tax"].ToString();
                    box6.Text = dt.Rows[i]["GT"].ToString();
                  

                    rowIndex++;

                }
            }
        }
    }


    protected void ButtonAdd_Click1(object sender, EventArgs e)
    {
        AddNewRowToGrid();
    }
}

Waiting for your complete j query code..

Thanks

Edited by Priya_here on Mar 01, 2012 05:59 AM

Reply

MaheshKumarC...

Member

84 Points

51 Posts

Re: javascript and jquery to show values in lable instead of Textbox

Mar 01, 2012 06:03 AM|LINK

just use span instead of text when you are using label in jQuery.

Ch Mahesh Kumar
www.jkc-forum.in
Mark this post as answer if this helps.It can save others time.

Reply

Priya_here

Member

709 Points

1859 Posts

Re: javascript and jquery to show values in lable instead of Textbox

Mar 01, 2012 06:09 AM|LINK

I used span already check my jquery code and let me know where im wrong...

Reply

me_ritz

Star

9337 Points

1447 Posts

Re: javascript and jquery to show values in lable instead of Textbox

Mar 01, 2012 06:17 AM|LINK

Label does not generate input element...but just span

so..instead of  this:

$("input[type=span][id*=AmountTotal]").val(total);

use:
$("span[id*=AmountTotal]").val(total);

Labels can be found using:

$("span[id*=idoflabel]").val(total);

Please mark the post as "Answer" that helps you.

Edited by me_ritz on Mar 01, 2012 06:18 AM
Edited by me_ritz on Mar 01, 2012 06:19 AM

Reply

Priya_here

Member

709 Points

1859 Posts

Re: javascript and jquery to show values in lable instead of Textbox

Mar 01, 2012 06:47 AM|LINK

I used this

$("span[id*=AmountTotal]").val(total);

hen after its not working same problem then i used firebug to find the control where it says

I used this

$("span[id*=Gridview1_ctl02_Amount]").val(total); 

still its not showing result..

whats the problem

Reply

me_ritz

Star

9337 Points

1447 Posts

Re: javascript and jquery to show values in lable instead of Textbox

Mar 01, 2012 07:07 AM|LINK

use this:

$("span[id*=AmountTotal]").text(total);

instead of:

$("span[id*=AmountTotal]").val(total);

Please mark the post as "Answer" that helps you.

javascript and jquery to show values in lable instead of Textbox RSS

23 replies

Priya_here

javascript and jquery to show values in lable instead of Textbox

me_ritz

Re: javascript and jquery to show values in lable instead of Textbox

MaheshKumarC...

Re: javascript and jquery to show values in lable instead of Textbox

Danny Gokey

Re: javascript and jquery to show values in lable instead of Textbox

Priya_here

Re: javascript and jquery to show values in lable instead of Textbox

MaheshKumarC...

Re: javascript and jquery to show values in lable instead of Textbox

Priya_here

Re: javascript and jquery to show values in lable instead of Textbox

me_ritz

Re: javascript and jquery to show values in lable instead of Textbox

Priya_here

Re: javascript and jquery to show values in lable instead of Textbox

me_ritz

Re: javascript and jquery to show values in lable instead of Textbox

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft