Bootstrap form in popover

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.css">
<div class="well">
    <button type="button" id="login" class="btn">Login sign up Form</button>
</div>
<div id="myForm" class="hide">
    <form action="/echo/html/" id="popForm" method="get">
        <div>
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" class="form-control input-md">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" class="form-control input-md">
            <label for="denger">Gender:</label>
            <select name="gender" id="gender" class="form-control input-md"><option value="male">Male</option><option value="female">Female</option></select>
            <label for="about">About Me:</label>
            <textarea rows="3" name="about" id="about" class="form-control input-md"></textarea>
            <button type="button" class="btn btn-primary" data-loading-text="Sending info.."><em class="icon-ok"></em> Save</button>
        </div>
    </form>
</div>
<div id="result"></div>

CSS

body {padding-top:100px;}

JavaScript

$(function(){
    $('#login').popover({
       
        placement: 'bottom',
        title: 'Popover Form',
        html:true,
        content:  $('#myForm').html()
    }).on('click', function(){
      // had to put it within the on click action so it grabs the correct info on submit
      $(this).text();
      $('.btn-primary').click(function(){
       $('#result').after("form submitted by " + $('#email').val())
        $.post('/echo/html/',  {
            email: $('#email').val(),
            name: $('#name').val(),
            gender: $('#gender').val()
        }, function(r){
          $('#pops').popover('hide')
          $('#result').html('resonse from server could be here' )
        })
      })
  })
})