The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Get the number of edited inputs
RainLover
post Mar 5 2019, 08:19 AM
Post #1


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
Scenario

Every semester my students need to take at least one test. The following form gives the right average grade of a student:
CODE
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Average Grade</title>
  </head>
  <body>
   <form>
Math: <input type="number" id="test1">
    <input type="number" id="test2">
    <input type="number" id="test3">
    <output id="average"></output>
    <br>
    <input type="button" value="Calculate" id="calcBtn">
   </form>
   <script>
    document.getElementById('calcBtn').addEventListener('click', function() {
     var test1 = document.getElementById('test1').value;
     var test2 = document.getElementById('test2').value;
     var test3 = document.getElementById('test3').value;
     var average = document.getElementById('average');
     average.value = (Number(test1)+Number(test2)+Number(test3)) / 3;
    });
   </script>
  </body>
</html>

The problem is it works right only if all the fields are edited. If the student doesn't take some tests, the average grade won't show the right value. I know it's because of dividing by the fixed number 3 when it calculates the average grade:
CODE
average.value = (Number(test1)+Number(test2)+Number(test3)) / 3;


Question

What is a simple approach to get the number of changed input fields?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
Christian J
post Mar 6 2019, 11:55 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
Here's an idea:

CODE
Math:
<input type="number" class="test">
<input type="number" class="test">
<input type="number" class="test">

Average grade:
<output id="average"></output>
<br>
<input type="button" value="Calculate" id="calcBtn">

<script>
document.getElementById('calcBtn').addEventListener('click', function()
{
    // any number of elements
    var test_input=document.getElementsByClassName('test');

    var grades_arr=new Array();

    for(var i=0; i<test_input.length; i++)
    {
        var val=test_input[i].value;
        //alert('Value: '+val+'\nType: '+typeof val);

        if(val.length>0) // at least one character must be entered
        {
            val=val*1; // try to convert string type of form field  to number

            if(!isNaN(val) && typeof val=='number') // try to check if type conversion was successful
            {
                grades_arr.push(val); // add valid number values to array
                //alert('Row '+i+' is a number');
            }
            else
            {
                //alert('Row '+i+' is not a  number');
            }
        }
        else
        {
            //alert('Row '+i+' is empty');
        }
    }

    // calculate average
    if(grades_arr.length>0) // at least one form field must be filled in correctly by user
    {
        var grades=0;
        for(var i=0; i<grades_arr.length; i++)
        {
            grades=grades+grades_arr[i];
        }
        grades=grades/grades_arr.length;
        document.getElementById('average').value=grades;
    }
    else
    {
        //alert('No valid data was entered');
    }
}
);
</script>

You can use any number of form fields with the CLASS "test", and the user can fill in as many of them as he wants. I haven't added any rounding of the resulting average.

There are a few gothas about the type conversion though. Currently it seems only IE11 and Chrome-based browsers prevent the user from entering non-digit characters in number INPUTs. Edge and Firefox still seem to allow it, but will consider such user data as an empty string. Older browsers that don't support HTML5 number INPUTs will regard the form fields as text INPUTs, and pass along the whole string to the javascript.

Despite the above, javascript still considers INPUT data to be of "string" type, even when numbers have been entered by the user into a number INPUT. I tried to consider all the scenarios in the script, but don't trust me on this.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
RainLover   Get the number of edited inputs   Mar 5 2019, 08:19 AM
Christian J   If the student doesn't take some tests, the a...   Mar 5 2019, 03:44 PM
RainLover   If the student doesn't take some tests, the ...   Mar 5 2019, 10:34 PM
Christian J   Here's an idea: Math: <input type=...   Mar 6 2019, 11:55 AM
pandy   Is checking for NaN really needed? Provided browse...   Mar 6 2019, 03:40 PM
Christian J   Is checking for NaN really needed? Provided brows...   Mar 6 2019, 04:52 PM
pandy   No, it doesn't. I asked mainly because I wasn...   Mar 7 2019, 05:52 AM
Christian J   Then again NaN is a tricky property that I don...   Mar 7 2019, 06:10 AM
Christian J   Seems IE11 does need checking with isNaN(), since ...   Mar 7 2019, 10:56 AM
pandy   Always IE, eh? Still. Anyway, I have this page bo...   Mar 7 2019, 05:30 PM
Christian J   I didn't understand that example either. As ...   Mar 8 2019, 06:16 AM
Christian J   Here's one with a regex instead of isNaN: Mat...   Mar 8 2019, 02:12 PM
RainLover   Here's one with a regex instead of isNaN: Ma...   Mar 9 2019, 10:41 AM
Christian J   You're welcome!   Mar 9 2019, 12:43 PM

« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 01:32 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC