dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: simple javascript needed for totaling some points from radio buttons

  1. #1
    Join Date
    Feb 2017
    Posts
    3

    simple javascript needed for totaling some points from radio buttons

    I have the following form:

    Code:
          <FORM NAME="myform" ACTION="#" METHOD="post">
            <div class="w3-row">
    	  <p>&nbsp;</p>
                <div class="w3-card-4">
                  <div class="w3-container w3-pink">
                    <p>&nbsp;</p>
                  </div>
                  <div class="w3-container w3-white">
                    <fieldset>
    		<div class="w3-row">
      		  <div class="w3-container w3-threequarter">
    		    <legend><b>Technology Quiz</b></legend>
    		</div>
    		<div class="w3-container w3-quarter">
    		  <b>A B C</b>
    		</div>
    	     </div>
    	     <div class="w3-row">
      	     <div class="w3-container w3-threequarter">
                    <legend>Do you have a computer/laptop?</legend>
      	      </div>
      	      <div class="w3-container w3-quarter">
                        <input type="radio" name="t-quiz1" value="A" /> 
                        <input type="radio" name="t-quiz1" value="B" /> 
                        <input type="radio" name="t-quiz1" value="C" />
      		</div>
    		</div>
    	     <div class="w3-row">
      		<div class="w3-container w3-threequarter">
    		   <legend>Do you have a ebook reader?</legend>
    		  </div>
      		<div class="w3-container w3-quarter">
                        <input type="radio" name="t-quiz2" value="A" /> 
                        <input type="radio" name="t-quiz2" value="B" /> 
                        <input type="radio" name="t-quiz2" value="C" />
    		  </div>
    		</div>
    		<div class="w3-row">
      		<div class="w3-container w3-threequarter">
    		<legend>Do you have a tablet?</legend>
    		</div>
      		<div class="w3-container w3-quarter">
                        <input type="radio" name="t-quiz3" value="A" /> 
                        <input type="radio" name="t-quiz3" value="B" /> 
                        <input type="radio" name="t-quiz3" value="C" />
    		 </div>
    		</div>
    		<div class="w3-row">
      		<div class="w3-container w3-threequarter">
    		<legend>Do you have a digital camera?</legend>
    		</div>
      		<div class="w3-container w3-quarter">
                        <input type="radio" name="t-quiz4" value="A" /> 
                        <input type="radio" name="t-quiz4" value="B" /> 
                        <input type="radio" name="t-quiz4" value="C" />
    		</div>
    		</div>
    		<div class="w3-row">
      		<div class="w3-container w3-threequarter">
    		<legend>Do you have a flat-screen TV?</legend>
    		 </div>
      		<div class="w3-container w3-quarter">
                        <input type="radio" name="t-quiz5" value="A" /> 
                        <input type="radio" name="t-quiz5" value="B" /> 
                        <input type="radio" name="t-quiz5" value="C" />
    		</div>
    		</div>
    		<div class="w3-row">
      		<div class="w3-container w3-threequarter">
    		<legend>Do you have a internet-connected TV?</legend>
    		</div>
      		<div class="w3-container w3-quarter">
                        <input type="radio" name="t-quiz6" value="A" /> 
                        <input type="radio" name="t-quiz6" value="B" /> 
                        <input type="radio" name="t-quiz6" value="C" />
    		 </div>
    		</div>
    		<div class="w3-row">
      		<div class="w3-container w3-threequarter">
    		<legend>Do you have a GPS device?</legend>
    		</div>
      		<div class="w3-container w3-quarter">
                        <input type="radio" name="t-quiz7" value="A" /> 
                        <input type="radio" name="t-quiz7" value="B" /> 
                        <input type="radio" name="t-quiz7" value="C" />
    		 </div>
    		</div>
    		<div class="w3-row">
      		<div class="w3-container w3-threequarter">
    		<legend>Do you have a cellphone?</legend>
    		 </div>
      		<div class="w3-container w3-quarter">
                        <input type="radio" name="t-quiz8" value="A" /> 
                        <input type="radio" name="t-quiz8" value="B" /> 
                        <input type="radio" name="t-quiz8" value="C" />
    		</div>
    		</div>
    		<div class="w3-row">
      		<div class="w3-container w3-threequarter">
    		<legend>Do you use more than 10 spps on your phone?</legend>
    		</div>
      		<div class="w3-container w3-quarter">
                        <input type="radio" name="t-quiz9" value="A" /> 
                        <input type="radio" name="t-quiz9" value="B" /> 
                        <input type="radio" name="t-quiz9" value="C" />
    		</div>
    		</div>
    		<div class="w3-row">
      		<div class="w3-container w3-threequarter">
                    <input type="submit" value="Submit now" />
                      </div>
    		</div>
    		</fieldset>
                  </div>
       	      <div class="w3-container w3-pink">
                    <p>&nbsp;</p>
                  </div>
                </div>
                <br>
                <INPUT TYPE="button" NAME="button" Value="Total" onClick="testResults(this.form)">
            </div>
         </FORM>
    Each A is worth 2 points, each B is worth 1 point; each C is worth 0.
    What I would like is a simple total of the checked buttons, the result would be between 0 and 18 maximum.
    The result should be visible on this same page, preferably at the bottom of the ABC columns. There's nothing secret or special about the total number, so it should just appear with or without the submit button. And since this is simply a calculation of numbers on the same page whether it is set for 'get' or 'post' is of no importance, the value are not being passed on to any other page and are not being used anywhere else, only at the bottom of the form itself.
    Thanks.

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,889

    Lightbulb

    Cleaned the HTML up a bit, but see if you can understand the JS portion.
    If this is homework, BE SURE you understand the underlying logic before you turn it in.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> HTML5 page </title>
    <style>
     .w3-threequarter { float:left; width: 75%; }
     .w3-quarter { float: left; width: 25%; }
     fieldset { width: 50%; }
     input[type='radio'] { width: 18%; }
    </style>
    
    </head>
    <body>
    <FORM NAME="myform" ACTION="#" METHOD="post" onsubmit="return testResults()">
     <div class="w3-row">
      <p>&nbsp;</p>
      <div class="w3-card-4">
       <div class="w3-container w3-pink"> <p>&nbsp;</p> </div>
       <div class="w3-container w3-white">
    
        <fieldset> <legend><b>Technology Quiz</b></legend>
    
         <div class="w3-row">
          <div class="w3-container w3-threequarter"> &nbsp; </div>
          <div class="w3-container w3-quarter">
           <b>&nbsp; A &nbsp; &nbsp; &nbsp; B &nbsp; &nbsp; &nbsp; C &nbsp;</b>
          </div>
         </div>
    
         <div class="w3-row">
          <div class="w3-container w3-threequarter"> Do you have a computer/laptop? </div>
          <div class="w3-container w3-quarter">
           <input type="radio" name="t-quiz1" value="2" /> 
           <input type="radio" name="t-quiz1" value="1" /> 
           <input type="radio" name="t-quiz1" value="0" />
          </div>
         </div>
    
         <div class="w3-row">
          <div class="w3-container w3-threequarter"> Do you have a ebook reader? </div>
          <div class="w3-container w3-quarter">
           <input type="radio" name="t-quiz2" value="2" /> 
           <input type="radio" name="t-quiz2" value="1" /> 
           <input type="radio" name="t-quiz2" value="0" />
          </div>
         </div>
    
         <div class="w3-row">
          <div class="w3-container w3-threequarter"> Do you have a tablet? </div>
          <div class="w3-container w3-quarter">
           <input type="radio" name="t-quiz3" value="2" /> 
           <input type="radio" name="t-quiz3" value="1" /> 
           <input type="radio" name="t-quiz3" value="0" />
          </div>
         </div>
    
         <div class="w3-row">
          <div class="w3-container w3-threequarter"> Do you have a digital camera? </div>
          <div class="w3-container w3-quarter">
           <input type="radio" name="t-quiz4" value="2" /> 
           <input type="radio" name="t-quiz4" value="1" /> 
           <input type="radio" name="t-quiz4" value="0" />
          </div>
         </div>
    
         <div class="w3-row">
          <div class="w3-container w3-threequarter"> Do you have a flat-screen TV? </div>
          <div class="w3-container w3-quarter">
           <input type="radio" name="t-quiz5" value="2" /> 
           <input type="radio" name="t-quiz5" value="1" /> 
           <input type="radio" name="t-quiz5" value="0" />
          </div>
         </div>
    
         <div class="w3-row">
          <div class="w3-container w3-threequarter"> Do you have a internet-connected TV? </div>
          <div class="w3-container w3-quarter">
           <input type="radio" name="t-quiz6" value="2" /> 
           <input type="radio" name="t-quiz6" value="1" /> 
           <input type="radio" name="t-quiz6" value="0" />
          </div>
         </div>
    
         <div class="w3-row">
          <div class="w3-container w3-threequarter"> Do you have a GPS device? </div>
          <div class="w3-container w3-quarter">
           <input type="radio" name="t-quiz7" value="2" /> 
           <input type="radio" name="t-quiz7" value="1" /> 
           <input type="radio" name="t-quiz7" value="0" />
          </div>
         </div>
    
         <div class="w3-row">
          <div class="w3-container w3-threequarter"> Do you have a cellphone? </div>
          <div class="w3-container w3-quarter">
           <input type="radio" name="t-quiz8" value="2" /> 
           <input type="radio" name="t-quiz8" value="1" /> 
           <input type="radio" name="t-quiz8" value="0" />
          </div>
         </div>
    
         <div class="w3-row">
          <div class="w3-container w3-threequarter"> Do you use more than 10 spps on your phone? </div>
          <div class="w3-container w3-quarter">
           <input type="radio" name="t-quiz9" value="2" /> 
           <input type="radio" name="t-quiz9" value="1" /> 
           <input type="radio" name="t-quiz9" value="0" />
          </div>
         </div>
         <br>&nbsp;</br>
         <div class="w3-row">
          <div class="w3-container w3-threequarter"> <input type="submit" value="Submit now" /> </div>
          <div class="w3-container w3-quarter">
           <input type="text" id="sumA" value="0" size="1" readonly /> 
           <input type="text" id="sumB" value="0" size="1" readonly /> 
           <input type="text" id="sumC" value="0" size="1" readonly />
          </div>
         </div>
    
    
        </fieldset>
       </div>
       <div class="w3-container w3-pink"> <p>&nbsp;</p> </div>
      </div>
    <!--  <br> <INPUT TYPE="submit" value="Total" onClick="testResults()"> --> <!-- alternative to "submit" above -->
     </div>
    </FORM>
    
    <script>
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1,  str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
      return str;
    } 
    
    function testResults() {
      var v=0, sumA=0, sumB=0, sumC=0;
      for (var i=1; i<=9; i++) {
        v = getRBtnName('t-quiz'+i);
        switch (v) {
          case '2': sumA += Number(v); break;
          case '1': sumB += Number(v); break;
          default: break;
        }
      }
      document.getElementById('sumA').value = sumA;
      document.getElementById('sumB').value = sumB;
      return false;
    }
    </script>
    
    </body>
    </html>
    Just a guess to the CSS part as you did not deem it worthy to include (???)

  3. #3
    Join Date
    Feb 2017
    Posts
    3
    Thanks for the code. I have tried it but get no response from the results function. Well, I should say, I get a response - it is a downloaded file, not a number on the screen. I have used both Firefox and Chrome. I get a pop-up box asking what to do with the file, and it shows "You have chosen to open 1 which is: application/octet-stream (0 bytes)"
    I found another script which I haven't been successful at modifying, but that code shows the total number automatically as the user clicks through the radio buttons/check boxes/etc. I like that better than having a submit button.

    BTW, no this isn't a homework or an assignment of any kind, it's for a language learning website I am working on. This is simply a little exercise for new English learners, part of a larger lesson.
    The styles are handled in an external style sheet, whence I didn't include them in the above code.

  4. #4
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,889
    I am not sure what the problem is with your browser, but it works fine on all I have tested.
    I don't know what program you are using to learn from, but it may be contributing to your problem and program learning experiences.

    The program in the post should be copied and pasted to a text-only file with an extension of .html
    Then execute the saved file from a browser to see it in operation.

  5. #5
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,563
    Works fine for me too.

    Copied the code, pasted into notepad, named it - testing.html, selected all other, saved it.
    It opened in Firefox and the all looks good, even did some selection and hit submit now to get the totals.

    After all them years, surprised I remembered how to do it.
    Last edited by Train; 02-17-2017 at 09:38 AM.

  6. #6
    Join Date
    Feb 2017
    Posts
    3
    I'm using the ATutor LMS eLearning platform. In that there is a box with a few controls for working with html. I do my own html coding outside the platform then copy/paste that into the editor box for a new content page in the eLearning platform. But the script does not provide any results, just a blank downloadable document. I have also posted this to the ATutor support forum. Hopefully someone will come up with an explanation. BTW, other simple javascript, inline stuff, does work.

  7. #7
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,889
    As soon a possible, I would wean myself off the platform and into true browser scripting.
    I don't know of many projects that would be using a platform on the internet.

    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles