Show popover on text box if value is exceeded

Question

I am new in javascript. I have no idea of javascript and I am still learning. I want a small help.
I have a label with a number. The user has to manually enter a number in a textbox. If the value entered by the user exceeds the value written in the label,a popover should be shown over the input box.
I tried to do it but the popover is shown anyways. I want the popover to be shown only if condition is met.
Also,Can anyone please tell me how can I include anchor tag and <br> tag in popover content?

$(document).ready(function(){
  var Err2 = $("#max").val();
  $('input').blur(function(){
    if( $(this).val() >= Err2 ) {
      $(this).popover({
        title: 'Warning!',
        content: 'sfgjksfhgjkhdghdfgjkdfjkgdfjkgn <a href=#">fgdfgdg</a>jhksdjhfdfsdgjlk',
        placement: 'bottom'
      }).popover('show');
    } else {
      $(this).popover('destroy');
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
content=<span id="max">5</span>
<input type="text" class="form-control">

http://www.bootply.com/suPp4ThGxq

score 1 · Answer 1 · answered Mar 22 '16 at 07:49

1

First, span do not have value property. So $("#max").val() will return ""

Secound, when you read value from DOM element, they are read as string. Its is best if you use parseInt() or parseFloat() to check.

Updated Code

answered Mar 22 '16 at 07:49

Rajesh

24,354
5
48
79

score 1 · Answer 2 · answered Mar 22 '16 at 07:54

1

Simply replace the var Err2 = $("#max").val(); with var Err2 = $("#max").text();

for span it returns "" for val()

answered Mar 22 '16 at 07:54

ThorChiam

163
1
7

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

Use text() instead of val() like this :

var Err2=$("#max").text();

Also, you will have to test if you get numbers or text in your field.

See this post to test if a field contains numbers : Javascript regexp number only check

edited May 23 '17 at 10:28

Community

1
1

answered Mar 22 '16 at 07:48

Vincent G

8,547
1
18
36

Deepak · Answer 4 · 2016-03-22T08:50:45.150

Just replace your script with the one below it will work as you have expected.

<script>
$(document).ready(function(){
  var Err2 = $("#max").text();
  $('input').keyup(function(){
    if( $(this).val().length >= Err2 ) {
      $(this).popover({
        title: 'Warning!',
        content: 'sfgjksfhgjkhdghdfgjkdfjkgdfjkgn <a href=#">fgdfgdg</a>jhksdjhfdfsdgjlk',
        placement: 'bottom'
      }).popover('show');
    } else {
      $(this).popover('destroy');
    }
  })
});
</script>

Show popover on text box if value is exceeded

4 Answers4