jquery dynamically create div from input with errors

Question

I have form with two text inputs.

<form>
    1<input type="text" id="test" name="test" />
    2<input type="text" id="test2" name="test" />
</form>
<div id="dimensions"></div>
<div id="texte"></div>

When a user types values into these fields, jQuery automatically calculates the ratio and draws a rectangular div with width and height typed in form, but only up to 200x200 px.

My problem is that when I type, for example width=3 and height=100, my div is greater then max dimensions and I can't find where my mistake is.

$(document).ready(function () {
    $("#test, #test2").keyup(function () {
        var width = $("#test").val();
        var height = $("#test2").val();
        var max = 200;
        var min = 20;

    var ratio;
    if(width>=height){
      ratio = max / width;
      width = ratio * width;
      height = height * ratio;
    } else {
        ratio = max / height;
        height = ratio * height;
        width = width * ratio;
     };
         $("#dimensions").html(width + " x " + height);
        $("#texte").css({ "width":width + "px", "height":height + "px" });

    });
});

jsfiddle link

when I calculate ratio = max / width and ratio = max / height. After that when I calculate width or height I use this value from ratio, and result shoult not be greater than max value — scooti, Jul 01 '13 at 17:24
`width = ratio * width;` Ah OK, I wrongfully assumed problem was with the check, I judged too soon. It's the parseInt() like Ian said. — Jonathan, Jul 01 '13 at 17:27
`var ratio; if (width >= height) { ratio = max / width; width = ratio * width; height = height * ratio; } else { ratio = max / height; height = ratio * height; width = width * ratio; };` is really `var ratio = width >= height ? max / width : max / height; height = ratio * height; width = ratio * width;` - no need to duplicate those last two lines — Mark Schultheiss, Jul 01 '13 at 17:58

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

Try adding parseInt to your width and height inputs:

var width = parseInt($("#test").val());
var height = parseInt($("#test2").val());

Edit

As Adrian Trainor points out however, a ternary operator would be useful in this situation, as you don't know that the inputs are definitely numeric.

var width = $("#test").val() ? parseInt($("#test").val() : 0;
var height = $("#test2").val() ? parseInt($("#test2").val() : 0;

See here

It looks like it's doing string comparison and then checking if one is bigger than the other. See this question to understand what is going on

edited May 23 '17 at 11:56

Community

1
1

answered Jul 01 '13 at 17:10

Ian Clark

9,237
4
32
49

No problem Scooti :) - would you mind selecting as the right answer if you felt it was? – Ian Clark Jul 01 '13 at 17:32

score 0 · Accepted Answer · answered Jul 01 '13 at 17:20

Make sure you handle your input correctly. The input value gives you string, not numbers. You have to convert them and make the appropriate checks, however you want.

For example (you can make more checks, depending on what you consider acceptable by the user)

http://jsfiddle.net/blackjim/ABWV6/5/

$(document).ready(function () {
    $("#test, #test2").keyup(function () {
        var width = parseInt($("#test").val(),10) || '';
        var height = parseInt($("#test2").val(),10) || '';

        if (!(typeof width === 'number' && typeof height === 'number')) {
            return false;
        }
        var max = 200;
        var min = 20;

        var ratio;
        if (width >= height) {
            ratio = max / width;
            width = ratio * width;
            height = height * ratio;
        } else {
            ratio = max / height;
            height = ratio * height;
            width = width * ratio;
        };

        $("#dimensions").html(width + " x " + height);
        $("#texte").css({
            "width": width + "px",
            "height": height + "px"
        });

    });
});

score 0 · Answer 3 · answered Jul 01 '13 at 17:30

You need to parseint and make sure you are not doing calculations on empty strings. A ternary operator is useful for this:

var width = $("#test").val() ? parseInt($("#test").val()) : 0;
var height = $("#test2").val() ? parseInt($("#test2").val()) : 0;

This way, even if a field is empty, the calculation will be done using a 0 instead of empty string.

score 0 · Answer 4 · answered Jul 01 '13 at 17:37

0

I modernized your example to correct check if width/height exists and are in 20-200 range.

See jsfiddle.net/ABWV6/9/

answered Jul 01 '13 at 17:37

Alex

11,115
12
51
64

jquery dynamically create div from input with errors

4 Answers4