preventDefault form submit not working in bootstrap popover

Question

I have a bootstrap popover element with a form inside.

I do a preventDefault() when the form is submitted but it doesn't actually prevent the submit.

When I don't use the popover and a modal instead it works perfectly.

Here is my HTML:

<div class="hide" id="popover-content">
    <form action="api/check.php" class="checkform" id="requestacallform" method="get" name="requestacallform">
        <div class="form-group">
            <div class="input-group">
                <input class="form-control" id="domein" name="name" placeholder="domein" type="text">
            </div>
        </div><input class="btn btn-blue submit" type="submit" value="Aanmelden">
        <p class="response"></p>
    </form>
</div>

Here is my JavaScript file where I create the popup (main.js)

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

And this is where I do my preventDefault() in an other JavaScript file

$(".checkform").submit(function(e) {
    e.preventDefault();
    var request = $("#domein").val();
    $.ajax({
        // AJAX content here
    });
});

Why the preventDefault() isn't working?

It might be because `.checkform` is not in the DOM when the script is loaded (the function for `.submit`). You can use `$(document).on('submit', '.checkform', function(e)...` — Velimir Tchatchevsky, Aug 22 '16 at 13:26
Possible duplicate of [Prevent Default on Form Submit jQuery](http://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery) — Cruiser, Aug 22 '16 at 13:26
Possible duplicate of [How to prevent form from submitting when within bootstrap popover?](http://stackoverflow.com/questions/23092499/how-to-prevent-form-from-submitting-when-within-bootstrap-popover?rq=1) — Cody Ｇ, Aug 22 '16 at 13:29

score 4 · Accepted Answer · edited May 23 '17 at 12:34

4

You're trying to append event handler for .checkform before adding it to DOM. You need to load second javascript file after loading contents html or append event globaly:

$("body").on("submit",".checkform", function(e){
    e.preventDefault();
    var request = $("#domein").val();
    $.ajax({
       ...
});

You can read more about events binding on dynamic htmls here

edited May 23 '17 at 12:34

Community

1
1

answered Aug 22 '16 at 13:26

Gvidas

1,964
2
14
21

score 2 · Answer 2 · answered Aug 22 '16 at 13:29

Try it like this please:

$(document).on('submit', '.checkform', function(e){
    e.preventDefault();
    var request = $("#domein").val();
    $.ajax({
       ...
});

It is possible that the popover isn't loaded on page load and is getting generated just when it is needed so you need the document selector.

gaetanoM · Answer 3 · 2016-08-22T14:00:34.123

Because whenever the popover is opened a new dom fragment is created on the fly you may take advantage on this to attach events or manipulate the html itself like you need.

From bootstrap popover docs you need to listen for this event:

inserted.bs.popover: This event is fired after the show.bs.popover event when the popover template has been added to the DOM.

So, my proposal is to avoid the event delegation and attach the event directly to the correct element:

$(function () {
  // open the popover on click
  $('#popover').popover({
    html: true,
    content: function () {
      return $("#popover-content").html();
    }
  });
  
  // when the popover template has been added to the DOM
  // find the correct element and attach the event handler
  // because the popover template is removed on close
  // it's useless to remove the event with .off('submit')
  $('#popover').on('inserted.bs.popover', function(e){
    
    
    $(this).next('.popover').find('.checkform').on('submit', function(e){
      e.preventDefault();
      var request = $("#domein").val();
      
      // do your stuff

      $('#popover').trigger('click');
    });
  
  
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
<button type="button" class="btn btn-default popover-content" role="button" id="popover">
    Click to open Popover
</button>
<div id="popover-content" class="hidden">
    <form action="z.html" id="requestacallform" method="GET" name="requestacallform" class="checkform">
        <div class="form-group">
            <div class="input-group">
                <input id="domein" type="text" class="form-control" placeholder="domein" name="name"/>
            </div>
        </div>
        <input type="submit" value="Aanmelden" class="btn btn-blue submit"/>

        <p class="response"></p>
    </form>
</div>

score 0 · Answer 4 · answered Sep 08 '16 at 18:27

Thanks for the responses, I was using Meteor and had the same problem. I used @Marcel Wasilewski's response like so...

Template.voteContest.onRendered(function() {

$(document).on('submit', '.keep-vote', function(event){
    // Prevent default browser form submit
    event.preventDefault();

    // Clear all popovers
    $("[data-toggle='tooltip']").popover('hide');
});

});

preventDefault form submit not working in bootstrap popover

4 Answers4