Refresh Element and Clear Form

[joshmac]

As it stands, the data elements are submitted to the database. But I need help figuring out two things: one, is how to show the new deptCode in the dropdown list of deptCodes and two, how can I clear the form after a successful submit? Below is the code that I am working with. Any help with this is greatly appreciated.

<script type="text/javascript">
$(function() {
    $("#btn_dept").click(function(e) {
        e.preventDefault();
        var deptCode = $("#newDeptCode").val();
        var deptTypeCode = $("#deptType").val();
        var deptName = $("#deptName").val();
        var deptEmail = $("#deptEmail").val();
        var deptPhone = $("#deptPhone").val();
        var deptDesc = $("#deptDesc").val();
        var dataString = 'deptCode='+deptCode+'&deptTypeCode='+deptTypeCode+'&deptName='+deptName+
        '&deptEmail='+deptEmail+'&deptPhone='+deptPhone+'&deptDesc='+deptDesc; 
        if(deptCode == '')
        {   
            $('.success').fadeOut(200).hide();
            $('.error').fadeIn(200).show();
        }
        if(deptTypeCode == '')
        {   
            $('.success').fadeOut(200).hide();
            $('.error').fadeIn(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",               
                url: "<?=url('/form/department/');?>",
                data: dataString,
                success: function() {
                    $('#form').fadeOut(200).hide();
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                    $('#deptCode').append($('<option>', {
                        value: deptCode,
                        text: deptCode+' '+deptName
                    }));
                }
            });
        }
        return false;
    });
});
</script>

<div class="modal fade" id="dept">
        <form class="form-horizontal margin-none" id="deptForm" autocomplete="off">
        <div class="dialog-form modal-dialog">
            <div class="modal-content">
                <!-- Modal heading -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title"><?=_t( 'Department' );?></h3>
                </div>
                <!-- // Modal heading END -->
                <div class="modal-body">

                    <div class="success error"><?=$message->flashMessage();?></div>

                    <!-- Group -->
                    <div class="form-group">
                        <label class="col-md-3 control-label"><font color="red">*</font> <?=_t( 'Department Code' );?></label>
                        <div class="col-md-8">
                            <input class="form-control" id="newDeptCode" type="text" name="deptCode" required/>
                        </div>
                    </div>
                    <!-- // Group END -->

                    <!-- Group -->
                    <div class="form-group">
                        <label class="col-md-3 control-label"><font color="red">*</font> <?=_t( 'Department Type' );?></label>
                        <div class="col-md-8">
                            <?=dept_type_select();?>
                        </div>
                    </div>
                    <!-- // Group END -->

                    <!-- Group -->
                    <div class="form-group">
                        <label class="col-md-3 control-label"><font color="red">*</font> <?=_t( 'Department Name' );?></label>
                        <div class="col-md-8">
                            <input class="form-control" id="deptName" type="text" name="deptName" required/>
                        </div>
                    </div>
                    <!-- // Group END -->

                    <!-- Group -->
                    <div class="form-group">
                        <label class="col-md-3 control-label"><?=_t( 'Department Email' );?></label>
                        <div class="col-md-8">
                            <input class="form-control" id="deptEmail" type="text" name="deptEmail" />
                        </div>
                    </div>
                    <!-- // Group END -->

                    <!-- Group -->
                    <div class="form-group">
                        <label class="col-md-3 control-label"><?=_t( 'Department Phone' );?></label>
                        <div class="col-md-8">
                            <input class="form-control" id="deptPhone" type="text" name="deptPhone" />
                        </div>
                    </div>
                    <!-- // Group END -->

                    <!-- Group -->
                    <div class="form-group">
                        <label class="col-md-3 control-label"><?=_t( 'Short Description' );?></label>
                        <div class="col-md-8">
                            <input class="form-control" id="deptDesc" type="text" name="deptDesc" />
                        </div>
                    </div>
                    <!-- // Group END -->
                </div>
                <div class="modal-footer">
                    <button type="submit" id="btn_dept" class="btn btn-icon btn-default"><i></i><?=_t( 'Add' );?></button>
                    <button type="button" data-dismiss="modal" class="btn btn-icon btn-primary"><i></i><?=_t( 'Cancel' );?></button>
                </div>
            </div>
        </div>
        </form>
    </div>

Department code dropdown list:

<div class="form-group">
<label class="col-md-3 control-label"><font color="red">*</font> <?=_t( 'Department' );?></label>
<div class="col-md-8">
<select name="deptCode" id="deptCode" class="selectpicker form-control" data-style="btn-info" data-size="10" data-live-search="true" required>
<option value="">&nbsp;</option>
<?php table_dropdown('department', 'deptTypeCode = "acad" AND deptCode <> "NULL"', 'deptCode', 'deptCode', 'deptName'); ?>
</select>
</div>
<a href="#dept" data-toggle="modal" title="Department" class="btn btn-primary"><i class="fa fa-plus"></i></a>
</div>

[diafol]

            success: function() {
                $('#form').fadeOut(200).hide();
                $('.success').fadeIn(200).show();
                $('.error').fadeOut(200).hide();
                $('#deptCode').append($('<option>', {
                    value: deptCode,
                    text: deptCode+' '+deptName
                }));
            }

Maybe me, but I can't see any id="form" in your tags, so

 $('#form').fadeOut(200).hide();

will have no meaning.

[joshmac]

That will be removed eventually. It was only there for testing. And value should be corrected to value: data.deptCode

So, below is my database query as well as the json output to help me troubleshoot this.

        $dept = $app->db->department();
            foreach($_POST as $k => $v) {
                $dept->$k = $v;
            }
        $dept->save();
        $ID = $dept->lastInsertId();

        $department = $app->db->department()
            ->where('deptID = ?', $ID);
        $q = $department->find(function($data) {
            $array = [];
            foreach ($data as $d) {
                $array[] = $d;
            }
            return $array;
        });
        echo json_encode($q);




{"deptID":"40","deptTypeCode":"ACAD","deptCode":"HIST","deptName":"History","deptEmail":"","deptPhone":"","deptDesc":"","LastUpdate":"2015-07-30 09:33:00"}

[joshmac]

And the error message is: Uncaught ReferenceError: data is not defined

[diafol]

You need to pass data as a param from the response:

        success: function(data) {
            $('.success').fadeIn(200).show();
            $('.error').fadeOut(200).hide();
            $('#deptCode').append($('<option>', {
                value: data.deptCode,
                text: data.deptCode+' '+ data,deptName
            }));
        }

[joshmac]

Thanks.

[diafol]

BTW it should be

text: data.deptCode+' '+ data.deptName // . instead of , ! My bad.