我的模态表单未重置-JQuery

Question

因此，首先我打开“添加数据模式”，然后我的表单为空。 然后关闭它，并尝试打开“编辑数据模态”。 因为这是一个Edit Data，所以我的表单中填充了数据库中的数据。 但是，当我关闭“编辑数据”并再次打开“添加数据”时，“添加数据”中填充了数据库中的数据，这必须是空格式。 添加数据和编辑数据使用相同的模式，但按钮不同。

所以，有我的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);
    }
}

然后这是我的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

再次打开模式时，您需要清空表单，否则您将始终拥有所有数据，因为打开/关闭模式时，您唯一要做的就是显示/隐藏div。您可以创建一个像这样的函数来清除表单的所有输入：

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

然后致电：

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');
});