My Forms in Modal are not resetting - JQuery - javascript
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> -->
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');
});
Related
Update Image Using AJAX PHP
I am facing an issue with updating image to database using AJAX and a Modal, following are the details: I have a main page named edit_employee.php, code below: <!DOCTYPE html> <?php $ROOT='../../'; include('../config/db_connect.php'); require_once '../config/auth.php'; ?> <html lang="eng"> <head> <title>Employee List | Employee Attendance Record System</title> <?php include('../includes/header.php') ?> </head> <body> <?php include('../includes/nav_bar.php') ?> <div class="container-fluid admin" > <div class="alert alert-success">Employee Center-Edit</div> <div class="well col-lg-12 mt-5"> <!-- <button class="btn btn-success" type="button" id="new_emp_btn"><span class="fa fa-plus"></span> Add new </button> --> <table id="table" class="table table-bordered table-striped"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Designation</th> <th>Department</th> <th>Joining Date</th> <th>Picture</th> <th>Action</th> </tr> </thead> <tbody> <?php $employee_qry=$conn->query("SELECT * FROM employee WHERE status='Active' ORDER BY employee_id ASC") or die(mysqli_error()); while($row=$employee_qry->fetch_array()){ ?> <tr> <td><?php echo $row['employee_id']?></td> <td><?php echo $row['first_name']?></td> <td><?php echo $row['designation']?></td> <td><?php echo $row['department']?></td> <td><?php echo date("F d, Y", strtotime($row['doj'])) ?></td> <td><img <?php echo 'src="data:image/jpeg;base64,'.base64_encode($row['picture'] ).'"' ?> height="50px" width="75px" /></td> <td> <center> <button class="btn btn-sm btn-outline-success edit_employee" data-id="<?php echo $row['employee_id']?>" type="button"><i class="fa fa-edit"></i></button> <button class="btn btn-sm btn-outline-danger remove_employee" data-id="<?php echo $row['employee_id']?>" type="button"><i class="fa fa-trash"></i></button> </center> </td> </tr> <?php } ?> </tbody> </table> </div> </div> <!--MODALS--> <?php include ($_SERVER['DOCUMENT_ROOT'].'/astrahrms/admin/employees/modals/modal_editemp.php'); ?> <?php include ($_SERVER['DOCUMENT_ROOT'].'/astrahrms/admin/employees/modals/modal_deleteemp.php'); ?> <!--MODALS END--> </body> <!--SCRIPTS--> <?php include ($_SERVER['DOCUMENT_ROOT'].'/astrahrms/admin/employees/scripts/edit_emp.php'); ?> </html> page has a button having class edit_employee which opens a modal on click, I used javascript and ajax for this (ajax contained in php include ($_SERVER['DOCUMENT_ROOT'].'/astrahrms/admin/employees/scripts/edit_emp.php')), below is the code for your reference: <script> $(document).ready(function(){ $('.edit_employee').click(function () { var id=$(this).attr('data-id'); // AJAX request $.ajax({ url: './functions/get_employee.php', type: 'post', data: {id:id}, success: function(response){ // Add response in Modal body $('.modal-body').html(response); // Display Modal $('#editmodal').modal('show'); } }); }); }); </script> This opens a modal with some employee information and employee image, I put this modal in get_employee.php, code below for your reference: <style> label{ display: inline-block; width: 155px; text-align: right; } .form-control{ display: inline-block !important; } .profile-pic-div{ height: 120px; width: 120px; position: relative; top: 100px; left: auto; margin-left: 350px; transform: translate(-50%,-50%); overflow: hidden; border-top: 7px solid rgb(12, 189, 189); display:table-cell; } #photo{ height: 100%; width: 100%; } #file{ display: none; } #uploadBtn{ height: 30px; width: 100%; position: absolute; top: 140px; left: auto; transform: translateX(-50%); text-align: center; background: rgba(0, 0, 0, 0.7); color: wheat; line-height: 30px; font-family: sans-serif; font-size: 15px; cursor: pointer; display: none; z-index: 9999; } .col-auto img{ background-color:rgb(12, 189, 189); width: 5%; cursor: pointer; padding: 3px; } </style> <!-- PICTURE sCRIPT --> <script type="text/javascript"> $(document).ready(function(){ $('#editmodal').on('hidden.bs.modal', function (e) { location.reload(); }); }); //declearing html elements const imgDiv = document.querySelector('.profile-pic-div'); const img = document.querySelector('#photo'); const file = document.querySelector('#file'); const uploadBtn = document.querySelector('#uploadBtn'); //if user hover on img div imgDiv.addEventListener('mouseenter', function(){ uploadBtn.style.display = "inline-block"; }); //if we hover out from img div imgDiv.addEventListener('mouseleave', function(){ uploadBtn.style.display = "none"; }); //lets work for image showing functionality when we choose an image to upload //when we choose a foto to upload file.addEventListener('change', function(){ //this refers to file const choosedFile = this.files[0]; if (choosedFile) { const reader = new FileReader(); //FileReader is a predefined function of JS reader.addEventListener('load', function(){ img.setAttribute('src', reader.result); }); reader.readAsDataURL(choosedFile); } }); </script> <?php $ROOT='../../'; include '../../config/db_connect.php'; $id=$_POST['id']; include_once('../../config/db_connect.php'); if (!$conn) { die('Could not connnect: ' . mysqli_error($conn)); } $query="SELECT * FROM employee WHERE employee_id = '$id'"; $result = mysqli_query($conn,$query); $row = $result->fetch_array(); ?> <div class="container-fluid"> <ul class="nav nav-tabs text-success" id="myTab"> <li class="nav-item"> <a class="nav-link text-info border_bottom border_bottom_info active" data-toggle="tab" href="#personal">Personal Information</a> </li> <li class="nav-item"> <a class="nav-link text-info" data-toggle="tab" href="#company">Company Information</a> </li> <li class="nav-item"> <a class="nav-link text-info" data-toggle="tab" href="#payroll">Payroll Information</a> </li> <li class="nav-item"> <a class="nav-link text-info" data-toggle="tab" href="#incentives">Benefits/Incentives</a> </li> </ul> </div> <div class="tab-content container-fluid" id="myTabContent"> <!--Personal Information--> <div class="tab-pane fade show active" id="personal"> <div class="well col-lg-12" id="displaydata"> <!--CONTENT HERE--> <div class="row"> <div class="col-lg-6 float-left"> <div class="col-auto mt-3"> <label for="" class="mr-2">First Name: </label> <input type="text" class=" form-control w-50 " id="firstname" name="firstname" required value="<?php echo $row['first_name'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Last Name: </label> <input type="text" class=" form-control w-50 " id="lastname" name="lastname" required value="<?php echo $row['last_name'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">CNIC Number: </label> <input type="text" class=" form-control w-50 " id="cnic" name="cnic" required value="<?php echo $row['cnic'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Permanent Address: </label> <input type="text" class=" form-control w-50 " id="paddress" name="paddress" required value="<?php echo $row['permanent_address'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Local Address: </label> <input type="text" class=" form-control w-50 " id="laddress" name="laddress" required value="<?php echo $row['local_address'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Mobile Number: </label> <input type="text" class=" form-control w-50 " id="mobile" name="mobile" required value="<?php echo $row['mobile'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Emergency Number: </label> <input type="text" class=" form-control w-50 " id="emergency" name="emergency" required value="<?php echo $row['emergency_contact'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Qualification: </label> <input type="text" class=" form-control w-50 " id="qualification" name="qualification" required value="<?php echo $row['qualification'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Date of Birth: </label> <input type="date" class=" form-control w-50 " id="dob" name="dob" required value="<?php echo date('Y-m-d', strtotime($row['dob'])) ?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Blood Group: </label> <select class="w-50 my-1 form-control" style="cursor:pointer;" id="bg"> <option selected><?php echo $row['blood_group'];?></option> <option value="A+">A+</option> <option value="O+">O+</option> <option value="B+">B+</option> <option value="AB+">AB+</option> <option value="A-">A-</option> <option value="O-">O-</option> <option value="B-">B-</option> <option value="AB-">AB-</option> </select> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Special Notes: </label> <input type="text" class=" form-control w-50 " id="sn" name="sn" required value="<?php echo $row['note'];?>"> </div> </div> <div class=""> <div class="form-group col-auto"> <label for="file" id="uploadBtn" class="mr-2">Employee Picture</label> <div class="profile-pic-div"> <img <?php echo 'src="data:image/jpeg;base64,'.base64_encode($row['picture'] ).'"' ?> id="photo" > <input type="file" name="ProfileImage" id="file" /> </div> </div> </div> </div> <div class="modal-footer mt-1"> <button data-id="<?php echo $row['employee_id'];?>" class="btn btn-success persinfo" name="persinfo" id="<?php echo $row['employee_id'];?>"><span class="glyphicon glyphicon-save"></span>Save & Next</button> </div> </div> </div> <!-- Company Information--> <div class="tab-pane fade show" id="company"> <div class="well col-lg-12" id="displaydata1"> <!--CONTENT HERE--> <div class="row"> <div class="col-lg-6 float-left"> <div class=" col-auto mt-3"> <label for="" class="mr-2">Employee ID: </label> <input type="text" class=" form-control w-50 my-1 " name="employeeid" id="employeeid" required value="<?php echo $row['employee_id'];?>" disabled> <!-- <img src="https://img.icons8.com/ios-filled/50/000000/settings.png" alt=""> --> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Select Block: </label> <select class="w-50 form-control" style="cursor:pointer;" id="sblock"> <option selected><?php echo $row['block'];?></option> </select> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Select Department: </label> <select class="w-50 form-control" style="cursor:pointer;" id="sdpt"> <option selected><?php echo $row['department'];?></option> </select> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Select Designation: </label> <select class="w-50 form-control" style="cursor:pointer;" id="sdesig"> <option selected ><?php echo $row['designation'];?></option> </select> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Employee Type: </label> <select class="w-50 form-control" style="cursor:pointer;" id="semptyp"> <option selected><?php echo $row['employee_type'];?></option> </select> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Email: </label> <input type="text" class=" form-control w-50 " id="email" name="email" required value="<?php echo $row['email'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Date of Joining: </label> <input type="date" class=" form-control w-50 " id="doj" name="doj" required value="<?php echo date('Y-m-d', strtotime($row['doj']));?>"> </div> </div> <div class="col-lg-6 float-left"> <h5 class="mt-3 ml-3" style="color:#636c78;">Employee Shift Information</h5> <div class="col-auto mt-3"> <label for="" class="mr-2">Set Shift: </label> <select class="form-control w-50" style="cursor:pointer;"> <option selected><?php echo $row['shift'];?></option> </select> </div> <?php $shid=$row['shift']; $query1="SELECT * FROM tbl_shifts WHERE shift_id ='$shid'"; $result1 = mysqli_query($conn,$query1); $row1 = $result1->fetch_array(); ?> <div class="col-auto mt-1"> <label for="" class="mr-2">Start Time: </label> <input type="time" class=" form-control w-50 " id="stime" name="stime" value="<?php echo date('H:i', strtotime($row1['st_tm']));?>" required> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">End Time: </label> <input type="time" class=" form-control w-50 " id="etime" name="etime" value="<?php echo date('H:i', strtotime($row1['end_tm']));?>" required> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Weekday: </label> <select class="form-control w-50" style="cursor:pointer;"> <option selected><?php echo $row1['weekday'];?></option> <option>Monday</option> <option>Tuesday</option> <option>Wednesday</option> <option>Thursday</option> <option>Friday</option> <option>Saturday</option> <option>Sunday</option> </select> </div> </div> </div> <div class="modal-footer mt-5"> <button class="btn btn-success" name="save_emp" id="save_emp"><span class="glyphicon glyphicon-save"></span>Save & Next</button> </div> </div> </div> <!-- Payroll Information--> <div class="tab-pane fade show" id="payroll"> <div class="well col-lg-12" id="displaydata1"> <!--CONTENT HERE--> <?php $empid=$row['employee_id']; $query2="SELECT * FROM emp_salary WHERE employee_id ='$empid'"; $result2 = mysqli_query($conn,$query2); $row2 = $result2->fetch_array(); ?> <div class="row"> <div class="col-lg-6 float-left"> <h5 class="mt-3 ml-3" style="color:#636c78;">Monthly Salary Information</h5> <div class="col-auto mt-3"> <label for="" class="mr-2">Gross Salary: </label> <input type="text" class=" form-control w-50 " id="gsalary" name="gsalary" placeholder="0" required value="<?php echo $row2['gross_salary'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Basic Salary: </label> <input type="text" class=" form-control w-50 " id="bsalary" name="bsalary" placeholder="0" required value="<?php echo $row2['basic_salary'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">House Rent Allowance: </label> <input type="text" class=" form-control w-50 " id="hra" name="hra" placeholder="0" required value="<?php echo $row2['hra'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Utility Allowance: </label> <input type="text" class=" form-control w-50 " id="ua" name="ua" placeholder="0" required value="<?php echo $row2['ua'];?>"> </div> </div> <?php $query3="SELECT * FROM emp_allowed_leaves WHERE employee_id ='$empid'"; $result3 = mysqli_query($conn,$query3); $row3 = $result3->fetch_array(); ?> <div class="col-lg-6 float-left"> <h5 class="mt-3 ml-3" style="color:#636c78;">Allowed Leaves Information</h5> <div class="col-auto mt-3"> <label for="" class="mr-2">Annual Leaves: </label> <input type="text" class=" form-control w-50 " id="aleaves" name="aleaves" placeholder="0" required value="<?php echo $row3['annual'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Casual Leaves: </label> <input type="text" class=" form-control w-50 " id="cleaves" name="cleaves" placeholder="0" required value="<?php echo $row3['casual'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Sick Leaves: </label> <input type="text" class=" form-control w-50 " id="sleaves" name="sleaves" placeholder="0" required value="<?php echo $row3['sick'];?>"> </div> <div class="col-auto mt-1"> <label for="" class="mr-2">Maternity Leaves: </label> <input type="text" class=" form-control w-50 " id="mleaves" name="mleaves" placeholder="0" required value="<?php echo $row3['maternity'];?>"> </div> </div> </div> <div class="modal-footer mt-5"> <button class="btn btn-success" name="save_emp" id="save_emp"><span class="glyphicon glyphicon-save"></span>Save & Next</button> </div> </div> </div> <!-- Incentives Information--> <div class="tab-pane fade show" id="incentives"> <div class="well col-lg-12" id="displaydata1"> <!--CONTENT HERE--> <?php $query4="SELECT * FROM emp_benefits WHERE employee_id ='$empid'"; $result4 = mysqli_query($conn,$query4); $row4 = $result4->fetch_array(); ?> <div class="col-lg-6 float-left check"> <h5 class="mt-3 ml-3" style="color:#636c78;">Company Allowed Benefits</h5> <div class="col-auto mt-3 ml-4"> <input class="form-check-input" type="checkbox" name="gli" id="gli" onclick="return myfun()" value="gli" <?php if ($row4['gli'] == '1') echo "checked='checked'"; ?>> <label class="form-check-inline" style="width: 150px;" style="text-align:left;">Group Life Insurance</label> </div> <div class="col-auto mt-1 ml-4"> <input class="form-check-input" type="checkbox" name="eobi" id="eobi" onclick="return myfun()" value="eobi" <?php if ($row4['eobi'] == '1') echo "checked='checked'"; ?>> <label class="form-check-label" for="inlineRadio2" style="text-align:left;">EOBI </label> </div> <div class="col-auto mt-1 ml-4"> <input class="form-check-input" type="checkbox" name="pessi" id="pessi" onclick="return myfun()" value="pessi" <?php if ($row4['pessi'] == '1') echo "checked='checked'"; ?>> <label class="form-check-label" for="inlineRadio2" style="text-align:left;">PESSI </label> </div> <div class="col-auto mt-1 mb-5 ml-4"> <input class="form-check-input" type="checkbox" name="overtime" id="overtime" onclick="return myfun()" value="overtime" <?php if ($row4['overtime'] == '1') echo "checked='checked'"; ?>> <label class="form-check-label" for="inlineRadio2" style="text-align:left;">Overtime </label> </div> </div> <div class="col-lg-6 float-left check"> <h5 class="mt-3 ml-3" style="color:#636c78;">Other Incentives</h5> </div> <div class="modal-footer mt-5"> <button class="btn btn-success" name="save_emp" id="save_emp"><span class="glyphicon glyphicon-save"></span>Save & Close</button> </div> </div> </div> <!--Employee Panel Ends--> </div> <!-- SCRIPT --> <script src="../scripts/app.js"></script> <?php include ($_SERVER['DOCUMENT_ROOT'].'/astrahrms/admin/employees/scripts/edit_emp.php'); ?> <?php // echo json_encode($data); $conn->close(); ?> now I want to update the image in this opened modal on clicking button named persinfo, I want to assign all the values, in modal including newly selected image (using input named file, see code), to variables in AJAX and then call page update_employee.php page to execute the update query to change employee information and newly selected image in the opened modal. Code for update_employee.php for your reference include '../../config/db_connect.php'; $id = $_POST['id']; $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; $cnic = $_POST['cnic']; $paddress = $_POST['paddress']; $laddress = $_POST['laddress']; $mobile = $_POST['mobile']; $emergency = $_POST['emergency']; $qualification = $_POST['qualification']; $dob = $_POST['dob']; $bloodgroup = $_POST['bloodgroup']; $notes = $_POST['notes']; $query_run= $conn->query("UPDATE employee SET first_name='$firstname', last_name='$lastname', cnic='$cnic', permanent_address='$paddress', local_address='$laddress',mobile='$mobile',emergency_contact='$emergency',dob='$dob', qualification='$qualification',blood_group='$bloodgroup',note='$notes' WHERE employee_id='$id'"); if ($query_run) { echo json_encode(array("statusCode"=>200)); } else { echo json_encode(array("statusCode"=>201)); } mysqli_close($conn); ?> Can anybody help me with this? Regards
How to fetch and edit/update all the data comes from Database in Bootstrap Modal Popup, even my Fetch Data Table is CONCATENATED?
I have a problem in Fetching all the Data by its ID coming from Database in Bootstrap Modal Popup. I have a Fetch Table in my Program. This is my code: <div class="table-responsive"> <?php require_once("include/connect.php"); //To connect Database try{ $sql="SELECT patient_id, CONCAT(patient_lname, ', ', patient_fname, ' ', patient_mi) AS Fullname, age, gender, status, address FROM tbl_patientinfo ORDER BY patient_lname"; //Patient Name is CONCATENATED (Fullname) $result=$con->prepare($sql); $result->execute(); ?> <table class="table table-hover" id="table-1"> <thead> <tr> <th class="text-center"> # </th> <th>Patient Name</th> <th>Age</th> <th>Gender</th> <th>Status</th> <th>Address</th> <th>Action</th> </tr> </thead> <tbody> <?php while($row=$result->fetch()){ ?> <tr> <td><?php echo $row['patient_id']; ?></td> <td><?php echo $row['Fullname']; ?></td> //Concatenated Last Name, First Name, and MI <td><?php echo $row['age']; ?></td> <td><?php echo $row['gender']; ?></td> <td><?php echo $row['status']; ?></td> <td><?php echo $row['address']; ?></td> <td> <button type="button" class="btn btn-icon btn-primary" data-toggle="modal" data-target="#editpatient"><i class="far fa-edit"></i></button> //Modal Button </td> </tr> <?php } ?> </tbody> </table> <?php } catch (PDOException $th){ echo "Error: ".$th->getMessage(); } $con=null; ?> </div> I want to fetch all the data from the Database (written in my $sql on the codes above) in Bootstrap Modal Popup using Javascript or JQuery code. This is my code in Javascript or JQuery: <!-- SCRIPT FOR FETCH RECORD IN MODAL --> <script> $(document).ready(function () { $('.edit-btn').on('click', function () { $('#editpatient').modal('show'); $tr = $(this).closest('tr'); var data = $tr.children("td").map(function () { return $(this).text(); }).get(); console.log(data); $('#patient_id').val(data[0]); $('#patient_lname').val(data[1]); $('#patient_fname').val(data[2]); $('#patient_mi').val(data[3]); $('#dob').val(data[4]); $('#age').val(data[5]); $('#gender').val(data[6]); $('#status').val(data[7]); $('#address').val(data[8]); $('#cnum').val(data[9]); $('#company').val(data[10]); }); }); </script> <!-- END OF SCRIPT FOR FETCH RECORD IN MODAL --> And this is my Codes in Modal: <!-- EDIT MODAL PATIENT --> <div class="modal fade" id="editpatient" tabindex="-1" role="dialog" aria-labelledby="formModal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="formModal">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form class=""> <div class="form-group"> <form method="POST" action="save-patient.php"> <input type="text" class="form-control" name="txt-patient_id" id="patient_id" placeholder="ID"> <div class="form-group"> <label>Last Name</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fas fa-user"></i> </div> </div> <input type="text" class="form-control" name="txt-patient_lname" id="patient_lname" placeholder="Last Name"> </div> </div> <div class="form-group"> <label>First Name</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fas fa-user"></i> </div> </div> <input type="text" class="form-control" name="txt-patient_fname" id="patient_fname" placeholder="First Name" required="true"> </div> </div> <div class="form-group"> <label>Middle Name</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fas fa-user"></i> </div> </div> <input type="text" class="form-control" name="txt-patient_mi" id="patient_mi" placeholder="Middle Name"> </div> </div> <div class="form-group"> <label>Date Picker</label> <input type="text" class="form-control datepicker" name="txt-dob" id="dob" placeholder="Date of Birth" required="true"> </div> <div class="form-group"> <label>Age</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fas fa-plus"></i> </div> </div> <input type="text" class="form-control" name="txt-age" id="age" placeholder="Age" required="true"> </div> </div> <div class="form-group"> <label>Gender</label> <select class="form-control" name="txt-gender" id="gender" required="true"> <option value="" readonly>--- Please Select ---</option> <option value="Male">MALE</option> <option value="Female">FEMALE</option> </select> </div> <div class="form-group"> <label>Civil Status</label> <select class="form-control" name="txt-status" id="status" required="true"> <option value="" readonly>--- Please Select ---</option> <option>Single</option> <option>Married</option> <option>Widowed</option> <option>Separated</option> <option>Divorced</option> </select> </div> <div class="form-group"> <label>Address</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fas fa-home"></i> </div> </div> <input type="text" class="form-control" name="txt-address" id="address" required="true"> </div> </div> <div class="form-group"> <label>Contact Number</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fas fa-phone"></i> </div> </div> <input type="text" class="form-control" name="txt-cnum" id="cnum" required="true"> </div> </div> <div class="form-group"> <label>Company(Optional)</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fas fa-building"></i> </div> </div> <input type="text" class="form-control" name="txt-company" id="company"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </form> </div> </div> </div> </div> <!-- End of EDIT MODAL PATIENT --> My Problem is I want to fetch all data coming from database (means, not concatenated) by its ID but when the Modal shows, the data shows a concatenated data coming from the FETCH DATA TABLE. This is my sample FETCH DATA TABLE And this is my Problem Please help me to fix my problem. I already do this a month ago and until now, I can't solve this problem. I'm still new in this Programming Languages. I need help from others like you Guys. I hope you everybody can help me to fix this. Thank you so much <3
Append values are not fetching
The div appended value is not getting in controller but the appended thing is visible on the view page correctly and i had gone through several ways but couldn't reach to the correct point. Here is my view section please have a look <script type="text/javascript"> var maxAppends = 0; function add_field(id) { var update_new = $('<div class="form-group" style="margin-bottom: 0px">\n\ <label for="field-1" class="col-sm-4 control-label">Documentsss</label>\n\ <div class="col-sm-5">\n\ <div class="fileinput fileinput-new" data-provides="fileinput">\n\ <span class="btn btn-default btn-file"><span class="fileinput-new" >Select file</span><span class="fileinput-exists" >Change</span><input type="file" name="files[]" ></span> <span class="fileinput-filename"></span>×</div></div>\n\<div class="col-sm-2">\n\<strong>\n\ <i class="fa fa-times"></i> Remove</strong></div>'); maxAppends++; $(".update_new_"+id).append(update_new); } </script> <div class=" table-responsive div1" id="EmpprintReport"> <table id="myTable" class="table table-bordered table-striped table2excel"> <thead> <tr> <th>Document Name</th> <th>Documents</th> <th>Number</th> <th>Expiry Date</th> <th>Action</th> </tr> </thead> <tbody> <?php if(!empty($details)) { foreach ($details as $value) { ?> <tr> <td nowrap><?= $value->service_name;?></td> <td nowrap> <?php if (!empty($value->documents)): ?> <div class="form-group"> <!-- <label class="col-sm-4 control-label"><?= ('Documents') ?> : </label> --> <div class="col-sm-8"> <?php $uploaded_file = json_decode($value->documents); if (!empty($uploaded_file)): foreach ($uploaded_file as $sl => $v_files): if (!empty($v_files)): ?> <p class="form-control-static"> <a href="<?php echo base_url() . 'uploads/documents/' . $v_files; ?>" target="_blank" style="text-decoration: underline;"><?= $sl + 1 . '. ' . ('view') . ' ' . ('other_document') ?></a> </p> <?php endif; endforeach; endif; ?> </div> </div> <?php endif; ?> </td> <td nowrap><?= $value->service_number;?></td> <td nowrap><?= $value->expiry_date;?></td> <td> <textarea id="<?php echo $value->id;?>" hidden> <?php echo $value->documents;?></textarea> <a href="" data-toggle="modal" data-target="#edit_<?php echo $value->id;?>" id="Button3" id="Button3" class="btn btn-sm btn-warning" style="margin-top:5px;"> <i class="far fa-edit text-white" title="Edit"></i></a> <a data-toggle="modal" data-target="#confirm_delete" name="delete" id="title" c-d-id="<?php echo $value->id;?>" clientid="<?= $id; ?>" class="btn btn-sm btn-danger deletedocument" style="margin-top:5px;"> <i class="fa fa-trash text-white" data-toggle="tooltip" data-placement="bottom" title="Delete"></i></a></td> </tr> <div class="modal fade edit" id="edit_<?php echo $value->id;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="padding:20px !important;"> <div class="modal-dialog modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Edit Document</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <?php $result=$this->Admin_model->get_services_by_id($value->id); //var_dump($value->id); ?> <form method="post" class="form_<?php echo $value->id;?>" action="<?php echo base_url();?>admin/edit-client-registration-details/<?= $value->id; ?>/<?= $id; ?>" enctype="multipart/form-data"> <div class="form-group"> <div class="control-group"> <label>Service Name</label> <input type="text" name="service_name" class="form-control" placeholder="Enter service name" style="width: 100%" value="<?= $value->service_name; ?>" /> </div> <div class="control-group"> <label>Number</label> <input type="text" name="service_no" class="form-control" placeholder="Enter number" style="width: 100%" value="<?= $value->service_number; ?>" /> </div> <div class="control-group"> <label>Expiry Date</label> <input type="text" name="date" id="date_<?= $value->id; ?>" class="form-control input-sm datepick" data-bind="datePicker: StartDate" value="<?= $value->expiry_date; ?>" /> </div> <div id="update_new_<?php echo $value->id;?>" class="update_new_<?php echo $value->id;?> item-row"> <div class="form-group mb0" style="margin-bottom: 0px"> <label for="field-1" class="col-sm-4 control-label">Other Document</label> <div class="col-sm-5"> <div class="fileinput fileinput-new" data-provides="fileinput"> <?php if (!empty($value->documents)) { $uploaded_file = json_decode($value->documents); } if (!empty($uploaded_file)):foreach ($uploaded_file as $v_files_image): ?> <div class=""> <input type="hidden" name="fileName[]" value="<?php echo $v_files_image ?>"> <span class=" btn btn-default btn-file"> <span class="fileinput-filename"> <?php echo $v_files_image ?></span> × </span> <strong> <a href="javascript:void(0);" class="RCF"><i class="fa fa-times"></i> Remove</a></strong> <p></p> </div> <?php endforeach; ?> <?php endif; ?> <!-- Here i want the appended result and the result is coming but the values selected here is not passing to the controller while submitting--> </div> <div id="msg_pdf" style="color: #e11221"></div> </div> <div class="col-sm-3"> <strong><a href="javascript:void(0);" id="update_more" onclick="add_field('<?php echo $value->id;?>');" u_id="<?php echo $value->id;?>" class="addCF item-row-click update_more"><i class="fa fa-plus"></i> Add More </a></strong> </div> </div> </div> </div> <div class="modal-footer"> <img src="<?php echo base_url();?>assets/resources/ajax-loader.gif" id="ajaxIndicator" style="display: none; margin-right: 10px" /> <input type="submit" id="btnSubmit" class="btn btn-primary" style="font-weight: bold" value="Edit Details" /> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <!-- <button type="button" class="btn btn-primary">Save changes</button> --> </div> </form> </div> </div> </div> </div> <?php } } ?> </tbody> <tfoot> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </tfoot> </table> </div>
My data inserts but data table wont reload (codeigniter)
I am using an ajax code that inserts data into the database using modal however, the ajax.reload doesn't work because of some problems. I used the console and network tab of the chrome to see what is the error. It seems that the value for my ajax data is NULL. I Hope someone can help me. Screenshots of the error from console Screenshot from network Screenshot of null values Ajax code and Controller function $('#newConsigneeSubmit').on("click", function(){ var supp_code = $("input[name=supp_code]").val(); var address1 = $("input[name=address1]").val(); var address2 = $("input[name=address2]").val(); var country = $("input[name=country] ").val(); var description = $("input[name=description]").val(); var tel_num = $("input[name=tel_num]").val(); var fax_num = $("input[name=fax_num]").val(); var contact_person = $("input[name=contact_person]").val(); var email = $("input[name=email]").val(); var consol_agent = $("input[name=consol_agent]").val(); var disc1 = $("input[name=disc1]").val(); var disc2 = $("input[name=disc2]").val(); var disc3 = $("input[name=disc3]").val(); var disc4 = $("input[name=disc4]").val(); var disc5 = $("input[name=disc5]").val(); var last_transaction = $("input[name=last_transaction]").val(); var old_supplier = $("input[name=old_supplier]").val(); var sfm_table = $('#datatable-buttons').DataTable(); $.ajax({ url:'<?php echo base_url(); ?>SFM/insert', type:'post', data:{ 'supp_code' : supp_code , 'address1' : address1 , 'address2' : address2 ,'country' : country , 'description' : description ,'tel_num' : tel_num , 'fax_num' : fax_num ,'contact_person' : contact_person , 'email' : email , 'consol_agent' : consol_agent , 'disc1' : disc1 ,'disc2' : disc2 , 'disc3' : disc3 ,'disc4' : disc4 , 'disc5' : disc5 ,'last_transaction' : last_transaction ,'old_supplier' : old_supplier }, success: function(data) { if(data) { sfm_table.ajax.reload() $("#sfm_modal").modal('hide'); swal("Data Inserted", { icon: "success" }); } else { swal("Error", { icon: "error" }); } } }); }); function insert() { $data1 = array( 'SUPP_CODE'=> $this->input->post('supp_code'), 'ADDRESS'=> $this->input->post('address1'), 'ADDRESS2'=> $this->input->post('address2'), 'COUNTRY'=> $this->input->post('country'), 'DESCRIPTION'=> $this->input->post('description'), 'TEL_NO'=> $this->input->post('tel_num'), 'FAX_NO'=> $this->input->post('fax_num'), 'CONTACT'=> $this->input->post('contact_person'), 'EMAIL'=> $this->input->post('email'), 'CONS_AGENT'=> $this->input->post('consol_agent'), 'DISC1'=> $this->input->post('disc1'), 'DISC2'=> $this->input->post('disc2'), 'DISC3'=> $this->input->post('disc3'), 'DISC4'=> $this->input->post('disc4'), 'DISC5'=> $this->input->post('disc5'), 'LAST_TRANS'=> $this->input->post('last_transaction'), 'SUPP_CODE2'=> $this->input->post('old_supplier') ); $insertReturn = $this->system_model->insert('fo_supp', $data1); echo json_encode($insertReturn); } SFM_VIEW <!-- page content --> <div class="right_col" role="main"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel"> <div class="x_title"> <h2>Supplier Master File <small></small> </h2> <ul class="nav navbar-right panel_toolbox"> <li> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu" role="menu"> <li> <a href="#">Settings 1 </a> </li> <li> <a href="#">Settings 2 </a> </li> </ul> </ul> <div class="clearfix"></div> </div> <div class="x_content"> <div style="overflow: hidden;"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sfm_modal" style="float: right;"> <i class="material-icons"></i> <span>Add New Data</span> </button> </div> <table id="datatable-buttons" name="sfm_table" class="table table-striped table-bordered"> <thead> <tr> <th>Supplier Code </th> <th>Address </th> <th>Country </th> <th>Description </th> <th>Telephone Number </th> <th>Fax Number </th> <th>Contact Person </th> <th>Email </th> <th>Actions </th> <th>Consolidating Agent </th> <th>Discount 1 </th> <th>Discount 2 </th> <th>Discount 3 </th> <th>Discount 4 </th> <th>Discount 5 </th> <th>Last Transaction </th> <th>Old Supplier </th> </tr> </thead> <tbody> <?php if(!empty($fo_supp)): ?> <?php foreach($fo_supp as $supp): ?> <tr> <td> <?=$supp->SUPP_CODE?> </td> <td> <?=$supp->ADDRESS." ".$supp->ADDRESS2?> </td> <td> <?=$supp->COUNTRY?> </td> <td> <?=$supp->DESCRIPTION?> </td> <td> <?=$supp->TEL_NO?> </td> <td> <?=$supp->FAX_NO?> </td> <td> <?=$supp->CONTACT?> </td> <td> <?=$supp->EMAIL?> </td> <td> <a href="#sfm_modal_edit" data-target="#sfm_modal_edit" id='<?=$supp->SUPP_CODE?>' class="edit" data-toggle="modal"> <i class="material-icons" data-toggle="tooltip" title="Edit"></i> </a> <a href="#deleteEmployeeModal" class="delete" data-toggle="modal"> <i class="material-icons" data-toggle="tooltip" title="Delete"></i> </a> </td> <td> <?=$supp->CONS_AGENT?> </td> <td> <?=$supp->DISC1?> </td> <td> <?=$supp->DISC2?> </td> <td> <?=$supp->DISC3?> </td> <td> <?=$supp->DISC4?> </td> <td> <?=$supp->DISC5?> </td> <td> <?= $supp->LAST_TRANS ?> </td> <td> <?=$supp->SUPP_CODE2?> </td> </tr> <?php endforeach;?> <?php else: ?> <tr> <?php for($i = 0; $i < 10; $i++): ?> <td> <span class="text-danger"> Not Available </span> </td> <?php endfor; ?> </tr> <?php endif; ?> </tbody> </table> </div> </div> <!--MODAL HERE--> <div class="modal fade" name="sfm_modal " id="sfm_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel"> Create New Supplier </h4> </div> <!-- Modal Body --> <div class="modal-body"> <form id="form1" class="form-horizontal"> <div class="form-group form-group-sm"> <!-- left column --> <div class="col-sm-6"> <div class="form-group"> <label for="new_name" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Supplier Code</label> <span class="label label-default">Supplier Code</span> <div class="col-sm-10"> <input type="text" name="supp_code" id="supp_code" class="form-control" data-inputmask="'mask': '999999'"> </div> </div> <div class="form-group"> <label for="new_subname" class="col-sm-2 control-label" style="visibility: hidden;">Address</label> <span class="label label-default">Address</span> <div class="col-sm-10"> <input type="text" name="address1" class="form-control col-md-10" id="address1" placeholder=""> </div> </div> <div class="form-group"> <label for="new_address" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Address 2</label> <span class="label label-default">Address 2</span> <div class="col-sm-10"> <input type="text" name="address2" class="form-control col-md-10" id="address2" placeholder=""> </div> </div> <div class="form-group"> <label for="new_addresssub" class="col-sm-2 control-label" style="visibility: hidden;">Country</label> <span class="label label-default">Country</span> <div class="col-sm-10"> <input type="text" name="country" id="country" class="form-control col-md-10" /> </div> </div> <!-- <div class="form-group"><label for="new_zip" class="col-sm-2 control-label bg-danger" style = "visibility: hidden;">Description</label><span class="label label-default" >Supplier Code</span><div class="col-sm-3"><input type="text" class="form-control" id="new_zip" placeholder=""></div><div class="col-sm-7"><label for="new_zip_detail" class="sr-only" style = "visibility: hidden;">City, State Country</label><input type="text" class="form-control" id="new_zip_detail" placeholder="City, State Country" disabled=""></div></div> --> <div class="form-group"> <label for="new_addresssub" class="col-sm-2 control-label" style="visibility: hidden;">Description</label> <span class="label label-default">Description</span> <div class="col-sm-10"> <input type="text" name="description" class="form-control" id="description" placeholder=""> </div> </div> <div class="form-group"> <label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Telephone Number</label> <span class="label label-default">Telephone Number</span> <div class="col-sm-10"> <input type="text" class="form-control" name="tel_num" id="tel_num" data-inputmask="'mask' : '(999) 999-9999'"> </div> </div> <div class="form-group"> <label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Fax Number</label> <span class="label label-default">Fax Number</span> <div class="col-sm-10"> <input type="text" class="form-control" name="fax_num" id="fax_num" data-inputmask="'mask' : '(999) 999-9999'"> </div> </div> <div class="form-group"> <label for="new_name" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Consolidating Agent</label> <span class="label label-default">Consolidating Agent</span> <div class="col-sm-10"> <input type="text" name="consol_agent" class="form-control" id="consol_agent" placeholder=""> </div> </div> </div> <!-- right column --> <div class="col-sm-6"> <div class="form-group"> <label for="new_subname" class="col-sm-2 control-label" style="visibility: hidden;">Email</label> <span class="label label-default">Email</span> <div class="col-sm-10"> <input type="text" class="form-control" name="email" id="email" placeholder=""> </div> </div> <div class="form-group"> <label for="new_name" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Contact Person</label> <span class="label label-default">Contact Person</span> <div class="col-sm-10"> <input type="text" class="form-control" name="contact_person" id="contact_person" placeholder=""> </div> </div> <div class="form-group"> <label for="new_subname" class="col-sm-2 control-label" style="visibility: hidden;">Discount 1</label> <span class="label label-default">Discount 1</span> <div class="col-sm-10"> <input type="text" class="form-control" name="disc1" id="disc1" placeholder=""> </div> </div> <div class="form-group"> <label for="new_address" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Discount 2</label> <span class="label label-default">Discount 2</span> <div class="col-sm-10"> <input type="text" class="form-control" name="disc2" id="disc2" placeholder=""> </div> </div> <div class="form-group"> <label for="new_addresssub" class="col-sm-2 control-label" style="visibility: hidden;">Discount 3</label> <span class="label label-default">Discount 3</span> <div class="col-sm-10"> <input type="text" class="form-control" name="disc3" id="disc3" placeholder=""> </div> </div> <div class="form-group"> <label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Discount 4</label> <span class="label label-default">Discount 4</span> <div class="col-sm-10"> <input type="phone" class="form-control" name="disc4" id="disc4" placeholder=""> </div> </div> <div class="form-group"> <label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Discount 5</label> <span class="label label-default">Discount 5</span> <div class="col-sm-10"> <input type="phone" class="form-control" name="disc5" id="disc5" placeholder=""> </div> </div> <div class="form-group"> <label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Last Transaction</label> <span class="label label-default">Last Transaction</span> <div class="col-sm-10"> <input type="text" class="form-control" name="last_transaction" id="last_transaction" data-inputmask="'mask': '9999/99/99'"> </div> </div> <div class="form-group"> <label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Old Supplier</label> <span class="label label-default">Old Supplier</span> <div class="col-sm-10"> <input type="phone" class="form-control" name="old_supplier" id="old_supplier" placeholder=""> </div> </div> </div> </div> </div> <!-- End main input boxes, starting a new "row" --> <!-- Modal Footer --> <div class="modal-footer"> <button type="button" class="btn btn-default" id="newConsigneeReset">Reset</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="newConsigneeSubmit">Add</button> </div> <!-- End Modal Footer --> </form> </div> <!-- End modal body div --> </div> <!-- End modal content div --> </div> <!-- End modal dialog div --> </div> <!-- End modal div --> </div> <!-- END DIV --> </div> </div> </div> <!-- /page content -->
Errors 01 - Close </form> before the div </form> </div> <--- THIS DIV remove id from <button> and use only for <form> # change button type <button type="submit" class="btn btn-primary">Add</button> # use below form ID <form id="form1" class="form-horizontal"> In JS #change $('#newConsigneeSubmit').on("click", function(){ # to this $("#form1").submit(function (e) { #change var supp_code = $("input[name=supp_code]").val(); # to this var supp_code = $('#supp_code').val(); FYI: Before you insert check all the data has passed to your controller. (print_r($arrayName);die;)
how to echo the data of a table row in a modal?
what I want to do is that the table( in perfiles.php) is related to the modal, when pressing the edit button in a row, the modal opens with their respective data already loaded from the DB and echo in each input if you need more details please tell me, do not class it as bad, cause im not the best to clarify my questions and i try //perfiles.php <?php include 'api/conexion.php'; $perfil = mysqli_query($conexion, "SELECT * FROM perfil where usuario = '$_SESSION[usuario]'"); ?> <table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%"> <thead> <tr> <th class="text-center">#</th> <th>Nombre</th> <th>Cuit</th> <th>Tipo Persona</th> <th class="text-right">Cierre de ejercicio</th> <th class="text-right">Acciones</th> </thead> <tbody> <?php while($reg = mysqli_fetch_array($perfil)) { ?> <tr id="<?php echo " tr_ ".$reg['id']; ?>"> <td class="row_factura" data-id="<?php echo $reg['usuario'] ?>"> <?php echo $reg['id']; ?> </td> <td class="row_factura" data-id="<?php echo $reg['usuario'] ?>"> <?php echo $reg['nombre']; ?> </td> <td class="row_factura" data-id="<?php echo $reg['usuario'] ?>"> <?php echo $reg['cuit']; ?> </td> <td class="row_factura" data-id="<?php echo $reg['usuario'] ?>"> <?php echo $reg['tipo_persona']; ?> </td> <td class="row_factura text-right" data-id="<?php echo $reg['usuario'] ?>"> <?php echo $reg['cierre_ejercicio']; ?> </td> <td class="td-actions text-right"> <button type="button" rel="tooltip" class="btn btn-info" data-original-title="" title="ver/editar perfil" data-toggle="modal" data-target="#modal_ajustes_perfil" href="#"> <i class="material-icons">person</i> </button> <button type="button" rel="tooltip" class="btn btn-success" data-original-title="" title="ver/editar impuestos" data-toggle="modal" data-target="#modal_ajustes_impuestos" href="#"> <i class="material-icons">edit</i> </button> <button id="<?php echo $reg['id'] ?>" type="button" rel="tooltip" class="btn btn-danger" onclick="mod('<?php echo $reg['id']; ?>', 'perfiles');" data-original-title="" title="eliminar perfil"> <i class="material-icons">close</i> </button> </td> </tr> <?php } ?> </tbody> </table> //modal <div class="modal fade" id="modal_ajustes_perfil" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="card"> <div class="card-header card-header-icon" data-background-color="blue"> <i class="material-icons">perm_identity</i> </div> <div class="card-content"> <h4 class="card-title">Datos del Perfil - <small class="category">Completar perfil</small> </h4> <form> <div class="row"> <div class="col-md-6"> <div class="form-group label-floating"> <label class="control-label">Nombre</label> <input type="text" class="form-control" disabled> </div> </div> <div class="col-md-6"> <div class="form-group label-floating"> <label class="control-label">Cuit</label> <input type="text" class="form-control" disabled> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group label-floating"> <label class="control-label">Tipo persona</label> <input type="email" class="form-control" disabled> </div> </div> <div class="col-md-6"> <div class="form-group label-floating"> <label class="control-label">Cierre del ejercicio</label> <input type="text" class="form-control" disabled> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group label-floating"> <label class="control-label">Dirección</label> <input type="text" class="form-control" disabled> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group label-floating"> <label class="control-label">Email</label> <input type="text" class="form-control"> </div> </div> <div class="col-md-6"> <div class="form-group label-floating"> <label class="control-label">Telefono</label> <input type="text" class="form-control"> </div> </div> </div>
If you have issues in Getting all rows for each username from mysql Database? I have re written the code, Kindly replace it. //perfiles.php <?php include 'api/conexion.php'; $perfil = mysqli_query($conexion, "SELECT * FROM `perfil` WHERE `usuario` = '$_SESSION[usuario]'"); ?> <table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%"> <thead> <tr> <th class="text-center">#</th> <th>Nombre</th> <th>Cuit</th> <th>Tipo Persona</th> <th class="text-right">Cierre de ejercicio</th> <th class="text-right">Acciones</th> </thead> <tbody> <?php while($row = mysqli_fetch_array($perfil, MYSQLI_ASSOC)) { foreach($row as $reg){ ?> <tr id="<?php echo " tr_ ".$reg['id']; ?>"> <td class="row_factura" data-id="<?php echo $reg['usuario'] ?>"> <?php echo $reg['id']; ?> </td> <td class="row_factura" data-id="<?php echo $reg['usuario'] ?>"> <?php echo $reg['nombre']; ?> </td> <td class="row_factura" data-id="<?php echo $reg['usuario'] ?>"> <?php echo $reg['cuit']; ?> </td> <td class="row_factura" data-id="<?php echo $reg['usuario'] ?>"> <?php echo $reg['tipo_persona']; ?> </td> <td class="row_factura text-right" data-id="<?php echo $reg['usuario'] ?>"> <?php echo $reg['cierre_ejercicio']; ?> </td> <td class="td-actions text-right"> <button type="button" rel="tooltip" class="btn btn-info" data-original-title="" title="ver/editar perfil" data-toggle="modal" data-target="#modal_ajustes_perfil" href="#"> <i class="material-icons">person</i> </button> <button type="button" rel="tooltip" class="btn btn-success" data-original-title="" title="ver/editar impuestos" data-toggle="modal" data-target="#modal_ajustes_impuestos" href="#"> <i class="material-icons">edit</i> </button> <button id="<?php echo $reg['id'] ?>" type="button" rel="tooltip" class="btn btn-danger" onclick="mod('<?php echo $reg['id']; ?>', 'perfiles');" data-original-title="" title="eliminar perfil"> <i class="material-icons">close</i> </button> </td> </tr> <?php } } ?> </tbody> </table> Below is for Modal... You need to provide your Db Structure to Edit the rest of things.. what are the fields to be filled for what with the screenshot //modal <?php include 'api/conexion.php'; $perfil = mysqli_query($conexion, "SELECT * FROM `perfil` WHERE `usuario` = '$_SESSION[usuario]'"); ?> <?php while($row = mysqli_fetch_array($perfil, MYSQLI_ASSOC)) { ?> <div class="modal fade" id="modal_ajustes_perfil" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="card"> <div class="card-header card-header-icon" data-background-color="blue"> <i class="material-icons">perm_identity</i> </div> <div class="card-content"> <h4 class="card-title">Datos del Perfil - <small class="category">Completar perfil</small> </h4> <form> <div class="row"> <div class="col-md-6"> <div class="form-group label-floating"> <label class="control-label">Nombre</label> <input type="text" class="form-control" value="<?php echo $reg['nombre']; ?>" disabled> </div> </div> <div class="col-md-6"> <div class="form-group label-floating"> <label class="control-label">Cuit</label> <input type="text" class="form-control" value="<?php echo $reg['cuit']; ?>" disabled> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group label-floating"> <label class="control-label">Tipo persona</label> <input type="email" class="form-control" value="<?php echo $reg['tipo_persona']; ?>" disabled> </div> </div> <div class="col-md-6"> <div class="form-group label-floating"> <label class="control-label">Cierre del ejercicio</label> <input type="text" class="form-control" value="<?php echo $reg['cierre_ejercicio']; ?>" disabled> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group label-floating"> <label class="control-label">Dirección</label> <input type="text" class="form-control" disabled> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group label-floating"> <label class="control-label">Email</label> <input type="text" class="form-control" value="<?php echo $reg['email']; ?>"> </div> </div> <div class="col-md-6"> <div class="form-group label-floating"> <label class="control-label">Telefono</label> <input type="text" class="form-control" value="<?php echo $reg['telefono']; ?>"> </div> </div> </div> <?php } ?>