Home » Asp.netRSS

how to access textbox values inside Gridview using Javascript code

i have been searching a solution to acess textbox values inside a gridview using javascript code. but it seems my code has some error.can anyone pls find what is wrong in my code. the code is given below. the description is it has project listed in the 1st column and from 2nd col starts from weekdays i.e from Monday to Sunday and last col is Total

Project NAme  | Mon | Tue | Wed | Thur | Fri | Sat | Sun | Total| 

--------------------------------------------------------------------------------------------

Project 1         | T1 | T2 | T3 | T4 | T5 | T6 | T7 | Total1|

Project 2         | T1 | T2 | T3 | T4 | T5 | T6 | T7 | Total2|

I want to access textbox values and sum it and put it in total1 rowwise

Asp.net code

-----------------------

<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

<scriptlanguage="javascript"type="text/javascript">

var GridView;

var cellValue

var gridViewCtlId;

var gridViewCtl = null;

var curSelRow = null;

var curRowIdx = -1;

var v;

 

 

function updateValue(field, rowIdx,col)

{

var ColCount = 7;

var rowtotal = 0;

var cellValue = 0;

var currValue =0;

var j = 0;

 

rowIdx = parseInt(rowIdx) + 1;

var objGridView = document.getElementById('<%=GridView1.ClientID%>');

cellValue = objGridView.rows[rowIdx].cells[col].value;

 

 

for(j=1;j<=ColCount;j++)

{

if(objGridView.rows[rowIdx].cells[j].children[0].value !="")

{

//alert("J value " + j + " => " + GridView.rows[rowIdx].cells[j].children[0].value);

cellValue = objGridView.rows[rowIdx].cells[j].children[0].value;

rowtotal = rowtotal + parseInt(cellValue);

}

}

objGridView.rows[rowIdx].cells[8].children[0].value = rowtotal;

 

}

</script>

 

<tablestyle="width: 709px">

<tr>

<tdstyle="width: 262px; height: 21px">

<spanclass="normalFontBold">

Client Name :</span></td>

<tdstyle="width: 276px; height: 21px">

<asp:DropDownListID="DropDownClient"runat="server"AutoPostBack="True"AppendDataBoundItems="True"DataSourceID="ObjectClientSrc"

DataTextField="ClientName"DataValueField="ClientId"OnSelectedIndexChanged="DropDownClient_SelectedIndexChanged"OnDataBound="DropDownClient_DataBound"Width="196px">

 

</asp:DropDownList></td>

<tdstyle="width: 291px; height: 21px">

</td>

<tdstyle="width: 359px; height: 21px">

</td>

<tdstyle="width: 273px; height: 21px">

</td>

<tdstyle="width: 177px; height: 21px">

</td>

</tr>

</table>

<asp:ObjectDataSourceID="ObjectProjectSrc"runat="server"SelectMethod="GetProjectByClientId"TypeName="ProjectDB">

<SelectParameters>

<asp:ControlParameterControlID="DropDownClient"Name="id"PropertyName="SelectedValue"Type="Int32"/>

</SelectParameters>

</asp:ObjectDataSource>

<asp:ObjectDataSourceID="ObjectClientSrc"runat="server"SelectMethod="DisplayAllClient"

TypeName="ClientDB"></asp:ObjectDataSource>

<asp:GridViewID="GridView1"runat="server"DataSourceID="ObjectProjectSrc"AutoGenerateColumns="false"OnRowDataBound="GridView1_RowDataBound"Width="685px"Height="25px">

<Columns>

<asp:TemplateFieldHeaderText="Projects">

<ItemTemplate><spanclass="normalFont">

<asp:LabelID="ProjectName"Text='<%# Eval("ProjectName") %>'runat="server"/></span>

</ItemTemplate>

<HeaderStyleHorizontalAlign="Center"/>

</asp:TemplateField>

 

<asp:TemplateFieldHeaderText="Mon">

<HeaderStyleHorizontalAlign="Center"/>

 

<ItemTemplate><center>

<asp:TextBoxID="TextBox1"runat="server"Width="40px"></asp:TextBox></center>

</ItemTemplate>

</asp:TemplateField>

 

 

<asp:TemplateFieldHeaderText="Tue">

<HeaderStyleHorizontalAlign="Center"/>

<ItemTemplate><center>

<asp:TextBoxID="TextBox2"runat="server"Width="40px"></asp:TextBox></center>

</ItemTemplate>

</asp:TemplateField>

 

<asp:TemplateFieldHeaderText="Wed">

<HeaderStyleHorizontalAlign="Center"/>

<ItemTemplate><center>

<asp:TextBoxID="TextBox3"runat="server"Width="40px"></asp:TextBox></center>

</ItemTemplate>

</asp:TemplateField>

 

<asp:TemplateFieldHeaderText="Thur">

<HeaderStyleHorizontalAlign="Center"/>

<ItemTemplate><center>

