<script type="text/javascript">
$(document).ready(function(e) {
$("#department").on('submit' ,(function(e) {
e .preventDefault();
$('#loading').show();
$ .ajax({
url : "control.php" , //Url to which the request issend
type : "POST" , //Type of request to be send,called as method
data : new FormData(this), //Data sent to server, a set of key/value pairs(i.e.form fields and values)
contentType : false, //The content type used when sending data to the server.
cache : false , //To unable request pages to be cached
processData : false, //To send DOMDocument or non processed data file it is set to false
beforeSend : function(){
            $('#loading').show();
        },
success: function(data) //A function to be called if request succeeds
{
$('#loading').hide();
document.getElementById('inputHere').innerHTML = data;
$('#myModal').modal('show');
document.getElementById('lecturer').value = "";
document.getElementById('olecturer').value = "";
}
});
}));
});
</script>
<!-- page content -->
        <div class="right_col" role="main">
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3><a href="main.php">Dashboard</a>/<a href=" ">Add Lecturer</a></h3>
              </div>
            </div>

            <div class="clearfix"></div>

            <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <div class="row">
                        <h4>Add Lecturer</h4>
                    </div>
                    
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <form id="department" action ="" method ="post">
                            <div class="row">
                            <div class="col-md-4">
                            <div class="form-group">
                                <label for="lecturer" >Lecturer Surname</label>
                                <input type="text" name="lecturer" id="lecturer" placeholder="Surname" class="form-control">
                            </div>
                            </div>
                            <div class="col-md-4">
                            <div class="form-group">
                                <label for="olecturer" >Other Names</label>
                                <input type="text" name="olecturer" id="olecturer" placeholder="Other Names" class="form-control">
                            </div>
                            </div>
                            <div class="col-md-4">
                            <div class="form-group">
                                <label for="fname" >Under Department</label>
                                <select class="form-control" name="department" id="department">
                                    <option value="">Select Department</option>
                                    <?php
                                    $fetch = $conn->query("SELECT * FROM department ORDER BY name ASC");
                                    $result = $fetch->fetchAll(PDO::FETCH_OBJ);
                                    $count = $fetch->rowCount();
                                    if ($count > 0) {
                                    foreach ($result as $key) {
                                        $ident = $key->id;
                                        $name = $key->name;
                                    ?>
                                    <option value="<?php echo $ident ?>"><?php echo $name ?></option>
                                    <?php
                                    }
                                    }

                                    ?>
                                </select>
                            </div>
                            </div>
                            </div>
                            <button class="btn btn-success submit" type="submit" name="addcourse">Submit</button>
                            <span id="loading" style="display:none;"><img src="../img/loading.gif"></span>

                            </form>
                            </div>
                            </div>
                </div>
              </div>
            </div>
          </div>
        <!-- /page content -->

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-body text-center">
        <div id="inputHere">

        </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
        </div>
      </div>
    </div>
  </div>
</div>
