CODEWITHSUNDEEP
phpjquerytwitter-bootstrappopoverbootstrap-popover
girish
girish

Reputation: 305

Bootstrap pop over form not submitting using AJAX

I have a bootstrap popover form which has couple of input text fields and a submit button. The popover is displayed fine with the input text fields but when clicking the submit button the default action is not prevented at all. I have also tried to log in the form submit, but does not log anything at all. I think the reason has to do with popovers and how they are implemented in the first place. 

<a href="#" id="popover" class="button blue">Create</a>
<div id="popover-head" class="hide"><h4>Create</h4></div>
<div id="popover-content" class="hide">
    <form method="post">
        <p><input type="text" id="name" name="name"></p>
        <p><input type="text" id="tel" name="tel"></p>

        <input type="submit" id="submit">
    </form>
</div>

JQ:

$('#popover').popover({
    html: true,
    placement: 'right',
    title: function () {
        return $("#popover-head").html();
    },
    content: function () {
        return $("#popover-content").html();
    }
});

$('form').submit(function(){
    alert('form submitted');
    return false;
});

Anyone with a much clear idea can be of help. Thanks.

Upvotes: 2

Views: 1738

Answers (1)

davidkonrad
davidkonrad

Reputation: 85538

The reason is, that your .popover-content is actually cloned and injected into the DOM inside a <div>, the .popover itself. So your submit() is never binded to the form shown inside the popover, since it is added later. If you bind the event to document as a delegated event handler, then it will work with the form shown inside .popover too :

$(document).on('submit','form',function(){
    alert('form submitted');
    //prevent -> return false
    return false;
});

demo -> http://jsfiddle.net/r1q6qjpo/

Note: .hide is deprecated :

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

Upvotes: 2

Related Questions