Bootstrap 4 Input Field in Popover

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>

Bootstrap 4: Add an input field in a popover

seems to work if you move it out of the html and into the js.

<button
    type="button"
    class="btn btn-secondary"
    data-toggle="popover"
    data-container="body">
    Popover
</button>

$(function () {
    $('[data-toggle="popover"]').popover({
        delay: {
            show: 100
        },
         html: true,
         sanitize: false,
         content: '<input type="text" value="my input value">'
    })
})

https://jsfiddle.net/mkz2qhxu/

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>

Bootstrap Popover Input Field

One simple way of hiding it would be to subscribe to blur:

$(function () {
    $("#example")
        .popover({ title: 'Twitter Bootstrap Popover', content: "It's so simple to create a tooltop for my website!" })
        .blur(function () {
            $(this).popover('hide');
        });
});

Bootstrap input field inside tooltip popover removed from output html

I found the solution...

I my case add this to the javascript:

        var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList;
        myDefaultWhiteList.input = [];

Bootstrap 4 Form HTML Popover

Your are searching for sanitize option

MORE INFO

$("#brokenpopovertest").popover({  html: true,  title: "Broken Popover",  animation: true,  sanitize: false,  content: "<form>Input<input type='text' /></form>",  container: "body"});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<a id="brokenpopovertest" data-toggle="popover">  <button>Test</button> </a>

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();
    }
});

Contain form within a bootstrap popover?

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

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

OR

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

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

How to set textbox value inside bootstrap popover

Inside the content use this which is the element reference from where the popover is invoked. So here this would be the anchor element in your scenario. Get the text from the anchor tag and add the value attribute to your input element and then return $('#popover-content').html().

Check the below code snippet. This might help you!

$(document).ready(function() {  $("[data-toggle=popover]").popover({    trigger: 'click',    placement: "bottom",    html: true,    content: function() {      var anchorText = $(this).text();      $('#popover-content').find('input[id=txtContent]').attr('value', anchorText);      return $('#popover-content').html();    }  });});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>  <div id="popover-content" class="hide">    <div class="form-group">      <input class="form-control" id="txtContent" type="text" />      <button id="btnOk" type="button" class="btn btn-default">        <span class="glyphicon glyphicon-ok"></span>       </button>      <button id="btnCancel" type="button" class="btn btn-default">        <span class="glyphicon glyphicon-remove"></span>       </button>    </div>  </div>  <a href='#' class='btn-link' data-html='true' data-toggle='popover'>Sample text</a>  <script>  </script>
</body>

---

Related Topics