<asp:TextBoxID="TextBox4"runat="server"Width="40px"></asp:TextBox></center>

</ItemTemplate>

</asp:TemplateField>

 

 

<asp:TemplateFieldHeaderText="Fri">

<HeaderStyleHorizontalAlign="Center"/>

<ItemTemplate><center>

<asp:TextBoxID="TextBox5"runat="server"Width="40px"></asp:TextBox></center>

</ItemTemplate>

</asp:TemplateField>

 

<asp:TemplateFieldHeaderText="Sat">

<HeaderStyleHorizontalAlign="Center"/>

<ItemTemplate><center>

<asp:TextBoxID="TextBox6"runat="server"Width="40px"></asp:TextBox></center>

</ItemTemplate>

</asp:TemplateField>

 

<asp:TemplateFieldHeaderText="Sun">

<HeaderStyleHorizontalAlign="Center"/>

<ItemTemplate><center>

<asp:TextBoxID="TextBox7"runat="server"Width="40px"></asp:TextBox></center>

</ItemTemplate>

</asp:TemplateField>

 

<asp:TemplateFieldHeaderText="Total">

<HeaderStyleHorizontalAlign="Center"/>

<ItemTemplate><center>

<asp:TextBoxID="TextBox8"runat="server"Width="40px"ReadOnly="true"></asp:TextBox></center>

</ItemTemplate>

</asp:TemplateField>

 

</Columns>

 

</asp:GridView>

<asp:ButtonID="btnSave"runat="server"CssClass="CommonButtonStyle"OnClick="btnSave_Click"Text="Save"/><br/>

 

 

 

 

 

 

</asp:Content>

 

Codebehind:

------------------

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;

using System.Text;

publicpartialclassAdmin_reghour : System.Web.UI.Page

{

publicint ProjectCount;

privateint rowcount = 0;

publicstring evtHandler;

protectedvoid Page_Load(object sender, EventArgs e)

{

}

 

protectedvoid GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

int rowIndex = Convert.ToInt32(e.Row.DataItemIndex);

evtHandler = "updateValue(this,"+rowIndex+",1)";

TextBox TextBox1 = (TextBox)e.Row.FindControl("TextBox1");

TextBox1.Attributes.Add("onchange", evtHandler);

TextBox1.Attributes.Add("onkeydown", "javascript: return numericOnly(event);");

evtHandler = "updateValue(this," + rowIndex + ",2)";

TextBox TextBox2 = (TextBox)e.Row.FindControl("TextBox2");

TextBox2.Attributes.Add("onchange", evtHandler);

TextBox2.Attributes.Add("onkeydown", "javascript: return numericOnly(event);");

evtHandler = "updateValue(this," + rowIndex + ",3)";TextBox TxtWed = (TextBox)e.Row.FindControl("TxtWed");

TxtWed.Attributes.Add("onchange", evtHandler);

TxtWed.Attributes.Add("onkeydown", "javascript: return numericOnly(event);");

evtHandler = "updateValue(this," + rowIndex + ",4)";

TextBox TxtThur = (TextBox)e.Row.FindControl("TxtThur");

TxtThur.Attributes.Add("onchange", evtHandler);

TxtThur.Attributes.Add("onkeydown", "javascript: return numericOnly(event);");

evtHandler = "updateValue(this," + rowIndex + ",5)";

TextBox TxtFri = (TextBox)e.Row.FindControl("TxtFri");

TxtFri.Attributes.Add("onchange", evtHandler);

TxtFri.Attributes.Add("onkeydown", "javascript: return numericOnly(event);");

evtHandler = "updateValue(this," + rowIndex + ",6)";

TextBox TxtSat = (TextBox)e.Row.FindControl("TxtSat");

TxtSat.Attributes.Add("onchange", evtHandler);

TxtSat.Attributes.Add("onkeydown", "javascript: return numericOnly(event);");

evtHandler = "updateValue(this," + rowIndex + ",7)";

TextBox TxtSun = (TextBox)e.Row.FindControl("TxtSun");

TxtSun.Attributes.Add("onchange", evtHandler);

TxtSun.Attributes.Add("onkeydown", "javascript: return numericOnly(event);");

}

}

protectedvoid btnSave_Click(object sender, EventArgs e)

{

 

foreach (GridViewRow row in GridView1.Rows)

{

if (row.RowType == DataControlRowType.DataRow)

{

TextBox txtMon = (TextBox)row.FindControl("TxtMon");

string Mon = txtMon.Text;

TextBox TxtTue = (TextBox)row.FindControl("TxtTue");

string Tue = TxtTue.Text;

TextBox TxtWed = (TextBox)row.FindControl("TxtWed");

string Wed = TxtWed.Text;

TextBox TxtThur = (TextBox)row.FindControl("TxtThur");

string Thur = TxtThur.Text;

TextBox TxtFri = (TextBox)row.FindControl("TxtFri");

string Fri = TxtFri.Text;

TextBox TxtSat = (TextBox)row.FindControl("TxtSat");

string Sat = TxtSat.Text;

TextBox TxtSun = (TextBox)row.FindControl("TxtSun");

string Sun = TxtSun.Text;

TextBox TxtTot = (TextBox)row.FindControl("TxtTot");string Total = TxtTot.Text;

}

}

}

