PDA

View Full Version : How to increase or decrease quantity in a form field



espider
02-06-2008, 08:26 AM
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

codeexploiter
02-06-2008, 08:54 AM
Check the following 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>


I've highlighted the JS lines in the code that does the increment/decrement. Hope this helps.

espider
02-06-2008, 09:40 AM
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

codeexploiter
02-06-2008, 09:59 AM
Check the following 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>


Changes from the previous version has been highlighted. Hope this helps.

espider
02-06-2008, 01:20 PM
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

Ashtag
11-15-2011, 09:30 PM
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&amp;index=223658" class="links" style="font-size:9px;">Remove</A>
</center>
</ItemTemplate>
<HeaderStyle Width="50px" />
<ItemStyle VerticalAlign="Top" />
</asp:TemplateColumn>