Calculating with JavaScript within form, outputting to dynamic field, code not working

Question

Aim: This chunk of js, is designed to grab values entered into fields in a form, assign them to variables and then perform a calculation which outputs into a field on that page.

There is a short function that means out put is set as Unknown if any of the variables are undefined or empty.

My code:

function calculate() {
    var $u5pop = $('input[name=sv_21d]').val();
    var $sam = $('input[name=sv_25d]').val();
    var $incidence = $('input[name=sv_313]').val();
    var $treated = $('input[name=sv_312]').val();


    if ($u5pop == undefined ||$u5pop == '') {
        $u5pop = 0;
    }
    else {
        $u5pop = parseFloat($u5pop);
    }

    if ($sam == undefined ||$sam == '') {
        $sam = 0;
    }
    else {
        $sam = parseFloat($sam);
    }

    if ($incidence == undefined || $incidence == '') {
        $incidence = 0;
    }
    else {
        $incidence = parseFloat($incidence);
    }
    //
    if ($treated == undefined || $treated == '') {
        $treated = 0;
    }
    else {
        $treated = parseFloat($treated);
    }

    var $determined = $u5pop / $incidence * $treated * $sam;

    if ($determined == undefined || $determined == '') {
        $determinedOut = 'Unknown';
    }
    else {
        $determinedOut = parseFloat($determined);
    }

    $('#calculation').attr('value', $determinedOut.toFixed(2));
}

The output field div #calculation is:

<input size="18" class="calculation" id="calculation" value="Click to calculate" onfocus="calculate()"/>

Such that when user click within the field it performs the calculation.

This is a structure / syntax issue I think, but everything looks good to me. Would anyone with more experienced eyes be able to see where I'm going wrong here? At current: nothing happens (the default value remains).

Many thanks!

EDIT: This works perfectly so long as all the fields are filled in, however it FAILSS to output 'unknown' if the fields are left empty and the function is called by onfocus

Most of that Javascript code can't possibly be relevant to the problem. Try reducing the code sample to the minimum necessary. — millimoose
– millimoose, Commented Oct 7, 2012 at 17:57
Also: have you looked at the Javascript debugging console for any errors? — millimoose
– millimoose, Commented Oct 7, 2012 at 17:58
is $u5pop / $incidence * $treated * $sam; meant to be $u5pop / ($incidence * $treated * $sam); or ($u5pop / $incidence) * $treated * $sam; — david strachan
– david strachan, Commented Oct 7, 2012 at 18:02
HI @millimoose and david-strachan: thanks for input. Sorry to include uneccssary code, I wasn't at all sure which part was failing me, so included it all - but I can see it's bloated. Embarressing confession: didn't know about the Javascript debugging console - I used JSLint as a debugger, but all it seemed to complain about was errant spaces or === vs == type errors. David, that syntax improvement could be it, I'll give it a go, thank you. — Gideon
– Gideon, Commented Oct 7, 2012 at 18:17
multiplication or division by 1 results in no change, Multiplication by 0 results in 0.Division by zero results in infinity. Addition or subtraction by 1 results in change. Remember to accept or upvote answer if OK — david strachan
– david strachan, Commented Oct 7, 2012 at 18:38

krg · Accepted Answer · 2012-10-07 20:19:38Z

3

See this jsFiddle. The code failed to change the input value initially until I moved the JS function above the HTML. Perhaps that's your issue!?

edited Oct 7, 2012 at 20:19

answered Oct 7, 2012 at 18:04

krg

2,8202 gold badges15 silver badges9 bronze badges

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

4 Comments

Gideon Over a year ago

Hmm, the js function is in <head>, and works ok, what's interesting here is that it works if values are in the fields, but if one of the fields is empty, focusing on the field doesn't do anything... so there must be an issue with the last part of my script

krg Over a year ago

Ah, gotcha... The issue is, calling toFixed(2) if $determinedOut is not a number. Here's an updated jsFiddle example. This example also change $var == undefined to typeof $var === 'undefined'

Gideon Over a year ago

Ah of course, that makes sense, thanks very much for your help, I'll just see if I can make that work, and accept this if it's the solution.

Gideon Over a year ago

Oh fantastic - This was exactly it: I learned lots from this! Nice way to solve, I didn't realise you could set variables equal to a modified version of themselves: $determinedOut = $determinedOut.toFixed(2); Thanks so much!

david strachan · Accepted Answer · 2012-10-07 18:22:06Z

0

Looking at jsFiddle in other answer. If $u5pop OR $sam OR $treated are changed to 0 no result obtained

If $incidence is changed to 0 the answer is infinity.(division by zero)

The default should be = 1 NOT = 0

if ($u5pop == undefined ||$u5pop == '') {
    $u5pop = 1;
}
else {
    $u5pop = parseFloat($u5pop);
}

if ($sam == undefined ||$sam == '') {
    $sam = 1;
}
else {
    $sam = parseFloat($sam);
}

if ($incidence == undefined || $incidence == '') {
    $incidence = 1;
}
else {
    $incidence = parseFloat($incidence);
}
//
if ($treated == undefined || $treated == '') {
    $treated = 1;
}

answered Oct 7, 2012 at 18:22

david strachan

7,2282 gold badges25 silver badges33 bronze badges

1 Comment

Gideon Over a year ago

Hmm, yes you are right, the issue with this fix is that it returns a value for the calculation IF the user hasn't entered values, I was hoping (with my last function) to output "Unkown" in these cases. Thanks very much for your consideration

Collectives™ on Stack Overflow

Calculating with JavaScript within form, outputting to dynamic field, code not working

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related