How to show/hide bootstrap popover near input tag on button click?

Question

JavaScript

Hello!

The page has an input element:

<input class="form-control" data-container="body" data-content="Enter at least three characters." data-placement="top" data-toggle="popover" id="id_nickname" name="nickname" placeholder="Enter nickname here" type="text" data-original-title="" title="">

button element:

<button id="test-popover" type="button" class="btn btn-default">Click!</button>

and script:

$("#test-popover").on('click', function(){
        $('#id_nickname').popover('hide');
        var anonymous_nickname = $("#id_nickname").val();
        if (anonymous_nickname.length <= 2) {
            $('#id_nickname').popover('show');
        }
    });

I'm trying to get the popover to pop up only when less than 3 characters are entered in the input. The above code does not give such an effect - the popover behaves strangely - when you enter 1-2 characters and the first time you press the button, it appears normally, on subsequent ones it appears for a split second, then disappears. Also, for some reason, popover appears when clicking in the input itself, which is undesirable. Tell me, please, how can I fix this?

Answer 1

So far, the most acceptable option has given the following code:

$("#test-popover").on("click", function(){

        var anonymous_nickname = $("#id_nickname").val();
        if (anonymous_nickname.length <= 2) {
            $('#id_nickname').popover('show');
        } else {
            $('#id_nickname').popover('destroy');
        }
    });

However, for some reason, popover still appears when clicking in the input, which is redundant.

Answer 2

I could be wrong, but it's better to check for changes as you type:

$("#test-popover").on('keyup', function(){
        var anonymous_nickname = $("#id_nickname").val();
        if (anonymous_nickname.length <= 2) {
            $('#id_nickname').popover('show');
        }else{
            $('#id_nickname').popover('hide');
        }
    });

More or less like this.

Answer 3

It's best to attach an event to an input

$("#test-popover").bind('input', function(){
        var anonymous_nickname = $("#id_nickname").val();
        if (anonymous_nickname.length <= 2) {
            $('#id_nickname').popover('show');
        }else{
            $('#id_nickname').popover('hide');
        }
    });

Answer 4

Both options didn't help. Again, it is necessary that the popover is displayed only when the user enters 0, 1 or 2 characters into the input with id="id_nickname" and presses the button with id="test-popover".

Answer 5

This piece of code should work for sure. You enter 1-2 characters in the text field, click on the button and what you need appears

$("#test-popover").on('click', function(){
        var anonymous_nickname = $("#id_nickname").val();
        if (anonymous_nickname.length <= 2) {
            $('#id_nickname').popover('show');
        }else{
            $('#id_nickname').popover('hide');
        }
    });

Example
a in the previous code, I forgot to change the id of the button to the id of the text field so that the entered characters are checked when they are entered into the text field. here is the correct code, the button is not involved anywhere:

$("#id_nickname").bind('input', function(){
        var anonymous_nickname = $("#id_nickname").val();
        if (anonymous_nickname.length <= 2) {
            $('#id_nickname').popover('show');
        }else{
            $('#id_nickname').popover('hide');
        }
    });