protectedvoid DropDownClient_SelectedIndexChanged(object sender, EventArgs e)

{

if (DropDownClient.SelectedValue != "-1")

{

GridView1.DataSourceID =
"ObjectProjectSrc";

}

GridView1.DataBind();

}

protectedvoid DropDownClient_DataBound(object sender, EventArgs e)

{

GridView1.DataBind();

}

}

 

From the above code, i cannot access textbox values using javascript code. pls help me to debug this code..

 

thanks in advance

 

 

6 Answers Found

 

Answer 1

 change your client  side function  to something like this :

 

 
function updateValue(obj,name)
{
	var ColCount = 6;
	var rowtotal = 0;
	for(j=1;j<=ColCount;j++)
	{
		var txtbox = document.getElementById(obj.id.replace(name,'TextBox' + j));
		if(txtbox.value !="")
		{
			rowtotal = rowtotal + parseInt(txtbox.value);
		}
	}
	document.getElementById(obj.id.replace(name,'TextBox7'));.value = rowtotal;
}
  

and change your evtHandels in Server Side code  to :

  

evtHandler = "updateValue(this,'TextBox1')";
 
 

Answer 2

Try thi JavaScript Codes below

function AutoCompute ()
{
   
    var  initialtotal = 0;
    var total=0;
    var sum  =0;
    var itemCount = 0;
    var val = 0;
    var col  =1; // i assume that your TextBox starts  with the name TextBox1
    var TextBoxTotal;

    itemCount = 7;
    rowcount  = //Get the GridView.ROws.COunt here... I assume that you have 5 ROWS here
    rowcount =5;

    for ( row  = 0;i < parseInt(rowcount); row++)
    {
   
    sum = 0;
        for ( col = 1;col <= parseInt(itemCount); col++)
        {
            val = document.getElementById('GridView1_ctl0_Textbox + col');


             initialtotal = parseInt(val.value);          
        
             sum += parseInt(initialtotal)
             if (col = parseInt(itemCount)) //Displays the total  value
             {
                  TextBoxTotal = document.getElementById('GridView1_ctl0'+ row +'_Textbox8');
                  TextBoxTotal.innerHTML = parseInt(sum);
             }
    
        }
    }
}

 

Answer 3

Hi rah,

you want to get all values  added to the eigth column  right?

I have changed your Javascript and RowDataBound a bit. 

The JS.

function updateValue(theGrid, rowIdx)
    {
        var total  = 0;
        var  cellCount = theGrid.rows[rowIdx].cells.length - 2;
        for(var i=1; i<cellCount; i++)
        {
            if(theGrid.rows[rowIdx].cells[i].children[0].children[0].value != "")
                total += (theGrid.rows[rowIdx].cells[i].children[0].children[0].value - 0);
        }
        theGrid.rows[rowIdx].cells[8].children[0].children[0].value =  total;
    }

The RowDataBound

    protected  void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            int  rowIndex = Convert.ToInt32(e.Row.DataItemIndex) + 1;
            for (int i = 1; i < e.Row.Cells.Count-1; i++)
            {
                evtHandler = "updateValue(" + GridView1.ClientID + "," + rowIndex + ")";
                ((TextBox)e.Row.FindControl("TextBox"+i.ToString())).Attributes.Add("onblur", evtHandler);
            }
        }
    }

This will do.

Regards,

Naveen

P.S:
I have tested it and its working.

Dont forget to add the number validation too. 

 

Answer 4

hi naveen,

           thanks for ur help. ur code  is working fine. :-)

 

Answer 5

Hello Naveen

 Your code  was very helpful to me...

Thanks.

 

Answer 6

function test() {

var input = document.getElementById("mygridview").getElementsByTagName("input");

var total  = 0 * 1;
           

var sample;

 for (var i = 0; i < input.length; i++) {
                if (input[i].type == "text") {

                    sample = document.getElementById(input[i].id).value;

if (isNaN(parseInt(sample))) {
                    }
                    else {
                        var  isfound = /^-?\+$/.test(sample);
                        if (isfound) {

alert("invalid integer");
                            document.getElementById(input[i].id).value = "";
                            document.getElementById(input[i].id).focus();

                        }
                        else {

 total = parseInt(total) + parseInt(sample);
                        }

                    }
                }
            }
            document.getElementById("mygridview_ctl03_Lbltotal").innerHTML = total;
    }

 
 
 

<< Previous      Next >>


Microsoft   |   Windows   |   Visual Studio   |   Follow us on Twitter