Set value if entered value is more than a {number}

Question

Set value if entered value is more than a {number}

79 views Asked by Azamat Safarov At 01 January 2017 at 12:15

I have a block, width and height of which I want user to set by entering a value in the input.

I also want the value of inputs not to be more than certain number. Seems like I can't get parseInt to work..

if (parseInt($("#stwidth").val(), 10) > 113) {
  $("#stwidth").val("113");
}

if (parseInt($("#stwidth").val(), 10) > 62) {
 $("#stheight").val("62");
  
}

$("#stwidth, #stheight").keyup(function () {
  $('.preview').css({width: $("#stwidth").val() + "mm", height: $("#stheight").val() + "mm"});
});

.preview {
    width: 55mm;
    height: 19mm;
    background: #fff;
    overflow: hidden;
    border: 2px solid #3e6eb0;
    margin: 50px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="stwidth" id="stwidth" value="55" maxlength="3"> x 
<input type="text" name="stheight" id="stheight"  value="19" maxlength="2"> 

<div class="preview"></div>

Original Q&A

There are 2 answers

Advaith On 01 January 2017 at 13:25

$("#stwidth, #stheight").keyup(function () {
  if (parseInt($("#stwidth").val(), 10) > 113) {
    $("#stwidth").val("113");
  }
  if (parseInt($("#stheight").val(), 10) > 62) {
 $("#stheight").val("62");
  }
  $('.preview').css({width: $("#stwidth").val() + "mm", height: $("#stheight").val() + "mm"});
});

.preview {
    width: 55mm;
    height: 19mm;
    background: #fff;
    overflow: hidden;
    border: 2px solid #3e6eb0;
    margin: 50px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="stwidth" id="stwidth" value="55" maxlength="3"> x 
<input type="text" name="stheight" id="stheight"  value="19" maxlength="2"> 

<div class="preview"></div>

The problem was with your if conditions. It was out of the keyup function, so that it will only render one time. But now it will render every time when the user press the key

**Aminur Rashid** · Accepted Answer · 2017-01-01 12:41:37

What you're missing was using Jquery keyup event handler on document onload for those user inputs. Here I'm giving a working solution, it'll not allow the width to be greater than 113 and height to be greater than 62:

<html>

<head>
    <style>
        .preview {
            width: 55mm;
            height: 19mm;
            background: #fff;
            overflow: hidden;
            border: 2px solid #3e6eb0;
            margin: 50px 0;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function() {
            $("#stwidth").keyup(function() {
                if (parseInt($("#stwidth").val(), 10) > 113) {
                    $("#stwidth").val("113");
                }
            });

            $("#stheight").keyup(function() {
                if (parseInt($("#stheight").val(), 10) > 62) {
                    $("#stheight").val("62");

                }
            });

            $("#stwidth, #stheight").keyup(function() {
                $('.preview').css({
                    width: $("#stwidth").val() + "mm",
                    height: $("#stheight").val() + "mm"
                });
            });
        });
    </script>
</head>

<body>
</body>
<input type="text" name="stwidth" id="stwidth" value="55" maxlength="3"> x
<input type="text" name="stheight" id="stheight" value="19" maxlength="2">

<div class="preview"></div>

</html>

TechQA.

Set value if entered value is more than a {number}

There are 2 answers

Related Questions in JQUERY

Related Questions in PARSEINT

Popular Questions

Popular Tags

Trending Questions