...

View Full Version : Button with addition capability?



vorl
02-26-2009, 09:15 PM
Hey,

I was wondering if any one could help me...any help is appreciated. I need a button which has the initial value '0'. When clicked upon it should add '1' so 1,2,3 etc
But in addition to this, the value has to be able to be used within a form as i need this value to be submitted along with the form.

Thanks :)

whammy
02-26-2009, 10:59 PM
I'm pretty rusty at this stuff, as I haven't been coding regularly in a few years (I've been playing guitar in a band mostly!).

This works but it's probably not the most elegant solution:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Addition/Subtraction Test</title>
<script type="text/javascript">
<!--
// Only allow numeric keypresses
function isNumericKey(e)
{
var k = document.all ? e.keyCode : e.which;
return ((k > 47 && k < 58) || k == 8 || k == 0 || k == 13);
}

function isInt(myNum) {
// get the modulus: if it's 0, then it's an integer
var myMod = myNum % 1;

if (myMod == 0) {
return true;
} else {
return false;
}
}

function addNum(e){
if (isInt(parseInt(e))) {
document.forms[0].mynumber.value = ++e;
}
}

function subtractNum(e){
if (isInt(parseInt(e))) {
document.forms[0].mynumber.value = --e;
}
}
// -->
</script>
</head>
<body>
<form id="myform" action="javascript://" method="post" onsubmit="return false">
<input type="text" name="mynumber" value="0" size="5" onkeypress="return isNumericKey(event)" />
<input type="button" name="add" value="+" onclick="addNum(this.form.mynumber.value);" />
<input type="button" name="subtract" value="-" onclick="subtractNum(this.form.mynumber.value);" /><br />
<input type="submit" name="Submit" />
</form>
</body>
</html>

vorl
02-27-2009, 01:42 AM
Hey whammy

Thanks for the reply and code! Its sort of what I wanted but not really...sorry for the poor explanation.

So basically I want a button and the button label/value is initially '0'. When you click on the button (which shows '0'), it will add 1 so the button is now 1...and so on. Im not really concerned with subtracting.

Let me know if im unclear. :rolleyes:

Thanks again!

abduraooft
02-27-2009, 09:29 AM
So basically I want a button and the button label/value is initially '0'. When you click on the button (which shows '0'), it will add 1 so the button is now 1...and so on. Im not really concerned with subtracting.
Could you post some code that you have tried so far, so that we can work on that to tweak it.

vorl
02-27-2009, 05:27 PM
Its something like the following. When you click on the button, it toggles between 0 and 1. What I want to happen is that when you click it, it just keeps adding 1. Also this value must be able to be used in a form.

Thanks! :)




<html>
<head>

<style type="text/css" title="text/css">
<!--
.button
{
padding: 0 8px 0 8px;
font-size: 12px;
font-weight: bold;
color: white;
-webkit-border-radius: 5px;
float: left;
text-align: center;
line-height: 30px;
border: solid gray 1px;
margin-top:2px;
}

.buttonOn
{
background-color: blue;
}
.buttonOff
{
background-color: silver;
}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
function toggle(which)
{
which.innerHTML = (which.innerHTML == '1') ? '0' : '1';
which.className = (which.innerHTML == '1') ? 'button buttonOn' : 'button buttonOff';
}
//-->
</script>
</head>

<body>

<p>Button</p>
<br><span class="button buttonOff" onClick="toggle(this)">0</span></br>

</body>

</html>

vorl
03-02-2009, 09:33 PM
anyone can help me? :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum