How to make the submit button do two things?

I want to build a win wheel where I want the user to select one of the two radio buttons: A or B, before spinning the wheel. I have a button that spins the wheel, but I want the same button to spin the wheel and also submit the form. I also don’t want the user to be able to spin the wheel without clicking one of the radio buttons.

My Code so far looks like this:


<html>
    <head>
        <title>HTML5 Canvas Winning Wheel</title>
        <link rel="stylesheet" href="main.css" type="text/css" />
        <script type="text/javascript" src="Winwheel.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    </head>
    <body>
        <div align="center">
            <h1>Risky Choice Experiment</h1>
            <br />
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                        <div class="power_controls">
                            <br />
                            <br />
                            <form class="power" cellpadding="10" cellspacing="0">
                                <p align="center">Please make a choice before spinning the wheel</p>
                                <input type="radio" id="a" name="lot" value="1" align="center" onClick="powerSelected(1)">L1<br><br>
                                <input type="radio" id="b" name="lot" value="2" align="center" onClick="powerSelected(2)">L2
                            </form>
                            <br />
                            <img id="spin_button" src="spin_off.png" alt="Spin" onClick="startSpin(); " />
                            <br /><br />
                            &nbsp;&nbsp;<a href="#" onClick="resetWheel(); return false;">Play Again</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(reset)
                        </div>
                    <td width="438" height="582" class="the_wheel" align="center" valign="center">
                        <canvas id="canvas" width="434" height="434">
                            <p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
                        </canvas>
                    </td>
                </tr>
            </table>
        </div>
        <script>
            var theWheel = new Winwheel({
                'numSegments'  : 5,     
                'outerRadius'  : 212,  
                'textFontSize' : 28, 
                'textOrientation': 'curved',
                'textAlignment': 'outer',   
                'segments'     :        
                [
                   {'fillStyle' : '#eae56f', 'text' : 'A: 10 \n B: 10'},
                   {'fillStyle' : '#89f26e', 'text' : 'A: 11 \n B: 7'},
                   {'fillStyle' : '#7de6ef', 'text' : 'A: 9 \n B: 13'},
                   {'fillStyle' : '#e7706f', 'text' : 'A: 17 \n B: 5'},
                   {'fillStyle' : '#ff8000', 'text' : 'A: 3 \n B: 15'}
                ],
                'animation' :          
                {
                    'type'     : 'spinToStop',
                    'duration' : 5,     
                    'spins'    : 8,     
                    'callbackFinished' : alertPrize
                }
            });
            var wheelPower    = 0;
            var wheelSpinning = false;

            function powerSelected(powerLevel)
            {
                // Ensure that power can't be changed while wheel is spinning.
                if (wheelSpinning == false)
                {
                    // Reset all to grey incase this is not the first time the user has selected the power.
                    document.getElementById('a').className = "";
                    document.getElementById('pw2').className = "";

                    // Now light up all cells below-and-including the one selected by changing the class.
                    if (powerLevel >= 1)
                    {
                        document.getElementById('a').className = "lottery1";
                    }

                    if (powerLevel >= 2)
                    {
                        document.getElementById('b').className = "lottery2";
                    }


                    // Set wheelPower var used when spin button is clicked.
                    wheelPower = powerLevel;

                    // Light up the spin button by changing it's source image and adding a clickable class to it.
                    document.getElementById('spin_button').src = "spin_on.png";
                    document.getElementById('spin_button').className = "clickable";
                }
            }

            // -------------------------------------------------------
            // Click handler for spin button.
            // -------------------------------------------------------
            function startSpin()
            {
                // Ensure that spinning can't be clicked again while already running.
                if (wheelSpinning == false)
                {
                    // Based on the power level selected adjust the number of spins for the wheel, the more times is has
                    // to rotate with the duration of the animation the quicker the wheel spins.
                    if (wheelPower == 1)
                    {
                        theWheel.animation.spins = 3;
                    }
                    else if (wheelPower == 2)
                    {
                        theWheel.animation.spins = 8;
                    }
                

                    // Disable the spin button so can't click again while wheel is spinning.
                    document.getElementById('spin_button').src       = "spin_off.png";
                    document.getElementById('spin_button').className = "";

                    // Begin the spin animation by calling startAnimation on the wheel object.
                    theWheel.startAnimation();

                    // Set to true so that power can't be changed and spin button re-enabled during
                    // the current animation. The user will have to reset before spinning again.
                    wheelSpinning = true;
                }
            }

            // -------------------------------------------------------
            // Function for reset button.
            // -------------------------------------------------------
            function resetWheel()
            {
                theWheel.stopAnimation(false);  // Stop the animation, false as param so does not call callback function.
                theWheel.rotationAngle = 0;     // Re-set the wheel angle to 0 degrees.
                theWheel.draw();                // Call draw to render changes to the wheel.

                document.getElementById('a').className = "";  // Remove all colours from the power level indicators.
                document.getElementById('b').className = "";

                wheelSpinning = false;          // Reset to false to power buttons and spin can be clicked again.
            }

            // -------------------------------------------------------
            // Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters
            // note the indicated segment is passed in as a parmeter as 99% of the time you will want to know this to inform the user of their prize.
            // -------------------------------------------------------
            function alertPrize(indicatedSegment)
            {
                // Do basic alert of the segment text. You would probably want to do something more interesting with this information.
                alert("You have won " + indicatedSegment.text);
            }
        </script>
    </body>
</html>

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.