2

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.

4
  • 1
    If you are getting value for $('#url'), but not for $('#urlLabel'), then, it is because you have misspelled urlLabel in your jQuery code.
    – Uzbekjon
    Commented Sep 8, 2016 at 7:28
  • Thanks for correcting, I used the right name but I don't get values for both the fields. I just get 'clicked' in console.
    – Greenhorn
    Commented Sep 8, 2016 at 7:32
  • Hmm... From what we have, it must work. The problem might be somewhere else. Can you create jsfiddle with your actual code that replicates the problem?
    – Uzbekjon
    Commented Sep 8, 2016 at 7:36
  • Yes, I've added the fiddle. Here it is again - jsfiddle.net/iSudeep/7d9bboyL/1
    – Greenhorn
    Commented Sep 8, 2016 at 7:53

2 Answers 2

3
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());
    })
});
2
  • It is working Thanks. But, how is it $('.popover-content') while my class name is $('.popper-content') .
    – Greenhorn
    Commented Sep 8, 2016 at 12:25
  • jQuery popover wraps all the html in div with class 'popover-content'. All you need to do is find your textbox inside this div. Commented Sep 8, 2016 at 12:28
0

I think you misspelled

$(document).ready(function() {
  $('.urlDetails').click(function(){
  console.log('clicked');
  console.log($('#urlLabel').val());
  console.log($('#url').val());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Here is a working code

1
  • I have edited the spell mistake. However, your answer is a flat HTML code. As I said for me those fields appear in a popover after DOM. Try to add the following code along with Bootstrap library. $('.popper').popover({ placement: 'auto', container: 'body', html: true, content: function () { return $(this).next('.popper-content').html(); } });
    – Greenhorn
    Commented Sep 8, 2016 at 7:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.