FORM NOT PERFORMING ANY ACTION?CODEIGNITER : i am new in codeigniter and i have gone through its documentation. Am trying to submit a form which is in html and jquery but once i click the submit button nothing happens and my code seems fine. I also have a date and time picker which i would like to ask: should i store both in one column with a date and time as its type? or should they be stored separately?
Here is my view:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    <link href="<?php echo base_url() ?>assets/css/bootstrap-timepicker.min.css" rel="stylesheet">
    <link href="<?php echo base_url() ?>assets/css/datepicker3.css" rel="stylesheet">
    <link href="<?php echo base_url() ?>assets/tagsinput/bootstrap-tagsinput.css" rel="stylesheet">

    <script type="text/javascript" src="<?php echo base_url() ?>assets/js/bootstrap-timepicker.js"></script>
    <script type="text/javascript" src="<?php echo base_url() ?>assets/js/bootstrap-datepicker.js"></script>

    <script type="text/javascript" src="<?php echo base_url() ?>assets/js/typeahead.js/bloodhound.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url() ?>assets/js/typeahead.js/typeahead.bundle.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url() ?>assets/js/typeahead.js/typeahead.jquery.min.js"></script>

    <script type="text/javascript" src="<?php echo base_url() ?>assets/tagsinput/bootstrap-tagsinput-angular.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url() ?>assets/tagsinput/bootstrap-tagsinput.min.js"></script>



    <button class="btn btn-primary btn-xs pull-right" data-toggle="modal" data-target="#myModal">
        Send Message
    </button>
    <style type="text/css">
        .modal-backdrop{z-index: 1200;}
        .modal{z-index: 1201;}
        .tt-dropdown-menu{z-index: 1203; border: solid 1px #CCC; margin-right: 0; margin-left: 0; background-color: #fff; border-color: #ddd; border-width: 1px; border-radius: 4px 4px 0 0; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; -webkit-box-shadow: none; box-shadow: none;}
        .tt-suggestions{}
    </style>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 9999;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Send Message</h4>
                </div>
                <div class="modal-body">
                    <form name="SendSMSForm" id="SendSMSForm" action="<?phpecho form_open('comments/create_comment'); ?>" class="form-horizontal" role="form" method="post">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Sender</label>
                            <div class="col-sm-10">
                                <p class="form-control-static"><label class="label label-primary">Inclusion</label></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="recepients" class="col-sm-2 control-label">To</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="recepients" type="text" placeholder="" name="recepients" >
                                <p class="help-block">
                                    <small>
                                        Enter name of person/group in address-book E.g John, Family, Workmates
                                    </small>
                                </p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="message" class="col-sm-2 control-label">Message</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" name="body" rows="3"></textarea>
                            </div>
                        </div>


                        <a data-toggle="collapse" data-parent="#accordion" href="#SendSMSOptions">
                            <span class="glyphicon glyphicon-plus"></span> Options
                        </a>
                        <div id="SendSMSOptions" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <div class="form-group">
                                    <label for="recepients" class="col-sm-2 control-label">Schedule Send</label>
                                    <div class="col-sm-10">
                                        <br />
                                        <div class="input-group date">
                                            <input data-provide="datepicker" name="datepicker" type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                                        </div>
                                        <div class="input-group bootstrap-timepicker">
                                            <input id="timepicker" data-template="modal"  name="timepicker" type="text" class="form-control">
                                            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="SendSMS">Send Now</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('.collapse').collapse();
            $('#timepicker').timepicker({showMeridian: false, minuteStep: 15, defaultTime: 'current'});

            $('.input-group.date').datepicker({
                format: 'mm/dd/yyyy',
                startDate: '-3d',
                autoclose: true,
                todayHighlight: true
            });


                       $("#SendSMS").click(function () {
                   event.preventDefault();
                   var postData = $('#SendSMSForm').serializeArray();

                   $.post("<?php echo base_url('messages/send') ?>", postData)
                           .done(function (data) {
                               alert("Data Loaded: " + data);
                           });
                });


            });
            var cities = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                prefetch: '<?php echo base_url("c_contacts/index/cities") ?>'
            });
            cities.initialize();

            var elt = $('#recepients');
            elt.tagsinput({
                tagClass: function(item) {
                    switch (item.continent) {
                        case 'Europe'   :
                            return 'label label-primary';
                        case 'America'  :
                            return 'label label-danger label-important';
                        case 'Australia':
                            return 'label label-success';
                        case 'Africa'   :
                            return 'label label-default';
                        case 'Asia'     :
                            return 'label label-warning';
                    }
                },
                itemValue: 'value',
                itemText: 'text'
            });
            /*
            elt.tagsinput('add', {"value": 1, "text": "Amsterdam", "continent": "Europe"});
            elt.tagsinput('add', {"value": 4, "text": "Washington", "continent": "America"});
            elt.tagsinput('add', {"value": 7, "text": "Sydney", "continent": "Australia"});
            elt.tagsinput('add', {"value": 10, "text": "Beijing", "continent": "Asia"});
            elt.tagsinput('add', {"value": 13, "text": "Cairo", "continent": "Africa"});

            */

            elt.tagsinput('input').typeahead(null, {
                name: 'cities',
                displayKey: 'text',
                source: cities.ttAdapter()
            }).bind('typeahead:selected', $.proxy(function(obj, datum) {
                this.tagsinput('add', datum);
                this.tagsinput('input').typeahead('val', '');
            }, elt));




        });
    </script>

<!-- end snippet -->

