Drupal Webform - Use Increment/Decrement like a Shopping Cart

LingerLonger
LingerLonger used Ask the Experts™
on
I have access to a Drupal 7 platform and I am looking to create a webform to collect some data. One thing I would like to be able to capture is a value for how many shots are taken at a Goal. I am envisioning this value being managed via a tally, where someone watching the game can increment the value for shots taken at Goal A each time a shot is taken.
The "game" is only a couple of minutes long. There are going to ultimately be multiple pieces of information like this - shots taken at Goal A, Goal B, Goal C, etc. - perhaps as many as 10 different things could be tallied as the Game occurs.
As a result, it's not going to be easy for the data collector to simply count in their head how many shots were taken, they need to keep track of each Goal/Thing as it happens.
I know enough about Drupal to be dangerous, so use the small words when explaining. :) Some reading I have done references PHP as an option, which is why i have tagged it, but I don't really have any familiarity with PHP to know how I would even utilize it.
Finally, Drupal is all I have access to from a development platform, so thanks in advance for not suggesting an alternative platform and related solution.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
you mean you want something like a set of tally buttons (up to 10)
so every time there is a goal the user clicks a button A
or a free kick Button B etc...

do these counts need to be stored or is it a temporary until   at the end of sent off somewhere in a form?
if so this could be done using a form
here is some code -to count  2 items Goals and free kicks
but you'll have to sort out what to do with the data at the end..

HTML:
<html>
<head>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>
<body>

    <div class="box">    
        <label for="qty1"><abbr title="Quantity1">Goal</abbr></label>
        <input id="qty1" value="0" />
        <button id="down" onclick="modify_qty1(-1)">-1</button>
        <button id="up" onclick="modify_qty1(1)">+1</button>
    </div>
   <div class="box">    
        <label for="qty2"><abbr title="Quantity2">free kick</abbr></label>
        <input id="qty2" value="0" />
        <button id="down" onclick="modify_qty2(-1)">-1</button>
        <button id="up" onclick="modify_qty2(1)">+1</button>
    </div>
</body>
</html>

Open in new window


then the style.css sheet:

input {
	font-size: 2.4em;
	background-color: transparent;
	text-align: center;
	border-width: 0;
	width: 100%;
	margin: 0 0 .1em 0;
	color: #fff;
}

label {
	display: block;
	font-size: .8em;
}

button {
	/* basics */
	color: #444;
	background-color: #B5B198;
	/* rounded corners */
    -webkit-border-radius: 6px;
          border-radius: 6px; 
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
	font-weight: bold;

}

button:hover, button:active, button:focus {
	background-color: #CBC7AE;
}

.box {
	/* basics */
	background-color: #444;
	color: #C4BE92;
    text-align: center;

	/* rounded corners */
    -webkit-border-radius: 10px;
    border-radius: 10px; 
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
    padding: .8em .8em 1em;
    float:left;
    width: 5em;	
  	-webkit-box-shadow: 0px 0px 12px 0px #000;
    box-shadow: 0px 0px 12px 0px #000;
  
}

Open in new window


and then the javascript:
function modify_qty1(val) {
    var qty1 = document.getElementById('qty1').value;
    var new_qty1 = parseInt(qty1,10) + val;
    
    if (new_qty1 < 0) {
        new_qty1 = 0;
    }
    
    document.getElementById('qty1').value = new_qty1;
    return new_qty1;
}
function modify_qty2(val) {
    var qty2 = document.getElementById('qty2').value;
    var new_qty2 = parseInt(qty2,10) + val;
    
    if (new_qty2 < 0) {
        new_qty2 = 0;
    }
    
    document.getElementById('qty2').value = new_qty2;
    return new_qty2;
}

Open in new window

Author

Commented:
Worked with my web admin to extend this into our environment, but I've got my decrement and increment buttons!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial