I need to increase and decrease the quantity of values using images not buttons

**mahesh123** · 07-16-2008, 09:40 AM

Hi Friends

I am in trouble with some java script code.Plz help me.

Query :

I need to increase and decrease the quantity of values using images not buttons.(I have images "-" text box(value) and image "+" )

If i click "-" image values should keep decreasing and if i click "+" image value should keep increasing .

Regards
Mahesh

**rangana** · 07-16-2008, 10:24 AM

Hope this helps:

HTML Code:

<script type="text/javascript">
var inp,def,rate;
window.onload=function()
{
def=100; // Set the initial Value of input box
rate=1; // Set the subtrahend / Add
inp=document.getElementById('val');
inp.value=def;
document.getElementById('less').onclick=function()
{inp.value=Number(document.getElementById('val').value)-rate;}
document.getElementById('plus').onclick=function()
{inp.value=Number(document.getElementById('val').value)+rate;}
}
</script>
<img src="decrease.jpg" alt="lessen" id="less">
<input type="text" readonly id="val">
<img src="increase.jpg" alt="increase" id="plus">

**codeexploiter** · 07-16-2008, 10:57 AM

Check the following code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Untitled Document</title>
        <style type="text/css">
            .add {
                background-image: url(add.gif);
                width: 14px;
                height: 13px;                
				position:absolute;
				top:0;
				left:0;				
            }
			.inp{
				position:absolute;
				top:0;
				left:16px;				
			}
			.minus{
				background-image: url(minus.gif);
                width: 14px;
                height: 13px;                
				position:absolute;
				top:0;
				left:165px;
			}
			
        </style>
        <script type="text/javascript">
		function addMinus(op){
			if(op === '+'){
				document.forms['f1'].elements['value'].value = parseInt(document.forms['f1'].elements['value'].value) + 1;
			}else{
				document.forms['f1'].elements['value'].value = parseInt(document.forms['f1'].elements['value'].value) - 1;
			}
		}      
        </script>
    </head>
    <body>
        <div style="position: relative;top:0;left:0;">
            <form name="f1">
                <div onclick="addMinus('+');return false;" class="add" ></div>
                <input type="text" value="1000" name="value" class="inp" /><a href="#" onclick="addMinus('-');return false;" class="minus"></a>
            </form>
        </div>
    </body>
</html>

Find the attached + and - images. Unzip the images and store them with the web page that has the above code.

Thread: I need to increase and decrease the quantity of values using images not buttons

Thread Tools

Search Thread

I need to increase and decrease the quantity of values using images not buttons

Bookmarks

Bookmarks

Posting Permissions