jQuery onchange sum cannot restrict input type number

Question

I use the script to sum the input value, and it works. However, and when I click up and down the "input#total_selfmark" does not change, and when I type the number, the "input#total_selfmark" changes and the number is no restriction. Even I have set the min=0 max =$task_criteria->maximummark

     <div class="form-group">
{{ Form::number('selfmark','',['placeholder'=>'', 'class' =>'selfmark', 'min'=>'0','max'=>$task_criteria->maximummark]) }}
       </div>

Here is the script

$(document).ready(function() {
  //this calculates values automatically
  calculateSum();
  $(".selfmark").on("keydown keyup", function() {
    calculateSum();
  });
});

function calculateSum() {
  var sum = 0;

  //iterate through each textboxes and add the values
  $(".selfmark").each(function() {
    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
      $(this).css("background-color", "#FEFFB0");
    } else if (this.value.length != 0) {
      $(this).css("background-color", "red");
    }
  });

  $("input#total_selfmark").val(sum.toFixed(2));
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
We miss some HTML here!

Please click edit, then click the snippet editor [<>] and post a minimal reproducible example with RENDERED HTML and relevant script (jQuery version matters too - yours is ANCIENT) — mplungjan
– mplungjan, Commented Oct 18, 2018 at 5:24
Calculate sum function should receive an element to work with, as an argument — Piterden
– Piterden, Commented Oct 18, 2018 at 5:27
I made you a snippet using the [<>] snippet editor. Please click edit, scroll down and click "edit the above snippet" and add relevant HTML, not template - also use $(".selfmark").on("input", calculateSum).trigger("input"); — mplungjan
– mplungjan, Commented Oct 18, 2018 at 5:27
@Piterden no, OP wants to iterate over all fields on input in any field — mplungjan
– mplungjan, Commented Oct 18, 2018 at 5:37

mplungjan · Accepted Answer · 2018-10-18 06:10:44Z

2

I am guessing your HTML, also I assume you have an old jQuery version on purpose

$(document).ready(function() {
  $(".selfmark").on("input", calculateSum).trigger("input");    });

function calculateSum() {
  var sum = 0;
  $(".selfmark").each(function() { // or map/reduce
    var val = this.value, max = +$(this).attr("max"), bg = "#FEFFB0";
    if (isNaN(val) || val.length == 0 || val>max) {
      bg= "red";
    }    
    else {
      sum += parseFloat(val);
    } 
    $(this).css("background-color", bg);
  });

  $("input#total_selfmark").val(sum.toFixed(2));
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
0-10: <input type="number" min="0", max="10" class="selfmark" value="5" /><br/>
0-20: <input type="number" min="0", max="20" class="selfmark" value="0" /><br/>
0-30: <input type="number" min="0", max="30" class="selfmark" value="0"/><br/>
<input type="text" readonly id="total_selfmark" />

Alternative - not shorter but using fn.map and reduce

$(document).ready(function() {
  $(".selfmark").on("input", calculateSum).trigger("input");
});

function calculateSum() {
  var sum = $(".selfmark").map(function(idx, ele) {
    var val = this.value, max = +$(this).attr("max"), bg = "#FEFFB0";
    if (isNaN(val) || val.length == 0 || val > max) {
      bg = "red";
      val = 0;
    } 
    else val = +val;
    $(this).css("background-color", bg);
    return val;
  }).get().reduce(function(a, b) { return a + b; }, 0); // sum the array
  $("input#total_selfmark").val(sum.toFixed(2));
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
0-10: <input type="number" min="0", max="10" class="selfmark" value="5" /><br/>
0-20: <input type="number" min="0", max="20" class="selfmark" value="0" /><br/>
0-30: <input type="number" min="0", max="30" class="selfmark" value="0"/><br/>
<input type="text" readonly id="total_selfmark" />

edited Oct 18, 2018 at 6:10

answered Oct 18, 2018 at 5:31

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mplungjan Over a year ago

You are welcome. It was fun to do since there was actually 3 things to fix, where one should think only one was needed

mplungjan Over a year ago

@DonaldDonald I made another version that is a little more elegant (DRY)

Donald Donald Over a year ago

I don't really understand this but I will learn I am new to coding

mplungjan Over a year ago

That is why I gave you one using your code, and one that was using $map/reduce

Piterden · Accepted Answer · 2018-10-18 05:55:57Z

0

$(document).ready(function() {
  const $selfmarks = $(".selfmark");
  $selfmarks.on("input", calculateSum);
  $selfmarks.trigger("input");

  function calculateSum(e) {
    e.target.style.background = e.target.value === '' ? 'red' : 'transparent';
    e.target.value = Number(e.target.value) > 10 ? 10 : e.target.value
    
    const sum = Array.from($selfmarks).reduce(function (acc, $cur) {
      acc += Number($cur.value || 0)
      return acc
    }, 0);

    $("input#total_selfmark").val(sum.toFixed(2));
  }
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="number" min="1" max="10" class="selfmark" /><br/>
<input type="number" min="1" max="10" class="selfmark" /><br/>
<input type="number" min="1" max="10" class="selfmark" /><br/>
<input type="text" readonly id="total_selfmark" />

edited Oct 18, 2018 at 5:55

answered Oct 18, 2018 at 5:37

Piterden

7995 silver badges17 bronze badges

3 Comments

mplungjan Over a year ago

That looks neat, I assume that with a jQuery 1.10, he wants to support older browsers that don't like the fat arrow

Piterden Over a year ago

@mplungjan UPD with bg color change, and also removed arrow

Piterden Over a year ago

@mplungjan thnx, fixed

Collectives™ on Stack Overflow

jQuery onchange sum cannot restrict input type number

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related