Field Comments Sample

by Miguel Roman

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <form id="formulario">

    <div class="form-group">
      <label for="titulo">Titulo</label>
      <div class="input-group">
        <input type="text" id="titulo" name="titulo" class="form-control" autocomplete="off" />
        <div type="button" class="input-group-btn">
          <button type="button" class="btn btn-default" id="btn-comentar-titulo">
            <i class="glyphicon glyphicon-comment"></i>
          </button>
        </div>
      </div>
      
    </div>

    <button type="submit" class="btn btn-default">Guardar</button>

  </form>

   <hr />

    <pre>
      <code id="result">

      </code>
    </pre>

</div>

JavaScript

$('#titulo').popover({
	title: "<h6>comentario <button type=\"button\" class=\"btn btn-xs btn-danger pull-right\" onclick=\"$.cerrar('#titulo-comentario')\"><i class=\"glyphicon glyphicon-remove\"></i></button></h6>",
  html: true,
  placement: "bottom",
  content: 
    "<div class=\"form-group\" >" +
  		"<textarea type=\"text\" id=\"titulo-comentario\" name=\"titulo-comentario\" class=\"form-control\" placeholder=\"Comentario\"></textarea>" +
    "</div>",
  trigger: "manual",
  container: "#formulario"
});

var tituloComentarioCreado = false;

$("#btn-comentar-titulo").click(function (e) {
	e.preventDefault();
  
  if (tituloComentarioCreado) {
  	$('#titulo-comentario').closest('.popover').removeClass('hidden');
  }
  else {
  	tituloComentarioCreado = true;
  	$('#titulo').popover('show');
  }
  
});

$("#formulario").submit(function (e) {
	e.preventDefault();
  $("#result").text($(this).serialize());
});

$.cerrar = cerrar;

function cerrar(controlId) {
	$(controlId).closest('.popover').addClass('hidden');;
}