Average value of 5 textboxes to other textbox in html template

Question

How can create html template of following?

I have 6 textboxes. Textboxes 1-5 is for input and 6 is for output. In textbox 6, i want average value of other 5 textboxes without pressing any button in order to send result to textbox 6. Input of 5 textboxes may be optional(textbox value may be blank or number).

yes . You have to write a logic in `javascript onevent` to calculate avg — soorapadman, Jul 20 '17 at 05:34

laktherock · Accepted Answer · 2017-07-20T06:51:18.773

4

I guess this is what you are looking for...

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Average Calculation</title>
</head>

<body>
    <input class="my_val" type="number" size="5" name="input1">
    <input class="my_val" type="number" size="5" name="input2">
    <input class="my_val" type="number" size="5" name="input3">
    <input class="my_val" type="number" size="5" name="input4">
    <input class="my_val" type="number" size="5" name="input5">
    <input class="output" type="number" size="5" name="input6" readonly>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="app.js"></script>
</body>

</html>

app.js

$('.my_val').keyup(function () {
    var total = 0,
        count_field = 0,
        average;

    $('.my_val').each(function () {
        var val = parseInt($(this).val(), 10);
        if (!isNaN(val)) {
            count_field += 1;
            total += val;
        }
    });
    average = total / count_field;
    $('.output').val(average);
});

Here is the working fiddle JSFiddle

Hope I helped you.

edited Jul 20 '17 at 06:51

answered Jul 20 '17 at 05:42

laktherock

427
4
19

how can i invoke your app.js to my html? Thanks for your code. – Hnin Wai Mar Soe Jul 20 '17 at 06:15
Add this code to before body tag . And place app.js in your index.html path. – laktherock Jul 20 '17 at 06:21
Your code meet with my requirements. I also found it at JSFiddle . Although invoke app.js from index.html with same folder path, app.js may be not working. Please check for me. Thanks – Hnin Wai Mar Soe Jul 20 '17 at 06:37
I will make you clear. Create a folder called average(Whatever you need). Place the index.html and app.js within that folder. Now open index.html to your browser.I also updated my answers. Please check on it. And let me know if it works. – laktherock Jul 20 '17 at 06:53
I want to input decimal number and average of decimal number for this. Please check for me. I'm new to html. – Hnin Wai Mar Soe Jul 20 '17 at 07:24
This is just an example – laktherock Jul 20 '17 at 07:38
For i want to accept only two decimal places. How can i do it? Although i put in code . It didn't work. – Hnin Wai Mar Soe Jul 27 '17 at 03:00
@hnin-wai-mar-soe Checkout this answer [Make an html number input always display 2 decimal places](https://stackoverflow.com/questions/14862009/make-an-html-number-input-always-display-2-decimal-places) – laktherock Jul 27 '17 at 04:39
Hello, I want to put animation(flash) for textbox6's border when textbox 1 to 5 have their input respectively. Please help me. Thanks – Hnin Wai Mar Soe Jul 31 '17 at 03:48
Please mark as answer. You can create another question for further doubts. – laktherock Jul 31 '17 at 04:56
Thank you.. Tell me what kind of animation u need to apply ? – laktherock Jul 31 '17 at 05:01

Average value of 5 textboxes to other textbox in html template

1 Answers1