Does anyone know some java script code to increase or decrease quantity in a form field by clicking on arrows or +- next to the field?
Thanks a lot
CSS Codes
Junior Coders
How to increase or decrease quantity in a form field
Does anyone know some java script code to increase or decrease quantity in a form field by clicking on arrows or +- next to the field?
Thanks a lot
Elite Coders
Check the following code
I've highlighted the JS lines in the code that does the increment/decrement. Hope this helps.Code:<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> </title> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> <form name="f1"> <input type='text' name='qty' id='qty' /> <input type='button' name='add'onclick='javascript: document.getElementById("qty").value++;'value='+'/> <input type='button' name='subtract'onclick='javascript: document.getElementById("qty").value--;'value='-'/> </form> </body> </html>
Last edited by codeexploiter; 02-06-2008 at 08:54 AM. Reason: correction
Junior Coders
Hi Codeexploiter,
Thankx a lot, that's exactly what I’ve been looking for. Do you think there is a way of stopping on 0 value rather going to minus (-2, -1, -0, 0, 1) ?
Cheers
Elite Coders
Check the following code
Changes from the previous version has been highlighted. Hope this helps.Code:<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> </title> <style type="text/css"> </style> <script type="text/javascript"> function subtractQty(){ if(document.getElementById("qty").value - 1 < 0) return; else document.getElementById("qty").value--; } </script> </head> <body> <form name="f1"> <input type='text' name='qty' id='qty' /> <input type='button' name='add' onclick='javascript: document.getElementById("qty").value++;' value='+'/> <input type='button' name='subtract'onclick='javascript: subtractQty();'value='-'/> </form> </body> </html>
Junior Coders
Hi Codeexploiter,
Thanx ones again for the help. I've been trying to change buttons for images but it doesn't work for me at all. Cheers
New Comer (less than 5 posts)
Hi guys
Thanks for the coding you have here, it was good help, however I have a small problem. I am sure it maybe a simple one.
I am trying to use your code to change the quantity of the item in my shopping basket but it does not seem to work.
As you can see here in my coding the quantity is in the data grid table. The quantity does not change. Could someone please have a look and tell me what I am doing wrong.
Thanks for your help
Ash
<asp:TemplateColumn HeaderText="Quantity" ItemStyle-VerticalAlign="Top">
<ItemTemplate>
<center>
<!--Quantity-->
<input type='button' name='add' runat="server" onclick='javascript: document.getElementById("qty").value++;' value='+'/>
<asp:TextBox Runat="server" style="text-align: center" name=”qty” id=”qty”
text='<%# DataBinder.Eval(Container.DataItem, "Quantity") %>'
class="textFieldNoWidth" width="25px" Height="15PX"> </asp:TextBox>
<input type='button' runat="server" name='subtract' onclick='javascript: subtractQty();' value='-'/>
<BR>
<!--Remove Button-->
<A href="xt_orderform_delitem.asp?basket_id=184100&index=223658" class="links" style="font-size:9px;">Remove</A>
</center>
</ItemTemplate>
<HeaderStyle Width="50px" />
<ItemStyle VerticalAlign="Top" />
</asp:TemplateColumn>
Posting Permissions
Reply With Quote
Bookmarks