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 button a popover appears with 2 input fields and a button. I want to capture the values of these 2 fields when we click the button. If I put these fields in a form, then it would become nested forms.
Following is my code.
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
My way of fetching values
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
Here is my JSFiddle covering the above case.
$('#url')
, but not for$('#urlLabel')
, then, it is because you have misspelledurlLabel
in your jQuery code.