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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help with a form script

    Hey All,

    1st post so please be kind lol :-)

    I am after a script with radio buttons so a potential customer can click the buttons, it totals the amounts of "yes", and then on the click of the button takes you to the results page as shown in the pictures attached.

    When it takes you tot he result page, i only want 1 picture to show, ie if the result is 13, the 13 - 17 picture is just show ;-)

    Hope some one can help :-)
    Attached Thumbnails Attached Thumbnails Help with a form script-test-page.jpg   Help with a form script-result-page1.jpg  

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Going to the second page and showing one out of four pictures is easy.

    Your total is calculated in javascript and inserted in the <input> box and it alters the address of the image link.
    The image link has
    <a id='linl' href="attachment.php?img=1">
    <img src="img.gif" >
    </a>

    the js has:
    var total = '3'; <=== calculated
    document.getElementById('linl').href='attachment.php?img='+total;

  • Users who have thanked sunfighter for this post:

    Thian (11-12-2011)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Everything together:
    Code:
    <body>
    <input type="button" value="push" onclick="change();" />
    <br /><br />
    <input type="radio" name="choice1" id="choice1_yes" value="yes" /> Yes<br />
    <input type="radio" name="choice1" id="choice1_no" value="no" /> No
    <br /><br />
    <input type="radio" name="choice2" id="choice2_yes" value="yes" /> Yes<br />
    <input type="radio" name="choice2" id="choice2_no" value="no" /> No
    <br /><br />
    <input type="radio" name="choice3" id="choice3_yes" value="yes" /> Yes<br />
    <input type="radio" name="choice3" id="choice3_no" value="no" /> No
    <br /><br />
    <input type="radio" name="choice4" id="choice4_yes" value="yes" /> Yes<br />
    <input type="radio" name="choice4" id="choice4_no" value="no" /> No
    <br /><br />
    Total<input type="text" id="print" size="2" />
    <a id='linl' href="attachment.php?img=1">
    <img src="images/spinner20.gif" width="20" height="20" alt="" />
    </a>
    
    <script type="text/javascript">
    function change()
    {
    	var total = 0;
    	for (i=1; i < 5; i++)
    	{
    		var tom = document.getElementById('choice'+i+'_yes').checked;
    		if (tom == true)
    		{
    			total++;
    		}
    	}
    	document.getElementById('print').value=total;
    	document.getElementById('linl').href='attachment.php?img='+total;
    }
    </script>
    </body>
    Your second page uses $_GET['img'] to choose the image that is displayed.

  • Users who have thanked sunfighter for this post:

    Thian (11-12-2011)

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Sunfighter

    Thank you for your quick reply, much appreciated!!!

    I am struggling with the second page and for it to get a particular picture per results to show, I have attached a zip of the project if you could possibly have a look

    Thian :-) :-)
    Last edited by Thian; 11-13-2011 at 11:54 PM.

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Can anyone help me with this please, I am not sure if I have to create a php file or not lol

    :-)

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    I have made the radio box total automatic and gave you a completed page two.

    StressTest.html
    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" xml:lang="en" lang="en">
    <head>
    <style type="text/css">
    .box1 {
    	float:left;
        width:80px;
        clear:left;
        text-align:right;
        font-family:arial bold;
        font-size:13px;color:#9933CC
        }
    .box2 {
    	float:left;
    	padding-left:15px;
    }
    </style>
    <link rel="stylesheet" href="http://dl.dropbox.com/u/25307673/myoka/myokaStyle.css" type="text/css" media="screen" />
    </head>
    
    <body>
    
    <div style="width: 520px;  background-image:url(http://dl.dropbox.com/u/25307673/myoka/myokaStress/MyokaLogo.png); background-repeat: no-repeat; padding: 0px; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">
    
    <a href="http://www.facebook.com/myoka.spas?sk=app_128953167177144" target="_blank"><img src="http://dl.dropbox.com/u/25307673/myoka/myokaFanPage/lastMinCall.png" alt="Last Minute Deals" style="float:right; border:0px;" /></a>
    
    
    <form style="padding-top:125px; padding-left:15px" action="">
    <h3 style="color:#534c4a">1. Do you frequently neglect your diet?</h3>
    <input type="radio" name="choice1" id="choice1_yes" value="yes" onchange="change();"  />
    Yes<br />
    <input type="radio" name="choice1" id="choice1_no" value="no" onchange="change();"  />
    No <br /><br />
    <h3 style="color:#534c4a">2. Do you frequently try to do everything yourself?</h3>
    <input type="radio" name="choice2" id="choice2_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice2" id="choice2_no" value="no" onchange="change();" />
    No <br /><br />
    <h3 style="color:#534c4a">3. Do you frequently blow up easily?</h3>
    <br />
    <input type="radio" name="choice3" id="choice3_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice3" id="choice3_no" value="no" onchange="change();" />
    No <br /><br />
    <h3 style="color:#534c4a">4. Do you frequently seek unrealistic goals?</h3>
    <input type="radio" name="choice4" id="choice4_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice4" id="choice4_no" value="no" onchange="change();" />
    No <br /><br />
    <h3 style="color:#534c4a">5. Do you frequently fail to see the humour in situations others
        find funny?</h3>
    <input type="radio" name="choice5" id="choice5_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice5" id="choice5_no" value="no" onchange="change();" />
    No <br /><br />
    <h3 style="color:#534c4a">6. Do you frequently get easily irritated?</h3>
    <input type="radio" name="choice6" id="choice6_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice6" id="choice6_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">7. Do you frequently make a "big deal" of everything?</h3>
    <input type="radio" name="choice7" id="choice7_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice7" id="choice7_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">8. Do you frequently complain that you are disorganized?</h3>
    <input type="radio" name="choice8" id="choice8_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice8" id="choice8_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">9. Do you frequently keep everything inside?</h3>
    <input type="radio" name="choice9" id="choice9_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice9" id="choice9_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">10. Do you frequently neglect exercise?</h3>
    <input type="radio" name="choice10" id="choice10_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice10" id="choice10_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">11.  Do you frequently have few supportive relationships?</h3>
    <input type="radio" name="choice11" id="choice11_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice11" id="choice11_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">12.  Do you frequently get too little rest?</h3>
    <input type="radio" name="choice12" id="choice12_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice12" id="choice12_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">13.  Do you frequently get angry when you are kept waiting?</h3>
    <input type="radio" name="choice13" id="choice13_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice13" id="choice13_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">14.  Do you frequently ignore stress symptoms?</h3>
    <input type="radio" name="choice14" id="choice14_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice14" id="choice14_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">15.  Do you frequently put things off until later?</h3>
    <input type="radio" name="choice15" id="choice15_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice15" id="choice15_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">16.  Do you find there is little time for your own ?</h3>
    <input type="radio" name="choice16" id="choice16_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice16" id="choice16_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">17.  Do you frequently fail to build relaxation into every day?</h3>
    <input type="radio" name="choice17" id="choice17_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice17" id="choice17_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">18.  Do you frequently spend a lot of time complaining about the past?</h3>
    <input type="radio" name="choice18" id="choice18_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice18" id="choice18_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">19.  Do you frequently race through the day?</h3>
    <input type="radio" name="choice19" id="choice19_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice19" id="choice19_no" value="no" onchange="change();" />
    No<br /><br />
    <h3 style="color:#534c4a">20.  Have you visited any Myoka Spa in the last 8 weeks?</h3>
    <input type="radio" name="choice20" id="choice20_yes" value="yes" onchange="change();" />
    Yes<br />
    <input type="radio" name="choice20" id="choice20_no" value="no" onchange="change();" />
    No<br /><br />
    
    <h5>
    Total
    <input type="text" id="print" size="2" />
    <a id='linl' href="myokaTestResults.html">
    	<img src="http://dl.dropbox.com/u/25307673/myoka/myokaStress/resultNew.png" alt="RESULTS" style="padding-left:15px; border:0px" />
    </a>
    </h5>
    </form>
    <script type="text/javascript">
    function change()
    {
    	var total = 0;
    	for (i=1; i < 21; i++)
    	{
    		var tom = document.getElementById('choice'+i+'_yes').checked;
    		if (tom == true)
    		{
    			total++;
    		}
    	}
    	document.getElementById('print').value=total;
    	document.getElementById('linl').href='TOM_myokaTestResults.php?img='+total;
    }
    </script>
    </div>
    </body>
    </html>
    And the second script
    Results.php
    Code:
    <?php
    $total = $_GET['img'];
    if ($total < 7)
    	$total = 1;
    elseif ($total < 13)
    	$total = 2;
    elseif ($total < 18)
    	$total = 3;
    elseif ($total < 20)
    	$total = 4;
    ?>
    
    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Contact Form</title>
    <script src="rollover.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://dl.dropbox.com/u/25307673/myoka/myokaStyle.css" type="text/css" media="screen" />
    </head>
    
    <body>
    <span style="color:#6A1E67;font: normal bold 12pt/14pt Arial, Helvetica, sans-serif;margin-left:140px;">
    How stressed are you?
    <h3>SCORES</h3>
    </span>
    
    <img src="http://dl.dropbox.com/u/25307673/myoka/myokaStress/score<?php echo $total; ?>.png" alt="" /><br />
    
    <a href="http://www.facebook.com/myoka.spas?sk=app_128953167177144" target="_blank">
    <img src="http://dl.dropbox.com/u/25307673/myoka/myokaFanPage//lastMin.jpg" style="padding-left:0px; padding-top:5px; border:0px" alt="" />
    </a>
    <br/>
    </body>
    </html>
    If you wish the image to be to the right of the result image just remove the <br /> after the result image.

  • Users who have thanked sunfighter for this post:

    Thian (11-13-2011)

  • #7
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thats Fantastic, Exactly what I was looking for , I hope this thread helps other people as much as it has helped me ;-) Thank you SunFighter for helping me out with this :-)

  • #8
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Arghh encounterd a problem with a Iframe, Is there any chance you coud show we the code in Javascript for the results page instead of PHP;

    <img src="http://dl.dropbox.com/u/25307673/myoka/myokaStress/score<?php echo $total; ?>.png" alt="" /><br /

    and the results;
    <?php
    $total = $_GET['img'];
    if ($total < 7)
    $total = 1;
    elseif ($total < 13)
    $total = 2;
    elseif ($total < 18)
    $total = 3;
    elseif ($total < 20)
    $total = 4;
    ?>


  •  

    Posting Permissions

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