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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I keep a simple tally with js?

    I have very limited understanding of programming, but I want to do something with javascript in the browser and don't know how to go about it. I know it could be done in C or some other language, but I have even less experience with that, so I want to see if I can do it in the browser.

    I have a questionnaire that the respondents filled out by hand, and I have to tally the results. Rather than go through and tally up the results for each question by hand on paper, I'd rather just be able to punch the values for the answers (the questions are "worst to best; 1-5" type responses) on the 10-key, have it add 1 to the appropriate box for each question, move to the next question, wait for my next entry of 1-5, and start back at the beginning again when I'm finished inputting answers for all the questions.

    I have an idea that there'd be 5 boxes per question for the tallied results and a box alongside each of those for entry of the answer. If you input "1" in that box, it'd add 1 to the first box; if you hit "2," it'd add 1 to the second box; if you hit "3," it'd add 1 to the third box, etc. I know this probably requires onKeyDown or onKeyUp to get the value of the answer, but I'm not sure how to get values captured from onKeyDown/Up through the javascript and back into the appropriate boxes. I'm not sure if I need an if...then conditional in the javascript or if it can be done some other way.

    Anyway, can anyone post some simple, sample code so I can get this going for at least one question and then I can scale it up from there?

    Thank you!
    Last edited by quiethorn; 12-15-2010 at 01:54 AM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Consider this ...

    Two possibilities, assuming I'm understanding your request:
    Code:
    <html>
    <head>
    <title>Questionaire Summary</title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=212180
    
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var 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 sum1() {
      var total = 0;
      for (var i=1; i<=5; i++) {
        total += Number(document.getElementById('qm'+i).value);
      }
      return total;
    }
    
    function sum2() {
      var tid = '';
      var total = 0;
      for (var i=1; i<=5; i++) {
        tid = 'q'+i;
        total += Number(getRBtnName(tid));
      }
      return total;
    }
    
    </script>
    </head>
    <body>
    <h1>Method 1</h1>
    Rate the question from worst (1) to best (5):<p>
    Question 1: <input id="qm1" type="text" value="" size="2"><p>
    Question 2: <input id="qm2" type="text" value="" size="2"><p>
    Question 3: <input id="qm3" type="text" value="" size="2"><p>
    Question 4: <input id="qm4" type="text" value="" size="2"><p>
    Question 5: <input id="qm5" type="text" value="" size="2"><p>
    <button onclick="alert(sum1())">Sum Method 1</button>
    
    <hr>
    <h1>Method 2</h1>
    Rate the question from worst (1) to best (5):<p>
    Question 1: <br> Worst
    <input type="radio" name="q1" value="1">
    <input type="radio" name="q1" value="2"> 
    <input type="radio" name="q1" value="3"> 
    <input type="radio" name="q1" value="4"> 
    <input type="radio" name="q1" value="5"> Best
    <p>
    Question 2: <br> Worst
    <input type="radio" name="q2" value="1"> 
    <input type="radio" name="q2" value="2"> 
    <input type="radio" name="q2" value="3"> 
    <input type="radio" name="q2" value="4"> 
    <input type="radio" name="q2" value="5"> Best
    <p>
    Question 3: <br> Worst
    <input type="radio" name="q3" value="1"> 
    <input type="radio" name="q3" value="2"> 
    <input type="radio" name="q3" value="3"> 
    <input type="radio" name="q3" value="4"> 
    <input type="radio" name="q3" value="5"> Best
    <p>
    Question 4: <br> Worst
    <input type="radio" name="q4" value="1"> 
    <input type="radio" name="q4" value="2"> 
    <input type="radio" name="q4" value="3"> 
    <input type="radio" name="q4" value="4"> 
    <input type="radio" name="q4" value="5"> Best
    <p>
    Question 5: <br> Worst
    <input type="radio" name="q5" value="1"> 
    <input type="radio" name="q5" value="2"> 
    <input type="radio" name="q5" value="3"> 
    <input type="radio" name="q5" value="4"> 
    <input type="radio" name="q5" value="5"> Best
    <p>
    <button onclick="alert(sum2())">Sum Method 2</button>
    
    </body>
    </html>
    Good Luck!

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function bump(rb)
    {
        var total = rb.form["total" + rb.name];
        total.value = parseInt(total.value) + parseInt(rb.value);
        rb.checked = false;
    }
    </script>
    </head>
    <body>
    <form>
    Rate the movie "Toy Story":<br/>
    <label><input name="rb1" type="radio" value="1" onclick="bump(this);"/> 1 </label>
    <label><input name="rb1" type="radio" value="2" onclick="bump(this);"/> 2 </label>
    <label><input name="rb1" type="radio" value="3" onclick="bump(this);"/> 3 </label>
    <label><input name="rb1" type="radio" value="4" onclick="bump(this);"/> 4 </label>
    <label><input name="rb1" type="radio" value="5" onclick="bump(this);"/> 5 </label>
    <label> Total: <input type="text" readonly name="totalrb1" value="0" />
    <hr>
    Rate this answer:<br/>
    <label><input name="rb2" type="radio" value="1" onclick="bump(this);"/> 1 </label>
    <label><input name="rb2" type="radio" value="2" onclick="bump(this);"/> 2 </label>
    <label><input name="rb2" type="radio" value="3" onclick="bump(this);"/> 3 </label>
    <label><input name="rb2" type="radio" value="4" onclick="bump(this);"/> 4 </label>
    <label><input name="rb2" type="radio" value="5" onclick="bump(this);"/> 5 </label>
    <label> Total: <input type="text" readonly name="totalrb2" value="0" />
    <hr>
    </form>
    </body>
    </html>
    ???? Not sure this is what you want, but...

    I'm having it clear the checked buttons as soon as it adds their value to the total. If you'd prefer to (a) only clear the buttons after passing all the way down the page and/or (b) only add the button values after passing all the way down the page [gives you a chance to correct errors!] and then clicking on an "Okay" button, those are both easy changes to make.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Sheesh, beaten by *SECONDS*!!!! And by a little yellow bird, at that. <grin/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow Yesssss!

    Quote Originally Posted by Old Pedant View Post
    Sheesh, beaten by *SECONDS*!!!! And by a little yellow bird, at that. <grin/>
    Finally!!!!!!

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Hey, it's okay, you win points for the banjo, in any case.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help! Unfortunately, it's not what I was asking for. Try out the code below to get a better idea. It uses buttons to tally up results in the boxes on the left. This is example would be for the results for two questions (I'd scale it up).

    For each question, you click on the button corresponding to the score that person gave for that question. After you tally everything up, you can see, for example, 8 people answered "1" on question one, 4 people answered "2" on question one, 8 people answered "3" on question one, etc., all the say down the line for each question.

    What I want is a way to tally up the values in the same way without having to click on the buttons for the corresponding answer. I'd prefer just to enter the value for each question by hitting 1, 2, 3, 4 or 5 on the keyboard for the appropriate answer, but I'm not sure how to do this. That's why I thought I'd need onKeyUp or something to do it. Pushing buttons I get, but using javascript to get the keystrokes and change the variable for the relevant box based on what key was hit is something I don't know how to do.


    Code:
    <html>
    <head>
      <script language="javascript">
    function addone(field) {
    field.value = Number(field.value) + 1;
    }
    
    </script>
      
    </head>
    
    <body>
    <form name="myform" class="section">
    
    <input value="1"   onclick="addone(question1a);" type="button" >
    <input value="2"   onclick="addone(question1b);" type="button" >
    <input value="3"   onclick="addone(question1c);" type="button" >
    <input value="4"   onclick="addone(question1d);" type="button" >
    <input value="5"   onclick="addone(question1e);" type="button" >
    
    <input name="question1a" value="0" size="1" type="text" class="box">
    <input name="question1b" value="0" size="1" type="text" class="box">
    <input name="question1c" value="0" size="1" type="text" class="box">
    <input name="question1d" value="0" size="1" type="text" class="box">
    <input name="question1e" value="0" size="1" type="text" class="box"><br>
    
    <input value="1"   onclick="addone(question2a);" type="button" >
    <input value="2"   onclick="addone(question2b);" type="button" >
    <input value="3"   onclick="addone(question2c);" type="button" >
    <input value="4"   onclick="addone(question2d);" type="button" >
    <input value="5"   onclick="addone(question2e);" type="button" >
    
    <input name="question2a" value="0" size="1" type="text" class="box">
    <input name="question2b" value="0" size="1" type="text" class="box">
    <input name="question2c" value="0" size="1" type="text" class="box">
    <input name="question2d" value="0" size="1" type="text" class="box">
    <input name="question2e" value="0" size="1" type="text" class="box">
    
    </body></html>

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Well, it's interesting that both of us read your question the same way, so I don't think you can blame the readers in this case, too much.

    Anyway, yes, you can do that. onkeypress is probably the easiest option.

    I think what I would do is simpy have onkeypress active for each line/<input> and have it simply automatically move the cursor to the next field. And then I'd only change the tallies when you hit the bottom and pressed a button or hit the return key.

    That way, if you did hit the wrong key you'd (a) have a visual indication of it and (b) have a chance to use the mouse to re-focus on the cell in error and hit another key to correct the error.

    Does that sound reasonable?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, that'd definitely be the way to do it. I just don't know how to implement it so it knows which key I've pressed and hence which box to +1. With the buttons like how it was, the script knows which button I've pressed, so the information is conveyed that way, but I don't know how to turn the keys that I press into the equivalent information. It seems like it'd involve some more work turning key presses into ascii codes, then maybe putting those in if...then statements to +1 the relevant box, etc. That's where I'm stuck since I haven't been able to figure those things out on my own.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Getting keypress and then the key values isn't hard, esp. when you want to limit it to just digits. What's a bit harder is making it work cross-browser. So to save me effort, will you be just doing this in one particular browser? If so, which one? (The dividing line is MSIE8 and below and then everything else.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd just be using Google Chrome.

    Thanks in advance for the help. I've been trying to figure this out for a few weeks.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Back in a couple of hours. Maybe sooner, but meetings interfere.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any more progress on this?

  • #14
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to try...

    How close is this to what you want to do?
    Code:
    <html>
    <head>
    <script language="javascript">
    // From: http://codingforums.com/showthread.php?p=1028148#post1028148
    
    var maxQuestions = 5;
    var QNO = 0;
    var OldQNO = 0;
    
    function numberOnly(e) {
      var code;
      if (!e) var e = window.event;
      if (e.keyCode) code = e.keyCode;
      else if (e.which) code = e.which;
    
      var flag = true;	var next = '';  var tmp = 0;
      switch (code) {
        case 8 : break;               // backspace
        case 9 : break;               // tab and shift-tab
        case 46: break;               // delete
        case 37: break;               // left arrow
        case 39: break;               // right arrow
        case 38:                      // up arrow
          QNO--;  if (QNO < 0) { QNO = 0; }
          flag = false; break;
        case 40:                      // down arrow
          QNO++;  if (QNO >= maxQuestions) { QNO = (maxQuestions-1); }
          flag = false; break;
        default: flag = false; break;
      }
      document.getElementById('TQ'+OldQNO).style.backgroundColor="white";
      OldQNO = QNO;
      document.getElementById('TQ'+QNO).style.backgroundColor="yellow";
    
      var char = String.fromCharCode(code);
    //  alert('Code: '+code+' Char: '+char);  // for testing purposes
    //  if ((code < 48) || (code > 57)) { return false; }  // limit to 0...9
    //  if ((code < 48) || (code > 52)) { return false; }  // limit to 0...4
    //  if ('0123456789-+.'.indexOf(char) >= 0) { flag = true; }
      if ('01234'.indexOf(char) >= 0) { flag = true; }
                                 else { document.getElementById('entry').value = ''; }
      return flag;
    }
    
    function add_one(info) {
      var IDS = 'q'+QNO;
      var fld = Number(info);
      if (document.getElementById(IDS+fld)) { 
        var sel = document.getElementById(IDS+fld);		// alert('IDS = '+IDS+fld);
        sel.value = Number(sel.value) + 1;
      }
    }
    
    function sum() {
      var total = 0;
      var fld = '';
      for (var i=0; i<5; i++) {
        total = 0;
        for (var q=0; q<maxQuestions; q++) {
          fld = 'q'+q+i;
          total += Number(document.getElementById(fld).value);
        }
        fld = 'sum'+i;
        document.getElementById(fld).value = total;
        currentQuestion = 0;
      }
    }
    </script>
    </head>
    <body onload="document.getElementById('TQ0').style.backgroundColor='yellow';document.getElementById('entry').focus()">
    <form name="myform" class="section" onsubmit="return false">
    <h1>Tally Sheet</h1>
    <script type="text/javascript">
    var str = '';
    var tid = '';
    
    /* using single input */
    str = 'Entry for question (0-4,Up or Down): ';
    str += '<input type="text" id="entry" value="" size="1" autocomplete="off"';
    str += ' onkeyup="if(numberOnly(event)){add_one(this.value);';
    str += 'document.getElementById(\'entry\').value=\'\';this.select()}">';
    /* */
    
    str += '<table border="1">';
    str += '<tr style="font-size:1.5em"><td>Score</td><td>&nbsp;</td><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td></tr>';
    for (var q=0; q<maxQuestions; q++) {
      tid = 'q'+q;
      str += '<tr><td id="TQ'+q+'">Question '+(q+1)+'</td><td></td>';
      for (j=0; j<5; j++) {
        str += '<td>';
        str += ' <input id="'+tid+j+'" value="0" size="1" type="text" class="box" readonly>';
        str += '</td>';
      }
      str += '</tr>';  // alert(str);
    }
    
    str += '<tr><th><button onclick="sum()">Item Totals</button></th>';
    str += '<td>&nbsp;</td>';
    str += '<td> <input name="sum0" id="sum0" value="0" size="1" type="text" class="box"> </td>';
    str += '<td> <input name="sum1" id="sum1" value="0" size="1" type="text" class="box"> </td>';
    str += '<td> <input name="sum2" id="sum2" value="0" size="1" type="text" class="box"> </td>';
    str += '<td> <input name="sum3" id="sum3" value="0" size="1" type="text" class="box"> </td>';
    str += '<td> <input name="sum4" id="sum4" value="0" size="1" type="text" class="box"> </td>';
    str += '</tr>';
    
    str += '</table>';
    document.write(str);
    </script>
    </body>
    </html>

  • #15
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I didn't get back sooner. Christmas and relatives and all that... The code looks great! Exactly what I was hoping for. I'll look it over and see if I can figure out what's going on so I can scale it up for more questions. Thank you so much!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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