Contain Form Within a Bootstrap Popover

Contain form within a bootstrap popover?

Either replace double quotes around type="text" within single quotes, Like:

"<form><input type='text'/></form>"

Replace Double quotes wrapping data-content with single quote, Like:

data-content='<form><input type="text"/></form>'

How to include a Form inside a Popover using Bootstrap 4.3?

Setting:

sanitize: false

your popover form works. For details see docs

$("h2 > .editable").popover({    html: true,    sanitize: false});

.editable {  color: blue;  border-bottom: 2px dashed blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">    <div class="row">        <div class="col-12 mt-5">            <h1>Bootstrap 4 form in popover</h1>            <hr>        </div>    </div>    <div class="row">        <div class="col-12">            <h2 class="mt-3">          <span                  class="editable"                  data-toggle="popover"                  data-container="body"                  data-title="Edit"                  data-content="<form>  <div class='form-group'>    <label for='exampleInputEmail1'>Email address</label>    <input type='email' class='form-control' id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email'>    <small id='emailHelp' class='form-text text-muted'>We'll never share your email with anyone else.</small>  </div>  <div class='form-group'>    <label for='exampleInputPassword1'>Password</label>    <input type='password' class='form-control' id='exampleInputPassword1' placeholder='Password'>  </div>  <div class='form-group form-check'>    <input type='checkbox' class='form-check-input' id='exampleCheck1'>    <label class='form-check-label' for='exampleCheck1'>Check me out</label>  </div>  <button type='submit' class='btn btn-primary'>Submit</button></form>">            Modify this          </span>            </h2>        </div>    </div></div>

Form elements disabled: Contain Form within a bootstrap popover embedded in Modal

You need to place your popover's elements inside modal popup. So have to use "container" attribute for popover.

But if you use Bootstrap 3.0 then you need not to do anything.

Fiddle with bootstrap3.0

Used your same code.

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

place a form within popover in bootstrap 3?

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

Popover HTML Markup:

<a href="#" id="popover">the popover link</a>
<div id="popover-head" class="hide">some title</div>
<div id="popover-content" class="hide">
  <form>
    <!-- my form -->
  </form>
</div>

Bootstrap 4 input field in popover

There is a simple mistake, you have tabindex="-1" in your modal so your input focus is removing by it.

For Bootstrap 4

MODAL + INPUT POPOVER

$(function () {
  $('[data-toggle="popover"]').popover({
      container: 'body',
      title: 'Search',
      html: true,
      placement: 'bottom',
      sanitize: false,
      content: function () {
          return $("#PopoverContent").html();
      }
  });
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<section>
    <div id="PopoverContent" class="d-none">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Recipient's username"
                   aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
            <div class="input-group-append" id="button-addon1">
                <button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
                        data-html="true" data-title="Search">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Test modal</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Recipient's username"
                                        aria-label="Recipient's username with two button addons"
                                        aria-describedby="button-addon4">
                                    <div class="input-group-append" id="button-addon4">
                                        <button class="btn btn-outline-primary" type="button" data-toggle="popover">
                                            <i class="fas fa-user-plus"></i>
                                        </button>
                                        <button class="btn btn-outline-danger" type="button">
                                            <i class="fas fa-user-minus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="container">
    <div class="row">
        <div class="col mt-5">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                Launch demo modal
            </button>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

Form elements disabled: Contain Form within a bootstrap popover embedded in Modal

You need to place your popover's elements inside modal popup. So have to use "container" attribute for popover.

But if you use Bootstrap 3.0 then you need not to do anything.

Fiddle with bootstrap3.0

Used your same code.

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

Show a form-control input inside a Bootstrap Popover

You need to add data-html='true' to your popover button.

Here is an updated JSFiddle

Unable to inject form into popover content

You need to add the option 'sanitize': false

$(function() {
  var content = '<form><textarea></textarea></form>';
  button = $("a#myButton")
  button.popover({
    'html': true,
    'sanitize': false,
    'content': content, // content that contains a <form> and <textarea, it should not injected in the popover
    'trigger': 'click',
    'placement': 'bottom'
  });
  $("a#myOtherButton").popover({
    'html': true,
    'content': 'hello<br/><br/>there', // this content should be working perfectly fine
    'trigger': 'click',
    'placement': 'bottom'
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

<div id="myDiv">
  <a id="myButton" class="btn btn-primary" style="color:white;">This is a button</a>
  <a id="myOtherButton" class="btn btn-primary" style="color:white;">This is another button</a>
</div>

Bootstrap / Popover : how to align with a form input

Ok, I've found the solution :

.on('shown.bs.popover', function () { 
    var offset = $(this).offset();
    $('.popover').css('left', Math.round(offset.left) + 'px');
});

Contain Form Within a Bootstrap Popover