using if statements with input values jquery

Question

I have a short script that calculates a number by multiplying input values. That script works fine but now I want to add if statements. For example:

HTML:

<label>Width</label><input type="text" id="width" />
<br>
<label>Length</label><input type="text" id="length" />
<br>
<label>Total</label><input type="text" id="total"/>

JavaScript:

var w = $('#width').val();
var l = $('#length').val();
var total1 = 2;
var total2 = 3;    
if((w * l) > 5){
    total = total1 * (w + l);
    parseInt($('#total').val('total'));
}
if((w * l) < 5){
    totalnew = total2 * (w + l);
    parseInt($('#total').val(totalnew));
}

So if (#width x #length) > 5, the value of (#width x #length) would be multiplied by a certain number, in this case "2".

Tried to figure it out on jsfiddle.

Here is the code that works without the if statements: http://jsfiddle.net/e45SJ/

How can I implement what I am looking to achieve with the if statements with the code I already have?

EDIT: How can I add more than one if statement? I tried this: http://jsfiddle.net/m2LxV/2/

What are you trying to accomplish with this: `parseInt($('#total').val('total'));` as it makes no sense to me. — jfriend00, Jan 23 '14 at 03:06

Arun P Johny · Accepted Answer · 2014-01-23T03:09:11.067

5

There are multiple problems

You need to do the calculation in a change handler which will get called when length/height is changed
You are doing a string concatenation when you do w + l because both w and l are string values
l + w is 5 then none of your if conditions are satisfied.
parseInt($('#total').val('total')) just assigns the value total to the element and the parseInt does not make any sense

You need to use a change handler

jQuery(function () {
    var total1 = 2;
    var total2 = 3;

    $('#width, #length').change(function () {
        var w = +$('#width').val();
        var l = +$('#length').val();
        var total;
        if ((w * l) > 5) {
            total = total1 * (w + l);
        } else {
            total = total2 * (w + l);
        }
        $('#total').val(total);
    })
})

Demo: Fiddle

edited Jan 23 '14 at 03:09

answered Jan 23 '14 at 03:03

Arun P Johny

365,836
60
503
504

Does the + cast it as an integer? – Bic Jan 23 '14 at 03:05
@Bic yes... instead of `parseInt()` – Arun P Johny Jan 23 '14 at 03:06
Neat. That is something I didn't know. Thanks :) – Bic Jan 23 '14 at 03:06
2

Why use + instead of parseInt? – cgatian Jan 23 '14 at 03:08
@cgatian there is not much difference between those 2 if the expected values are valid see http://stackoverflow.com/questions/4090518/string-to-int-use-parseint-or-number , http://stackoverflow.com/questions/17106681/parseint-vs-unary-plus-when-to-use-which and http://jsperf.com/parseint-vs-unary-operator - for me it is less typing here – Arun P Johny Jan 23 '14 at 03:14
But it adds more ambiguity to the code. IMO typing a few extra characters is worth the readability boost. I've used the binary addition operator "|" to perform what Math.floor() does, and always leave comments. FYI the pipe performs better than Math.floor() – cgatian Jan 23 '14 at 03:17
How can I add more than one if statement to the code? I tried this: http://jsfiddle.net/m2LxV/2/ – Josan Iracheta Jan 24 '14 at 07:18

cgatian · Answer 2 · 2014-01-23T03:14:42.420

Since the question asked to use your code to make the modification thats what I did. Not much has changed here and I commented any parts that might seem difficult.

function calculate()
{
    //Parse the string value into an integer
    var w = parseInt($('#width').val());
    var l = parseInt($('#length').val());
    var total1 = 2;
    var total2 = 3;

    //Perform IF
    //suggestion to use an If {} Else
    if((w * l) > 5)
    {
        //Set an internal value of total
        var total = total1 * (w + l);
        //Update the label's value to total
        $('#total').val(total);
    }
    if((w * l) < 5)
    {
        //Same logic as above
        var total = total2 * (w + l);
        $('#total').val(total);
    }
}

//Simple button event for testing
$('button').click(function()
                  {
                    calculate();
                  });

http://jsfiddle.net/LLu5s/

Some things to keep in mind

This is a great case to use an IF ELSE logic block
$('#total').val('total') translates to > Select the input element and set its value the string string value of "total"
parseInt() will convert the string value to integer. So even though you selected the value from width and length its of type string. so performing (w + l) will actually result in combining the two strings together, not adding numbers.

I want to implement more than one if statement without an else. How would I go about doing that? Also, how can I do it without the calculate button? I tried this: http://jsfiddle.net/m2LxV/2/ — Josan Iracheta, Jan 24 '14 at 07:20
use an IF{} ELSE IF{} ELSE IF{} Or perhaps a switch statement. http://jsfiddle.net/re6cg/ — cgatian, Jan 24 '14 at 13:28

using if statements with input values jquery

2 Answers2