Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Button with addition capability?

    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

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <!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>
    Last edited by whammy; 02-26-2009 at 10:28 PM.
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    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.

    Thanks again!

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    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!


    Code:
    <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>

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    anyone can help me?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •