My Forms in Modal are not resetting - JQuery

157
August 01, 2018, at 4:00 PM

So, First i open Add Data Modal, and my form was empty. Then i close it, and try to open Edit Data Modal. Because this is a Edit Data, so my form filled with data from database. But when i close the Edit Data and open Add Data again, my Add Data was filled with data from database, which is it's must be empty form. Add Data and Edit data are using the same Modal, but different button.

So, There's my js.

    $(document).ready(function() {
    $('#datetimepicker1').datetimepicker({
        icons: {
            time: "fa fa-clock-o",
            date: "fa fa-calendar",
            up: "fa fa-arrow-up",
            down: "fa fa-arrow-down"
        },
        format: 'DD-MM-YYYY HH:mm',
        showTodayButton:true
    });
    $('#datetimepicker2').datetimepicker({
        icons: {
            time: "fa fa-clock-o",
            date: "fa fa-calendar",
            up: "fa fa-arrow-up",
            down: "fa fa-arrow-down"
        },
        format: 'DD-MM-YYYY HH:mm',
        showTodayButton:true
    });
    //Button Tambah
    $('#btn_tambah').click(function(){
        clearForm('#modal_add_new');
        $('#frm').find('input:text, input:password, select, textarea').val('');
        $('#frm').find("input[type='hidden']", $(this)).val('');
    $('#frm').find('input:radio, input:checkbox').prop('checked', false);
        $('#frm')[0].reset();
        return false;
    });
    //DataTable
    var myTable =
    $('#promo-table')
    .DataTable({
        "bAutoWidth": false,
        "aaSorting": [],
        "bScrollCollapse": true,
        "stateSave": true,
        "aoColumnDefs": [
            {
                "aTargets":[4],
                "fnCreatedCell": function(c1){
                    $(c1).css("text-align", "right");
                },
                render: $.fn.dataTable.render.number( ',', '.', 0 )
            },
            { "bVisible": false, "aTargets": [ 8 ] }
        ],
        "sAjaxSource": base_url+'admin/c_promo/get_json_data',
        "bPaginate": true,
        select: {
            style: 'single'
        }
    });
    myTable.on('order.dt search.dt', function () {
        myTable.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    }).draw();
    myTable.on('dblclick', 'tr', function (){
        var data = myTable.row( this ).data();
        //alert(data[3]);
        var s = '1';
        update(s,data[8]);
        $('#modal_add_new').modal('show');
    });
    $.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';
        new $.fn.dataTable.Buttons( myTable, {
        buttons: [
          {
            "extend": "colvis",
            "text": "<i class='fa fa-search bigger-110 blue'></i> <span class='hidden'>Show/hide columns</span>",
            "className": "btn btn-white btn-primary btn-bold",
            columns: ':not(:first):not(:last)'
          },
          {
            "extend": "copy",
            "text": "<i class='fa fa-copy bigger-110 pink'></i> <span class='hidden'>Copy to clipboard</span>",
            "className": "btn btn-white btn-primary btn-bold"
          },
          {
            "extend": "csv",
            "text": "<i class='fa fa-database bigger-110 orange'></i> <span class='hidden'>Export to CSV</span>",
            "className": "btn btn-white btn-primary btn-bold"
          },
          {
            "extend": "excel",
            "text": "<i class='fa fa-file-excel-o bigger-110 green'></i> <span class='hidden'>Export to Excel</span>",
            "className": "btn btn-white btn-primary btn-bold"
          },
          {
            "extend": "pdf",
            "text": "<i class='fa fa-file-pdf-o bigger-110 red'></i> <span class='hidden'>Export to PDF</span>",
            "className": "btn btn-white btn-primary btn-bold"
          },
          {
            "extend": "print",
            "text": "<i class='fa fa-print bigger-110 grey'></i> <span class='hidden'>Print</span>",
            "className": "btn btn-white btn-primary btn-bold",
            autoPrint: false,
            message: 'This print was produced using the Print button for DataTables'
          } ,
          {
            "text": "<i class='fa fa-refresh'></i> <span class='hidden'>Refreh</span>",
            "className": "btn btn-white btn-primary btn-bold",
            action: function ( e, dt, node, config ) {
                dt.ajax.reload();
            }
          }
        ]
    } );
    myTable.buttons().container().appendTo( $('.tableTools-container') );
    //style the message box
    var defaultCopyAction = myTable.button(1).action();
    myTable.button(1).action(function (e, dt, button, config) {
        defaultCopyAction(e, dt, button, config);
        $('.dt-button-info').addClass('gritter-item-wrapper gritter-info gritter-center white');
    });
    var defaultColvisAction = myTable.button(0).action();
    myTable.button(0).action(function (e, dt, button, config) {
        defaultColvisAction(e, dt, button, config);
        if($('.dt-button-collection > .dropdown-menu').length == 0) {
            $('.dt-button-collection')
            .wrapInner('<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-caret" />')
            .find('a').attr('href', '#').wrap("<li />")
        }
        $('.dt-button-collection').appendTo('.tableTools-container .dt-buttons')
    });
});
function rem(frm,id){
    bootbox.confirm("Anda yakin akan menghapus data ini?", function(result) {
        if(result) {
            window.location.href='c_promo/delete_data/'+frm+'/'+id;
        }
    });
}
function clearForm($form) {
    $form.find(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
    $form.find(':checkbox, :radio').prop('checked', false);
}
$('#btn_save_promo').on('click',function(){
    var id = $('#fld1').val();
    var name = $('#fld2').val();
    var type = $('#fld3').val();
    var size = $('#fld4').val();
    var kategori = $('#fld5').val();
    var mulai = $('#fld6').val();
    //var mulai = date.split("-").reverse().join("-");
    var akhir = $('#fld7').val();
    //var akhir = date1.split("-").reverse().join("-");
    var quantity = $('#fld8').val();
    //console.log(mulai);
//  console.log(akhir);
    if(name !="" && type !='' && size !='' && kategori !='' && mulai !='' && akhir !='' && quantity !=''){
        $.ajax({
            type : "POST",
            url  : base_url+'admin/c_promo/add_data',
            dataType : "JSON",
            data : {id:id, name:name, type:type, size:size, kategori:kategori, mulai:mulai,
            akhir:akhir, quantity:quantity},
            success: function(data){
                //console.log(data);
                if(data.status == 'terdaftar'){
                    alert('promo sudah ada..!!');
                }
                $('#modal_add_new').modal('hide');
                $('#promo-table').DataTable().ajax.reload(null, false);
            }
        });
        return false;
    }else{
        alert("Lengkapi Form (*)");
    }
});
function update(frm,id){
    $.ajax({
        url: base_url+'admin/c_promo/cari_rec',
        method: 'GET',
        data: {
            id: id,
            frm: frm
        },
        success:function(result) {
            $("input[name='fld1']").val(id);
            //console.log(result);
            var res = JSON.parse(result);
            res.forEach(addFill);
        }
    });
}
function addFill(item, index){
    if(item.fld.substring(0,3) == "img"){
        $(item.fld).load(item.fld);
        $(item.fld).attr('src',item.val);
    } else if(item.fld.substring(0,5) == "table"){
        $(item.fld).html(item.val);
    } else if(item.fld.substring(0,4) == "span"){
        $(item.fld).html(item.val);
    } else if(item.fld.substring(0,1) != ""){
        $(item.fld).val(item.val);
    }
}

And then this is my HTML

<div class="main-content">
    <div class="main-content-inner">
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <li class="active">Dashboard</li>
                </li>
            </ul><!-- /.breadcrumb -->
        </div>
        <div class="page-content">
            <div class="row">
                <div class="col-xs-12">
                    <h3 class="header smaller lighter blue"><?php echo $title;?></h3>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                <div class="tabbable">
                    <ul class="nav nav-tabs" id="myTab">
                        <li class="active">
                            <a data-toggle="tab" href="#home" aria-expanded="false">
                                <i class="green ace-icon fa fa-home bigger-120"></i>
                                Promo
                            </a>
                        </li>
                        <li class="">
                            <a data-toggle="tab" href="#bonus" aria-expanded="true">
                                Promo Bonus
                                <span class="badge badge-danger">4</span>
                            </a>
                        </li>
                        <li class="">
                            <a data-toggle="tab" href="#item" aria-expanded="true">
                                Promo Item
                                <span class="badge badge-danger">4</span>
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="home" class="tab-pane fade active in">
                            <div class="clearfix">
                                <button class="btn btn-white btn-info btn-bold" data-toggle="modal" data-target="#modal_add_new" id="btn_tambah">
                                    <i class="ace-icon fa fa-pencil-square-o bigger-120 blue"></i>
                                    Tambah
                                </button>
                                <div class="pull-right tableTools-container"></div>
                            </div>
                            <br>
                            <div class="table-header">
                                Results for "Promo"
                            </div>
                            <div>
                            <table id="promo-table" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th style="text-align:center;">No</th>
                                        <th>Nama Promo</th>
                                        <th style="text-align:center;">Mulai</th>
                                        <th style="text-align:center;">Sampai</th>
                                        <th style="text-align:center;">Qty</th>
                                        <th>Type</th>
                                        <th>Kategori Produk</th>
                                        <th style="text-align:center;">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody style="cursor: pointer;">
                                    <tr>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                            </div>
                        </div>
                        <div id="bonus" class="tab-pane fade">
                            <table id="bonus-table" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th style="text-align:center;">No</th>
                                        <th>Nama Supplier</th>
                                        <th style="text-align:center;">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody style="cursor: pointer;">
                                    <tr>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div id="item" class="tab-pane fade">
                            <table id="item-table" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th style="text-align:center;">No</th>
                                        <th>Nama Supplier</th>
                                        <th style="text-align:center;">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody style="cursor: pointer;">
                                    <tr>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modal_add_new" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
<div class="modal-dialog" style="width:70%;">
<div class="modal-content">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 class="modal-title" id="myModalLabel">Master Promo</h3>
    </br><?php //echo $this->session->userdata('user_id');?>
</div>
<?php //echo form_open_multipart('', 'class="form-horizontal" id="frm_promo"'); ?>
    <form id="frm_promo" class="form-horizontal">
    <div class="modal-body">
        <div class="row">
            <div class="col-xs-12">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Nama Promo</label>
                        <input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash()?>" />
                        <input type="hidden" name="fld1" id="fld1" class="form-control text-uppercase" value="">
                        <div class="col-xs-8">
                            <textarea name="fld2" id="fld2" class="form-control" type="text" placeholder="Nama Promo..." required></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Type Diskon</label>
                        <div class="col-xs-8">
                        <select class="form-control" name="fld3" id="fld3" style="width:200px;" required/>
                            <option value="">Please Select</option>
                        <?php
                            $options1 = array(
                                "Persentase"    => "Percentage",
                                "FreeItem"      => "FreeItem",
                                "Nominal"       => "Nominal"
                            );
                            foreach ($options1 as $diskon => $val){
                            ?>
                                <option value="<?php echo $val;?>"> <?php echo $diskon;?></option>
                        <?php
                            }
                        ?>
                        </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Ukuran Gambar</label>
                        <div class="col-xs-8">
                        <select class="form-control" name="fld4" id="fld4" style="width:200px;" required/>
                            <option value="">Please Select</option>
                        <?php
                            $options5 = array(
                                "Besar" => "Size366x500",
                                "Kecil" => "Size220x250"
                            );
                            foreach ($options5 as $ukuran => $val){
                            ?>
                                <option value="<?php echo $val;?>"> <?php echo $ukuran;?> ( <?php echo $val;?> ) </option>
                        <?php
                            }
                        ?>
                        </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Kategori</label>
                        <div class="col-xs-8">
                        <select class="form-control" name="fld5" id="fld5" style="width:200px;" required/>
                            <option value="">Please Select</option>
                        <?php
                            $q = $this->db->query("SELECT id,name FROM productcategory ORDER BY name");
                            $r2 = $q->result_array();
                            foreach ($r2 as $row){
                        ?>
                            <option value="<?php echo $row['id'];?>"><?php echo $row['name'];?></option>
                        <?php
                            }
                        ?>
                        </select>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Mulai Promo</label>
                        <div class="col-xs-8">
                            <div class='input-group date' id='datetimepicker1' style="width:160px;">
                                <input type='text' name="fld6" id="fld6" class="form-control"  placeholder="Mulai Promo..." required/>
                                <span class="input-group-addon">
                                    <span class="fa fa-calendar">
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Akhir Promo</label>
                        <div class="col-xs-8">
                            <div class='input-group date' id='datetimepicker2' style="width:160px;">
                                <input type='text' name="fld7" id="fld7" class="form-control" placeholder="Akhir Promo..." required/>
                                <span class="input-group-addon">
                                    <span class="fa fa-calendar">
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Minimum Quantity</label>
                        <div class="col-xs-8">
                            <input name="fld8" id="fld8" style="width:40px;" class="form-control" type="text" placeholder="Qty..." required/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group" style="margin-left:10px;">
                    <button class="btn btn-info" id="btn_add">Add</button>
                </div>
                <table id="promo-produk" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th style="text-align:center;">No</th>
                            <th>ID</th>
                            <th>Nama</th>
                            <th>Kategori</th>
                            <th>Edit</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="odd gradeX">
                            <td style="width:10px"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td style="width:20px"><a class="edit" href="">Edit</a></td>
                            <td style="width:20px"><a class="delete" href="">Delete</a></td>
                        </tr>
                    </tbody>
                    <!--<tbody style="cursor: pointer;">
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>-->
                </table>
            </div>
        </div>
    </div>
    </form>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Tutup</button>
        <button class="btn btn-info" id="btn_save_promo">Simpan</button>
    </div>
</div>
</div>
</div>

<!-- <div class="modal fade" id="modal_add_item" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
<div class="modal-dialog" style="width:70%;">
<div class="modal-content">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 class="modal-title" id="myModalLabel">Item Promo</h3>
</div>
    <form id="frm_item" class="form-horizontal">
    <div class="modal-body">
        <div class="row">
            <div class="col-xs-12">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Nama Promo</label>
                        <input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash()?>" />
                        <input type="hidden" name="fld1" class="form-control text-uppercase" value="">
                        <div class="col-xs-8">
                            <input name="fld2" id="fld2" class="form-control" type="text" placeholder="Nama Promo..." required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Tipe Diskon</label>
                        <div class="col-xs-8">
                        <select class="form-control" name="fld3" id="fld3" style="width:200px;" required/>
                            <option value="">Please Select</option>
                        <?php
                            $options1 = array(
                                "Persentase"    => "Percentage",
                                "FreeItem"      => "FreeItem",
                                "Nominal"       => "Nominal"
                            );
                            foreach ($options1 as $diskon => $val){
                            ?>
                                <option value="<?php echo $val;?>"> <?php echo $diskon;?></option>
                        <?php
                            }
                        ?>
                        </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Diskon</label>
                        <div class="col-xs-8">
                            <input name="fld3a" style="width:40px;" class="form-control" type="text" placeholder="Nilai..." required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Ukuran Gambar</label>
                        <div class="col-xs-8">
                        <select class="form-control" name="fld6" id="ukuran" style="width:200px;" required/>
                            <option value="">Please Select</option>
                        <?php
                            $options5 = array(
                                "Besar" => "Size366x500",
                                "Kecil" => "Size220x250"
                            );
                            foreach ($options5 as $ukuran => $val){
                            ?>
                                <option value="<?php echo $val;?>"> <?php echo $ukuran;?> ( <?php echo $val;?> ) </option>
                        <?php
                            }
                        ?>
                        </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Kategori</label>
                        <div class="col-xs-8">
                        <select class="form-control" name="fld7" id="kategori" style="width:200px;" required/>
                            <option value="">Please Select</option>
                        <?php
                            $q = $this->db->query("SELECT id,name FROM productcategory ORDER BY name");
                            $r2 = $q->result_array();
                            foreach ($r2 as $row){
                        ?>
                            <option value="<?php echo $row['id'];?>"><?php echo $row['name'];?></option>
                        <?php
                            }
                        ?>
                        </select>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Mulai Promo</label>
                        <div class="col-xs-8">
                            <div class='input-group date' id='datetimepicker1' style="width:160px;">
                                <input type='text' name="fld3" class="form-control"  placeholder="Mulai Promo..." required/>
                                <span class="input-group-addon">
                                    <span class="fa fa-calendar">
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Akhir Promo</label>
                        <div class="col-xs-8">
                            <div class='input-group date' id='datetimepicker2' style="width:160px;">
                                <input type='text' name="fld4" class="form-control" placeholder="Akhir Promo..." required/>
                                <span class="input-group-addon">
                                    <span class="fa fa-calendar">
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4" >Quantity</label>
                        <div class="col-xs-8">
                            <input name="fld5" style="width:40px;" class="form-control" type="text" placeholder="Qty..." required/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Tutup</button>
        <button class="btn btn-info" id="simpan">Simpan</button>
    </div>
</div>
</div>
</div> -->
Answer 1

You need to empty the form when you open the modal again or you will always have the all data because when you open/close a modal the only thing you are doing is showing/hiding a div. You could create a function like this one to clear all the inputs of the form:

function clearForm($form) {
    $form.find(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
    $form.find(':checkbox, :radio').prop('checked', false);
}

And call like:

myTable.on('dblclick', 'tr', function (){
    clearForm('#modal_add_new');
    var data = myTable.row( this ).data();
    //alert(data[3]);
    var s = '1';
    update(s,data[8]);
    $('#modal_add_new').modal('show');
});
Rent Charter Buses Company
READ ALSO
How to use contextPath in html template

How to use contextPath in html template

I want to know how to use contextPath in html code

155
String path to Json

String path to Json

I have the list of paths like below

177
jQuery if condition not working when screen is small (mobile)

jQuery if condition not working when screen is small (mobile)

i have a simple jquery condition which is simply checking a css value as shown below

159
Accessing Table in Partial View

Accessing Table in Partial View

I'm trying to edit a table by adding rows, but running into an issue with the the partial view not being fully rendered (This is my assumption)

196