Unable To Fetch Values From An Input Element In Bootstrap's Popover

I'm trying to fetch values from some input fields that are placed in a Bootstrap Popover. But I get empty string. Complexity: There is a button within a form, when you click this b

Solution 1:

Try following code:

$(document).ready(function() {
    $(document).on('click', '.urlDetails', function() {
        console.log('clicked');
        console.log($('.popover-content').find('#urlLabel').val());
        console.log($('.popover-content').find('#url').val());
    })
});

Solution 2:

I think you misspelled

$(document).ready(function() {
  $('.urlDetails').click(function(){
  console.log('clicked');
  console.log($('#urlLabel').val());
  console.log($('#url').val());
})
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttontype="button"class="btn btn-danger popper hyperlink"data-toggle="popover">Trial</button><divclass="popper-content hide"><inputtype="text"class="form-control"id='urlLabel'placeholder="URL Label"><inputtype="text"class="form-control url"id='url'placeholder="Complete URL"><buttontype="button"class="btn btn-default btn-block urlDetails">Done</button></div>

Here is a working code