Question

Var = Var * number

Web Customizations Forms

Updated September 23, 2016

asked on September 19, 2016 • Show version history

I can't wrap my head around this javascript, could someone please help me with this?

I have a field called "Student Count" with class = student

A field called "Additional Pay" with class = additional

If Student Count is more than 10 (for example 12), then "additional" = 12 * 25 (12 being the number of students, 25 being a fixed number if the Student Count is larger than 10).

If Student Count is more than 20 (for example 26), then "additional" = 26 * 50 (26 being the number of students, 50 being a fixed number if the Student Count is larger than 20).

Here is the start of my code:

$(document).ready(function(){
  $(".student input").change(function(){
 var student = $(".student input").val();

if (student >= "10" ) {
      $(".additional input").val($(".student input" * 25).val());

else if (student >= "20" ) {
      $(".additional input").val($(".student input" * 50).val());
 }
 });

Thank you!

0 0

Answer

SELECTED ANSWER

replied on September 19, 2016

The JavaScript examples found in the Forms documentation reference using the function, parseNumber, so it'd be good to incorporate that. Also, as Brian had stated, you'll need to switch the logic in your if/else if statements. Lastly, you'll need to move the multiplication operands outside of the parenthesis.

$(document).ready(function () {
  $('.student input').on('change', function() {
    var student = parseNumber($('.student input').val());
    if (student >= 20) {
      $('.additional input').val($('.student input').val()*50);
    } else if (student >= 10) {
      $('.additional input').val($('.student input').val()*25);
    }
  });
  function parseNumber(n) {
    var f = parseFloat(n); //Convert to float number.
    return isNaN(f) ? 0 : f; //treat invalid input as 0;
  }
});

2 0

replied on September 19, 2016

I totally missed the parseNumber, it didn't even occur to me that I would have to pass it as a number rather than variable. Thank you!

0 0

Replies

replied on September 19, 2016

There are two main problems that I see. The first is that input fields contain text, and you are doing string comparisons where you mean to be doing numeric comparisons. This means that instead of comparing which number is larger, you are comparing which is later in an alphabetic sort. One solution is to use code like

var student = Number($(".student input").val());

and change your constants into numbers (i.e. remove the quotation marks).

The other is that you need to switch your if and else if blocks. A value like 26 is larger than 10, so the first block will execute. This means that the second comparison (to 20) is not performed.

2 0

replied on September 19, 2016

Hey Brian, that is perfect, thank you for the explanation!!

0 0

replied on September 22, 2016 • Show version history

I was actually looking for a solution for a slightly more complex solution, Brian and Alexander helped me immensely so I wanted to post my complete problem and solution for anyone else who needed something similar:

//calculation for large classes  
 $('.student input').on('change', function() {
    var student = parseNumber($('.student input').val());
    if (student >= 21) {
      $('.additional input').val(($('.student input').val()-20)*50+250);
    }
   else if (student >= 10) {
      $('.additional input').val(($('.student input').val()-10)*25);
    }
  });
  
  function parseNumber(n) {
    var f = parseFloat(n); //Convert to float number.
    return isNaN(f) ? 0 : f; //treat invalid input as 0;
  }
  

});

If student count is below 10 - NO additional pay.

If student count is 10 to 20 - then $25 per person for any person above 10 count, below 20 count.

If student count is 20+ - then $50 per person for any person above 20 count, and still $25 from 10-20 (which I summed up to $250, so that is why you are seeing 250 in line 5).

Thanks guys!

0 0

replied on September 22, 2016

I'm glad you got it working. I want to call out one thing that relates to the previous discussion.

$('.student input').val()

This expression returns a string, and like we saw earlier you generally have to be careful about doing mathematical operations without converting to numerical values. In your case, the operation of - 10 (subtracting 10) will convert the left hand value from a string to a number. In contrast, the operation of + 10 (adding 10) would not behave this way! With the left hand value a string, Javascript will interpret this as string concatenation: "10" + 10 = "1010". One thing you sometimes see is an "extra" plus sign before the left-hand value, which converts it to a numeric value: +"10" + 10 = 20.

1 0

replied on September 23, 2016

Amazing, great tip!! Thank you!

0 0

You are not allowed to follow up in this post.

Question

Question

Var = Var * number

Answer

Replies

Sign in to reply to this post.