CODEWITHSUNDEEP
javascriptjqueryhtmlif-statementinput
french_dev
french_dev

Reputation: 2177

check if input is between two int or float then display or not display content

In javascript I need to check whiwh value user enter in an html input like this:

<input type="text" id="volume" class="form-control" name="voilume"></input>

<div id"button"></div>

Ineed to know if the input is between 0,5 and 8 (so I have int and float as you can understand).

So the value has to be >= 0,5 and <= 8

If value input if between 0,5 and 8 I have to display a button, else nothing to do. But I need to prevent if user change the value many times.

So if he enters 3 display a button in div id=button", if it changes for another value like 2 for example keep displaying the button, but if he changes value input for 100 I need to remove the button in div id="button".

for now I tried something like this in order to test if it works:

var input= $('#volume').val();
    if (input >= 0.5 && input <= 8) {
        $('#button').html('ok');
    } else {
      $('#button').empty();
    }

But it does not work.

Upvotes: 2

Views: 1089

Answers (5)

Gene R
Gene R

Reputation: 3744

The problem may happen when input contain comma , so "0,5" >= 0.5 will return false and parseFloat("0,5") will return 0.

You need replace , with .

Upvotes: 1

Gavriel
Gavriel

Reputation: 19237

.val() of an input field is a string, you have to convert it to a number in order to be able to compare it to numbers by >=, <=. You also had a typo: id"button"

function go() {
    var input=parseFloat($('#volume').val(), 10);
    if (input >= 0.5 && input <= 8) {
        $('#button').html('ok');
    } else {
      $('#button').empty();
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="volume" class="form-control" name="voilume"/>

<div id="button"></div>

<button onclick="go()">run</button>

Upvotes: 3

jAndy
jAndy

Reputation: 236092

You can exploit the CSS Constraint Validation here a little bit. It seems to me like a X/Y Problem. Actually, we could set our min, max and step values for this <input> element and then let the browser do the validation:

<input type="number" min="0.5" max="8" step="0.1" required id="volume" class="form-control" name="voilume">

Alongside this, we can make usage of the pseudo css selectors :valid and :invalid like so:

input:valid~div#button {
  display: block;
}

input:invalid~div#button {
  display: none;
}

This would have the effect, that if we enter a valid value in our input control, the button will be displayed. If not, the button disappears. Magic!

Example: https://jsfiddle.net/4q1fjqwp/

Upvotes: 3

J-D
J-D

Reputation: 1575

Something like below will work.

<input type="text" id="myTextField" onblur="change()"/>
<input type="submit" id="byBtn" value="" />

JavaScript

function change() {
        var myTextbox = document.getElementById('myTextField').value;
        var button = document.getElementById('byBtn');
        if (parseFloat(myTextbox) >= 0.5 && parseFloat(myTextbox) <= 8) {
            button.value = "OK";
        } else {
            button.value = "";
        }
    }

Upvotes: 0

Sarjerao Ghadage
Sarjerao Ghadage

Reputation: 1544

you need to parse string value to integer. for that use parseInt().
it will parse string to integer.

replace this:

var input= $('#volume').val();

by

var inputval= parseInt($('#volume').val());

Upvotes: -1

Related Questions