PDA

View Full Version : 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:


<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


<!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.