Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by synz izynz

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css">
<label>Value 1&nbsp;<input name='checkme[]' type='checkbox' value='1'></label><br>
<label>Value 2&nbsp;<input name='checkme[]' type='checkbox' value='2'></label><br>
<label>Value 3&nbsp;<input name='checkme[]' type='checkbox' value='3'></label><br>
<label>Value 4&nbsp;<input name='checkme[]' type='checkbox' value='4'></label><br>
<br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_form" >Open Sesame</button>

 <div class="modal fade" id="modal_form" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">Update Departemen</h4>
            </div>
              <form action="#" id="form" class="form-horizontal">
            <div class="modal-body form">
                <input type="hidden" value="" name="emp_id"/>
                  <div class="form-body">

                      <div class="form-group">
                        <label class="control-label col-md-3">Departemen</label>
                        <div class="col-md-9">
                          <select name="dept_id_auto" class="form-control pull-right">
                          </select>
                        </div>
                      </div>
                      
                      <div class="form-group">
                        <label class="control-label...

JavaScript

$(document).ready(function(){

$('#modal_form').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var recipient = button.data('whatever'); // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var vals	= $('input:checkbox[name="checkme[]"]').map(function() {
							return this.checked ? this.value : undefined;
						}).get();
  var modal = $(this);
  modal.find('.modal-title').text("Open Sesame : Most code in here from bootstrap documentation. XD"); // just for fun.
  modal.find(".modal-body input[name='list_check']").val(vals);
});

$("form").on("submit",function(x){
	var val_submit = $(this).serialize(); // data to be send via ajax
  alert("POST DATA : "+val_submit+"\n This is the value you will submit. The rest you can figure it out. Use explode() to split the list_check. And update like you want it.");
  x.preventDefault();
});
});