模态中的我的表单没有重置-JQuery

Question

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

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