www.webdeveloper.com
Results 1 to 12 of 12

Thread: Sum radio buttons by category

  1. #1
    Join Date
    Dec 2011
    Location
    Johannesburg, South Africa
    Posts
    7

    Red face Sum radio buttons by category

    i have created an online assessment form and have been able to total the form as a percentage. I now need to sum certain radio buttons which have been categorised by category and insert the results in the table at the bottom of the page in the "results" table. I have been trying to figure this out for 3 days now and would greatly appreciate some help with the coding. My script is very long as I have 8 categories and 40 questions in this form so if you coiuld please view it live online and assist: www.creditincontrol.co.za . Thanks a million!

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    You have only to make tests to know if the names of buttons contain keywords like : career, home, money, personal, recreation, relationship, spirit and wellness. With an array (cat) for category and ttc for totals, you have only to modify the total function
    Code:
    function total(frm) {
      var tot=0,ttc=[0,0,0,0,0,0,0,0];
      var cat="career,home,money,personal,recreation,relationship,spirit,wellness".split(',');
      var cct="10/6,...".split(',');
    
      for(var i=0; i<frm.elements.length; i++) {
        if(frm.elements[i].type=="checkbox" || frm.elements[i].type=="radio") {
          if(frm.elements[i].checked) tot+=Number(frm.elements[i].value);
            for(var j=0; j<cat.length; j++) {
               if (new RegExp(cat[j]).test(frm.elements[i].name)) {ttc[j]++;break;}
            }
        }
      }
      document.getElementById("totalDiv").firstChild.data=tot*4/8+"%";
    // Display the values with id (for the td tags *) : idcareer, idhome, idmomey... 
      for(var j=0; j<cat.length; j++) {// to adapt with coefficients by category 
        document.getElementById("id"+cat[j]).innerHTML=ttc[j]*cct[j]+"%";}
      }
    }
    NB : It's not useful to insert div in td tags and you have to div with the same id (which must be unique) totalDiv

  3. #3
    Join Date
    Dec 2011
    Location
    Johannesburg, South Africa
    Posts
    7
    You're a genius!!!! Thanks so much! Please can you help me with the code in getting these category totals to display in the "results" table at the bottom of the page? They should start displaying a result as soon as the first radio button group is clicked.

  4. #4
    Join Date
    Dec 2011
    Location
    Johannesburg, South Africa
    Posts
    7
    Hi J,
    I'm getting the following error:
    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB7.2; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; MASM; InfoPath.2; .NET4.0C; AskTbF-ET/5.11.3.15590)
    Timestamp: Fri, 23 Dec 2011 07:34:59 UTC


    Message: 'document.getElementById(...)' is null or not an object
    Line: 26
    Char: 5
    Code: 0
    URI: http://www.creditincontrol.co.za/


    Message: 'document.getElementById(...)' is null or not an object
    Line: 26
    Char: 5
    Code: 0
    URI: http://www.creditincontrol.co.za/


    Message: 'document.getElementById(...)' is null or not an object
    Line: 26
    Char: 5
    Code: 0
    URI: http://www.creditincontrol.co.za/


    Message: 'document.getElementById(...)' is null or not an object
    Line: 26
    Char: 5
    Code: 0
    URI: http://www.creditincontrol.co.za/


    Message: 'document.getElementById(...)' is null or not an object
    Line: 26
    Char: 5
    Code: 0
    URI: http://www.creditincontrol.co.za/


    Message: 'document.getElementById(...)' is null or not an object
    Line: 26
    Char: 5
    Code: 0
    URI: http://www.creditincontrol.co.za/


    Message: 'document.getElementById(...)' is null or not an object
    Line: 26
    Char: 5
    Code: 0
    URI: http://www.creditincontrol.co.za/


    Message: 'document.getElementById(...)' is null or not an object
    Line: 26
    Char: 5
    Code: 0
    URI: http://www.creditincontrol.co.za/


    Message: 'document.getElementById(...)' is null or not an object
    Line: 26
    Char: 5
    Code: 0
    URI: http://www.creditincontrol.co.za/


    Message: 'document.getElementById(...)' is null or not an object
    Line: 26
    Char: 5
    Code: 0
    URI: http://www.creditincontrol.co.za/

    Message: 'document.getElementById(...)' is null or not an object
    Line: 26
    Char: 5
    Code: 0
    URI: http://www.creditincontrol.co.za/

    Which refers to line:
    document.getElementById("id"+cat[j]).innerHTML=ttc[j]*cct[j]+"&#37;";}

    Please can you have a look at this code....

  5. #5
    Join Date
    Dec 2011
    Location
    Johannesburg, South Africa
    Posts
    7
    Sorry about that....I copied the error from my browser and it "spat" it out multiple time....humble apologies.

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    It is simply advisable to complete the coefficients (var cct="10/6,...".split(',') ) and to give id to the cells of the last table.
    Code:
    <table bordercolor="#00659c" cellspacing="0" width="512" border="1" frame="box" id="lasttable">
    <tr>
    <td align="center" bgcolor="#00659c" colspan="2"><b><font color="#ffffff" size="3"><a name="results" id="results"></a>Quality of Life Assessment Results</font></b></td>
    </tr>
    <tr>
    <td align="center" width="433"><font size="3">Category</font></td> 
    <td align="center" width="69"><b><font size="2">Result &#37;</font></b></td>
    </tr>
    <tr>
    <td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">1. Career</font></div></td> 
    <td align="center" bgcolor="#DDE4FA" id="idcareer"></td>
    </tr>
    <tr>
    <td align="right"><div align="left"><font size="3">2. Home &amp; Family</font></div></td> 
    <td align="center" id="idhome">&nbsp;</td>
    </tr>
    <tr>
    <td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">3. Money</font></div></td> 
    <td align="center" bgcolor="#DDE4FA" id="idmomey">&nbsp;</td>
    </tr>
    <tr>
    <td align="right"><div align="left"><font size="3">4. Personal Development</font></div></td> 
    <td align="center" id="idpersonal">&nbsp;</td>
    </tr>
    <tr>
    <td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">5. Recreation</font></div></td> 
    <td align="center" bgcolor="#DDE4FA" id="idrecreation">&nbsp;</td>
    </tr>
    
    <tr>
    <td align="right"><div align="left"><font size="3">6. Relationships &amp; Communication</font></div></td> 
    
    <td align="center" id="idrelationship">&nbsp;</td>
    </tr>
    
    <tr>
    <td align="right" bgcolor="#DDE4FA"><div align="left"><font size="3">7. Spirit</font></div></td> 
    <td align="center" bgcolor="#DDE4FA" id="idspirit">&nbsp;</td>
    </tr>
    <tr>
    <td align="right"><div align="left"><font size="3">8. Wellness</font></div></td> 
    <td align="center" id="idwellness">&nbsp;</td>
    </tr>
    <tr>
      <td align="right" bgcolor="#DDE4FA">Your score is</td>
    
      <td colspan="5" align="center" bgcolor="#DDE4FA"><div id="totalDiv">0</div>
      <script type="text/javascript">total(document.getElementById("theForm"));</script></td>
    </tr>
    </table>
    //...
    // useless code to remove
    <div id="totalDiv"></div>
    <script type="text/javascript">total(document.getElementById("theForm"));</script>
    
    The div and font tags of the last table (with an id lasttable) would be to replace by an unique style (align-left is the default value).
    Code:
    <style type "text/css">
    #lasttable td{font-size:3}
    </style>
    NB : An error (among others ?) : the ttc[j]++ (in total function) is probably to replace by a ttc[j]+=Number(frm.elements[i].value);
    Last remark : it could be better to define an local var currentElement = frm.elements[i]; in the first loop of this function to avoid multiple calls to this global indicated variable.
    Last edited by 007Julien; 12-23-2011 at 04:36 AM.

  7. #7
    Join Date
    Dec 2011
    Location
    Johannesburg, South Africa
    Posts
    7
    Thanks for the additional coding. I've done as you advised and have changed the necessary code....no errors coming up but the results for individual categories are not displaying in the "results" table... Please can you look at my last updated code and see what I have done wrong? Thanks a million for your help....it's greatly appreciated!

  8. #8
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    This function (brackets were missing) and an id="idmoney" instead an id="idmomey" should solve your problems...
    Code:
    function total(frm) {
      var tot=0,ttc=[0,0,0,0,0,0,0,0];
      var cat="career,home,money,personal,recreation,relationship,spirit,wellness".split(',');
    
      for(var i=0; i<frm.elements.length; i++) {
    	var curElement = frm.elements[i];
      	if(curElement.type=="radio" && curElement.checked) { 
        		tot+= Number(curElement.value);
          		for(var j=0; j<cat.length; j++){ 
          			if (new RegExp(cat[j]).test(curElement.name)){// alert(j+' '+curElement.name)
    				ttc[j]+=Number(curElement.value);break;}}}
      }
      document.getElementById("totalTd").innerHTML=(tot>>1)+"&#37;";
      for(var j=0; j<cat.length; j++) {
    	document.getElementById("id"+cat[j]).innerHTML=(ttc[j]<<2)+"%";
    	frm["current"+cat[j]+"total"].value=(ttc[j]<<2)+"%";
      }
    }
    I remove the curElement.checkbox (no checkbox) and the array cct (all coefficients are 4). I add a last line to fill too the hidden inputs of the form...
    I remove to the useless div totalD and add an id totalTd.
    Then the page finish like this
    Code:
    <tr>
      <td align="right" bgcolor="#DDE4FA"><strong>Your total score is</strong> &nbsp;&nbsp;&nbsp;</td>
      <td colspan="5" align="center" bgcolor="#DDE4FA" id="totalTd"></td>
      </td>
    </tr>
    </table>
    </center>
    <script type="text/javascript">total(document.getElementById("theForm"));</script>
    </div>
    </form>
    The last script call the function at the opening of the page
    Last edited by 007Julien; 12-23-2011 at 10:01 AM.

  9. #9
    Join Date
    Dec 2011
    Location
    Johannesburg, South Africa
    Posts
    7
    Eureka!!!! Thanks so much! It all works wonderfully!!!!! You truly are a genius!

    You are the only guy that was brave enough to take this on.....no-one else replied to this thread....I think it's because it was so hectic!

    Thanks once again......you're the bomb!!!

  10. #10
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Based on 007Julien's code...

    Removed some of the loops and variables:

    Code:
    <script type="text/javascript">
    
    	function total(frm)
    	{
    		var tot = 0, cat = {}, i, j, k;
    		for (i = 0, j = frm.elements; i < j.length; i++) {
    			if (j[i].type === 'radio' && (k = j[i].name.match(/([^\d]+)$/)[1])) {
    				if (cat[k] === undefined) {cat[k] = 0;}
    				if (j[i].checked) {
    					tot    += +j[i].value;
    					cat[k] += +j[i].value;
    				}
    			}
    		}
    		document.getElementById('totalTd').innerHTML = (tot >> 1) + '&#37;';
    		for (i in cat) {if (cat.hasOwnProperty(i)) {
    			document.getElementById('id' + i).innerHTML = (cat[i] << 2) + '%';
    			frm['current' + i + 'total'].value = (cat[i] << 2) + '%';
    		}}
    	}
    
    </script>
    Was rewriting the post when I sent you that message, but stopped when you said you were happy with the answer.
    Last edited by bionoid; 12-23-2011 at 02:41 PM.

  11. #11
    Join Date
    Dec 2011
    Location
    Johannesburg, South Africa
    Posts
    7
    Thanks a million for the additional code. Have now finished phase 2 of 4 of this project. Next phase (3) is to insert radar chart to show results per category. Am researching options today...

  12. #12
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    See the RaphaŽl library to build a radar chart. I use it to build this new clock...
    An minor error which round the results.
    Code:
    // This line which make a integer division
    document.getElementById('totalTd').innerHTML = (tot >> 1) + '%';
    // is to replace by this
    document.getElementById('totalTd').innerHTML = (tot/2) + '%';

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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