6

I'm trying to get the input value inside a Bootstrap popover on submit, but i got a empty value.

<div class="popover-markup"> <a href="#" class="trigger">Popover link</a> 
    <div class="head hide">Lorem Ipsum</div>
    <div class="content hide">
        <div class="form-group">
            <input type="text" id="myinput" class="form-control" placeholder="Type something…">
        </div>
        <button type="submit" id="mysubmit" class="btn btn-default btn-block">Submit</button>
    </div>
    <div class="footer hide">test</div>
</div>

$('.popover-markup>.trigger').popover({
    html: true,
    title: 'Get value',
    content: function () {
        return $(this).parent().find('.content').html();
    }
});

$(document).on("click", "#mysubmit", function () {
    var inputval = $("#myinput").val();
    alert(inputval);
    return false;
});

http://jsfiddle.net/onigetoc/RvLrA/

Gino
  • 1,834
  • 2
  • 19
  • 20

1 Answers1

13

Try referencing it like this: 

var inputval = $(".popover #myinput").val();
Trevor
  • 16,080
  • 9
  • 52
  • 83
  • @Gino Your welcome, please mark this answer as accepted if it resolved your question. (There is a little white check mark to the left of the answer that you can click) Thanks – Trevor Jan 21 '14 at 16:15
  • @Trevor, I know this is an old answer, but I'm confused as to why this answer works, where $("#myinput").val() does not? What difference (other than specifying to look at #myinput inside the .popover) does this make? – Alex Oct 12 '15 at 09:09
  • 2
    @Alex, Basically what happens with the popover in this case is that the Input element gets cloned and hidden. So there are actually two of them with the same ID. So if you don't specify to look in the .popover for the input element, jQuery selects the first matching ID it can find; the original empty input, thus returning the empty value. – Trevor Oct 12 '15 at 18:29