Sum of Separate Number Fields Shouldn't Be >100%

Question

I'm working on a project in which there are several surveys. One of them contains few questions where users have to enter number inputs as their responses and they will get an error messsage for that questions, if sum of the responses exceeds 100% when pressing submit button. (The survey is consisting multiple questions in a webpage.).

I'm sharing the HTML of responses for such a question which do have number input fields

<div class="input_row cell_wrapper row col s12" question-input-
    template="number" question-input-id="qid:258 group_id:1 input_value:1">
                <div class="input-field col s12">
                    <input name="qid:258 group_id:1 input_value:1" type="number" 
                    class="validate">
                </div>  
    </div>

    <div class="input_row cell_wrapper row col s12" question-input-
    template="number" question-input-id="qid:258 group_id:1 input_value:2">
                <div class="input-field col s12">
                    <input name="qid:258 group_id:1 input_value:2" type="number" 
                    class="validate">
                </div>  
    </div>

    <div class="input_row cell_wrapper row col s12" question-input-
    template="number" question-input-id="qid:258 group_id:1 input_value:3">
                <div class="input-field col s12">
                    <input name="qid:258 group_id:1 input_value:3" type="number" 
                    class="validate">
                </div>      
    </div>

I am trying to validate the sum of the above text input fields to 100% (not more than that) using jQuery. Kindly note that the fields are not the part of a particular form. What I've researched and referred are almost based on forms, e.g., StackExchange and StackOverflow.

Any idea?

Will it work?

var sumOfValues = 0;
$(".validate").each(function(){

    sumOfValues += $(this).val();
});
if(sumOfValues == 100)
{
    //alert message
}
else
{
    //alert message
}

Yup. Note that they're not part of any form rather they're part of separate divs. — Amlan Samanta - Rx, Jul 10 '17 at 06:21
Why does that matter? Just loop through the fields, add up all the values, and check if the result is >100. — Barmar, Jul 10 '17 at 06:30
No I won't. You're supposed to write the code, then we help you fix it. That's how this site works. — Barmar, Jul 10 '17 at 06:36
`.val()` returns a string, not a number. You need to convert it to a number, otherwise `+` is concatenation, not addition. — Barmar, Jul 10 '17 at 06:45
See https://stackoverflow.com/questions/8976627/how-to-add-two-strings-as-if-they-were-numbers — Barmar, Jul 10 '17 at 06:46

score 0 · Answer 1 · answered Jul 10 '17 at 06:47

0

You need to convert the value to a number. Otherwise you're concatenating strings, not adding numbers.

sumOfValues += parseInt($(this).val(), 10);

answered Jul 10 '17 at 06:47

Barmar

741,623
53
500
612

score 0 · Answer 2 · answered Jul 10 '17 at 07:01

Use this jquery script.

$(document).ready(function(){
    var dist = 100;
    var numTotal = 0;
    $("input[type='number']").change(function(){
        var numTotal = 0;
        $("input[type='number']").each(function(){
            var textVal = $(this).val()
            if ($.trim(textVal) != "") {
                numTotal = parseFloat(textVal) + parseFloat(numTotal);
            }
        });
        if (parseFloat(numTotal) > parseInt(dist)) {
            alert("Total not exceed by 100.");return false;
        }
    })
});

Sum of Separate Number Fields Shouldn't Be >100%

2 Answers2