flynny
asked on
accessing textbox in datagrid in javascript
hi all,
hopefully this is a straightforward question. I have a datagrid which displays a number of products. on each line there is a - and + button which i want to be able to adjust the number in a textboxe on the same line. e.g. using the following code;
<asp:imagebutton OnClick="decrease" id="reduceQuantity" ImageAlign=AbsMiddle ImageUrl="~/Images/minus.g if" runat="server"/>
<asp:textbox id="quantity" text-align="center" text="1" width="22px" runat="server"/>
<asp:imagebutton OnClick="increase" id="increaseQuantity" ImageAlign=AbsMiddle ImageUrl="~/Images/plus.gi f" runat="server" />
with the javascript
<script type="text/javascript" language="javascript">
function increase()
{
var lbl = document.getElementById('< %=quantity .ClientID% >');
lbl.value =parseInt(lbl.value) + 1;
return false;
}
function decrease()
{
var lbl = document.getElementById('< %=quantity .ClientID% >');
if(parseInt(lbl.value) > 1)
{
lbl.value =parseInt(lbl.value) - 1;
}
return false;
}
</script>
however it cannot find item at runtime because it is in the datagrid. any ideas how i can get around this?
many thanks,
matt.
hopefully this is a straightforward question. I have a datagrid which displays a number of products. on each line there is a - and + button which i want to be able to adjust the number in a textboxe on the same line. e.g. using the following code;
<asp:imagebutton OnClick="decrease" id="reduceQuantity" ImageAlign=AbsMiddle ImageUrl="~/Images/minus.g
<asp:textbox id="quantity" text-align="center" text="1" width="22px" runat="server"/>
<asp:imagebutton OnClick="increase" id="increaseQuantity" ImageAlign=AbsMiddle ImageUrl="~/Images/plus.gi
with the javascript
<script type="text/javascript" language="javascript">
function increase()
{
var lbl = document.getElementById('<
lbl.value =parseInt(lbl.value) + 1;
return false;
}
function decrease()
{
var lbl = document.getElementById('<
if(parseInt(lbl.value) > 1)
{
lbl.value =parseInt(lbl.value) - 1;
}
return false;
}
</script>
however it cannot find item at runtime because it is in the datagrid. any ideas how i can get around this?
many thanks,
matt.
ASKER
ok i see i think i'm going to look at the second method, as because the datagrid can return a different amount of products each time hardcoding isn't really an option.
ok so if i'm registering the code from behine do you mean i need to add the attribute to each button (the - and +) for the onclientclick to be the javascript increase decrease method and pass it the text box directly?
so increase(textbox) /decrease(textbox)
would i do this in the page_load or is there another datagrid specific method i can use. would you be able to provide an example for this please?
many thanks matt.
ok so if i'm registering the code from behine do you mean i need to add the attribute to each button (the - and +) for the onclientclick to be the javascript increase decrease method and pass it the text box directly?
so increase(textbox) /decrease(textbox)
would i do this in the page_load or is there another datagrid specific method i can use. would you be able to provide an example for this please?
many thanks matt.
ASKER
hi how can i register the javascript to the button if they are in a itemtemplate in the datagrid? i.e.
<asp:TemplateColumn HeaderText="Quantity">
<HeaderStyle Font-Bold="True" CssClass="ProductSearchHea der" />
<ItemTemplate>
<asp:imagebutton OnClick="decreaseClick" id="reduceQuantity" ImageAlign=AbsMiddle ImageUrl="~/Images/minus.g if" runat="server"/>
<asp:textbox id="quantity" text-align="center" text="1" width="22px" runat="server"/>
<asp:imagebutton OnClientClick="increase(th is)" id="increaseQuantity" ImageAlign=AbsMiddle ImageUrl="~/Images/plus.gi f" runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Quantity">
<HeaderStyle Font-Bold="True" CssClass="ProductSearchHea
<ItemTemplate>
<asp:imagebutton OnClick="decreaseClick" id="reduceQuantity" ImageAlign=AbsMiddle ImageUrl="~/Images/minus.g
<asp:textbox id="quantity" text-align="center" text="1" width="22px" runat="server"/>
<asp:imagebutton OnClientClick="increase(th
</ItemTemplate>
</asp:TemplateColumn>
ASKER
hi all i think i'm beginning to get somewhere. I've handled the OnItemCreated method to the datagrid and try and find the increase and decrease buttons on each row when its created and assign the onclientclick method then. however i want to also pass a reference to the text box to the javascript method but can't seem to get it working how do i do this please?
i have
Sub DataGrid_ItemCreated(ByVal sender As Object, ByVal e As DataGridItemEventArgs)
Dim reduceButton As ImageButton = e.Item.FindControl("reduce Quantity")
Dim increaseButton As ImageButton = e.Item.FindControl("increa seQuantity ")
Dim quantity As TextBox = e.Item.FindControl("quanti ty")
If Not reduceButton Is Nothing Then
reduceButton.OnClientClick = "return reduce(" + quantity.ClientID + ")"
End If
If Not increaseButton Is Nothing Then
increaseButton.OnClientCli ck = "return increase(" + quantity.ClientID + ")"
End If
'e.Item.Cells(1).BackColor = Drawing.Color.AliceBlue
End Sub
as the method called when the datagrid is created.
with the javascript method
function increase(button) {
alert("HERE OK!");
alert(document.getElementB yId(button ).value);
// button.value = parseInt(button.value) + 1;
return false;
}
function decrease(button) {
//button.value = parseInt(button.value) - 1;
return false;
}
any ideas?
i have
Sub DataGrid_ItemCreated(ByVal
Dim reduceButton As ImageButton = e.Item.FindControl("reduce
Dim increaseButton As ImageButton = e.Item.FindControl("increa
Dim quantity As TextBox = e.Item.FindControl("quanti
If Not reduceButton Is Nothing Then
reduceButton.OnClientClick
End If
If Not increaseButton Is Nothing Then
increaseButton.OnClientCli
End If
'e.Item.Cells(1).BackColor
End Sub
as the method called when the datagrid is created.
with the javascript method
function increase(button) {
alert("HERE OK!");
alert(document.getElementB
// button.value = parseInt(button.value) + 1;
return false;
}
function decrease(button) {
//button.value = parseInt(button.value) - 1;
return false;
}
any ideas?
The code looks fine in the code behind. Now see the view source of the page.
The cilentID ur passing from the datagrid should be same as it is rendered in the button's control ID. If both are same then ur javascript will work fine.
The cilentID ur passing from the datagrid should be same as it is rendered in the button's control ID. If both are same then ur javascript will work fine.
ASKER
right. almost there i think.
it fails on the
alert(document.getElementB yId(button ).value);
the reason being it is sendning an array of quantity text boxes to the javascript method. Each of the objects in this array contains a object with and object and id of "quantity" which i assume relates to each text box. Again if i view the source everyone in the row has the identity "quantity" and doesn't seem to be unique.
i suppose i could try and maybe send the row number along with the button to javascript? or is there another way i can send the button? i tried. uniqueID instead of clientid but this didnt work either.
it fails on the
alert(document.getElementB
the reason being it is sendning an array of quantity text boxes to the javascript method. Each of the objects in this array contains a object with and object and id of "quantity" which i assume relates to each text box. Again if i view the source everyone in the row has the identity "quantity" and doesn't seem to be unique.
i suppose i could try and maybe send the row number along with the button to javascript? or is there another way i can send the button? i tried. uniqueID instead of clientid but this didnt work either.
ASKER
sorry scratch the idea of looking through the array as i just tried hardcoding and will always return the first instance of the textbox and modify that as all are called 'quantity'.
i declare the text box and buttons as follows
<asp:TemplateColumn HeaderText="Quantity">
<HeaderStyle Font-Bold="True" CssClass="ProductSearchHea der" />
<ItemTemplate>
<asp:imagebutton id="reduceQuantity" ImageAlign=AbsMiddle ImageUrl="~/Images/minus.g if" runat="server"/>
<asp:textbox id="quantity" text-align="center" text="1" width="22px" runat="server"/>
<asp:imagebutton id="increaseQuantity" ImageAlign=AbsMiddle ImageUrl="~/Images/plus.gi f" runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
could his problem be because i assign the id? however if i am to remove this how would i then reference the textbox in the method behind?
thanks for all your help.
i declare the text box and buttons as follows
<asp:TemplateColumn HeaderText="Quantity">
<HeaderStyle Font-Bold="True" CssClass="ProductSearchHea
<ItemTemplate>
<asp:imagebutton id="reduceQuantity" ImageAlign=AbsMiddle ImageUrl="~/Images/minus.g
<asp:textbox id="quantity" text-align="center" text="1" width="22px" runat="server"/>
<asp:imagebutton id="increaseQuantity" ImageAlign=AbsMiddle ImageUrl="~/Images/plus.gi
</ItemTemplate>
</asp:TemplateColumn>
could his problem be because i assign the id? however if i am to remove this how would i then reference the textbox in the method behind?
thanks for all your help.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Very Simple:
After the page is rendered. View source. See what is rendered in the conrols 'id". Hard code that in your javascript.
Simple.
Register Your javascript Code from code behind. That way u can get the <textbox>.clientID generated automatically.