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>'

like this Working demo http://jsfiddle.net/7e2XU/21/show/# * Update: http://jsfiddle.net/kz5kjmbt/

 <div class="container">
<div class="row" style="padding-top: 240px;"> <a href="#" class="btn btn-large btn-primary" rel="popover" data-content='
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
data-placement="top" data-original-title="Fill in form">Open form</a>


</div>
</div>

JavaScript code:

    $('a[rel=popover]').popover({
html: 'true',
placement: 'right'
})

ScreenShot

I would put my form into the markup and not into some data tag. This is how it could work:

JS Code:

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

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">
<!-- MyForm -->
</div>

Demo

Alternative Approaches:

X-Editable

You might want to take a look at X-Editable. A library that allows you to create editable elements on your page based on popovers.

Webcomponents

Mike Costello has released Bootstrap Web Components. This nifty library has a Popovers Component that lets you embed the form as markup:

<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>


<bs-popover title="Popover with Title" for="popover-target">
<!-- MyForm -->
</bs-popover>

Demo

<a data-title="A Title" data-placement="top" data-html="true" data-content="<form><input type='text'/></form>" data-trigger="hover" rel="popover" class="btn btn-primary" id="test">Top popover</a>

just state data-html="true"

Or try this one

Second one including second hidden div content to hold the form working and test on fiddle http://jsfiddle.net/7e2XU/21/

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>




<div id="popover-content" style="display: none" >
<div class="container" style="margin: 25px; ">
<div class="row" style="padding-top: 240px;">
<label id="sample">
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>


</label>
</div>
</div>
</div>


<a href="#" style="margin: 40px 40px;" class="btn btn-large btn-primary" rel="popover" data-content='' data-placement="left" data-original-title="Fill in form">Open form</a>




<script>


$('a[rel=popover]').popover({
html: 'true',
placement: 'right',
content : function() {
return $('#popover-content').html();
}
})






</script>

A complete solution for anyone that might need it, I've used this with good results so far

JS:

$(".btn-popover-container").each(function() {
var btn = $(this).children(".popover-btn");
var titleContainer = $(this).children(".btn-popover-title");
var contentContainer = $(this).children(".btn-popover-content");


var title = $(titleContainer).html();
var content = $(contentContainer).html();


$(btn).popover({
html: true,
title: title,
content: content,
placement: 'right'
});
});

HTML:

<div class="btn-popover-container">
<button type="button" class="btn btn-link popover-btn">Button Name</button>
<div class="btn-popover-title">
Popover Title
</div>
<div class="btn-popover-content">
<form>
Or Other content..
</form>
</div>
</div>

CSS:

.btn-popover-container {
display: inline-block;
}




.btn-popover-container .btn-popover-title, .btn-popover-container .btn-popover-content {
display: none;
}

You can load the form from a hidden div element with the Bootstrap-provided hidden class.

<button class="btn btn-default" id="form-popover">Form popover</button>


<div class="hidden">
<form id="form">
<input type="text" class="form-control" />
</form>
</div>

JavaScript:

$('#form-popover').popover({
content: $('#form').parent().html(),
html: true,
});

I work in WordPress a lot so use PHP.

My method is to contain my HTML in a PHP Variable, and then echo the variable in data-content.

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

along with

data-content='<?php echo $my-data-content; ?>'