I want to show a third data on my bootstrap modal. If a customer select 2 datas, it shows the relations between the 2 section. I used Jquery for it. It actually worked, but when I open the modal, it just show the first user in every case. I store the datas in MySQL, and the users also. So if I select Computer1 and Computer4, I want to print User1 and User4.
HTML
$(function() {
// cache jQuery objects that we will be re-using
var checkBoxes = $("input[name=case]");
var myModal = $("#myModal");
var user=checkBoxes.data("user");
// get all relationships i.e. key = name, value = connect or null
var relations = {};
checkBoxes.each(function() {
relations[this.dataset.name] = this.dataset.connect;
});
$('#checkBtn').click(function() {
// get checked checkboxes
var checkedBoxes = checkBoxes.filter(":checked");
// validate first
if (checkedBoxes.length !== 2) {
alert("You must check 2 checkbox!");
return false;
}
// build modal body
var html = "<div class='table-responsive'><table class='table table-bordered'><tr><td align='center'><b>Name</b></td><td align='center'><b>Connect to</b></td><td align='center'><b>User</b></td></tr>";
var current = checkedBoxes[0].dataset.name, // start with
end = checkedBoxes[1].dataset.name; // end with
while (current) {
html +="<tr><td>"+current+"</td>";
// check if it is connected
var next = relations[current];
// if it is not connected, stop
if (!next) {
html = 'Not related';
break;
}
// otherwise append HTML
html +="<td>"+next+"</td><td>"+user+"</td></tr>";
// if it is the end, stop
if (next === end) break;
// start over using connected one
current = next;
}
html+="</table></div>";
// update modal
myModal.find('.modal-body').html(html);
// open the modal dynamically once it is ready
myModal.modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Checkboxes -->
<div class="container">
<div class="row">
<div class="col-sm-6">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Connect to</th>
<th>Users</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="case" data-name="Computer1" data-connect="Computer3" data-user="User1"></td>
<td>Computer1</td>
<td>Computer3</td>
<td>User1</td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer2" data-connect="Computer3" data-user="User2"></td>
<td>Computer2</td>
<td>Computer3</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer3" data-connect="Computer4" data-user="User3"></td>
<td>Computer3</td>
<td>Computer4</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer4" data-user="User4"></td>
<td>Computer4</td>
<td></td>
<td>User4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Input button -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<input type="button" id="checkBtn" value="View" class="btn btn-info">
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="modaldata">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Just like relations, handle users as well.
Culprit is below line, it gives user data of first checkbox.
var user=checkBoxes.data("user");
$(function() {
// cache jQuery objects that we will be re-using
var checkBoxes = $("input[name=case]");
var myModal = $("#myModal");
// get all relationships i.e. key = name, value = connect or null
var relations = {}, users = {};
checkBoxes.each(function() {
relations[this.dataset.name] = this.dataset.connect;
users[this.dataset.name] = this.dataset.user;
});
$('#checkBtn').click(function() {
// get checked checkboxes
var checkedBoxes = checkBoxes.filter(":checked");
// validate first
if (checkedBoxes.length !== 2) {
alert("You must check 2 checkbox!");
return false;
}
// build modal body
var html = "<div class='table-responsive'><table class='table table-bordered'><tr><td align='center'><b>Name</b></td><td align='center'><b>Connect to</b></td><td align='center'><b>User</b></td></tr>";
var current = checkedBoxes[0].dataset.name, // start with
end = checkedBoxes[1].dataset.name; // end with
while (current) {
html +="<tr><td>"+current+"</td>";
// check if it is connected
var next = relations[current];
// if it is not connected, stop
if (!next) {
html = 'Not related';
break;
}
// otherwise append HTML
html +="<td>"+next+"</td><td>"+users[current]+"</td></tr>";
// if it is the end, stop
if (next === end) break;
// start over using connected one
current = next;
}
html+="</table></div>";
// update modal
myModal.find('.modal-body').html(html);
// open the modal dynamically once it is ready
myModal.modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Checkboxes -->
<div class="container">
<div class="row">
<div class="col-sm-6">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Connect to</th>
<th>Users</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="case" data-name="Computer1" data-connect="Computer3" data-user="User1"></td>
<td>Computer1</td>
<td>Computer3</td>
<td>User1</td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer2" data-connect="Computer3" data-user="User2"></td>
<td>Computer2</td>
<td>Computer3</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer3" data-connect="Computer4" data-user="User3"></td>
<td>Computer3</td>
<td>Computer4</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer4" data-user="User4"></td>
<td>Computer4</td>
<td></td>
<td>User4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Input button -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<input type="button" id="checkBtn" value="View" class="btn btn-info">
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="modaldata">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
I want to ask my problem hehe: in my case I want to show my data selector from JavaScript to my modal.
From my code, I have done using console.log() to view the data and it works, but it still didn't want to show in my form modal. Please help me where i'm missing it hehe ...
This is my JavaScript
<script>
let namaToko = document.getElementById("namaToko").innerHTML;
let alamatToko = document.getElementById("alamatToko").innerHTML;
let buttonDetail = document.querySelectorAll('.view-detail');
buttonDetail.forEach(function(_el) {
_el.addEventListener('click', function(e) {
jQuery('#modalUpdate').modal('show');
let row = document.querySelector(`[data-row-id="${e.target.dataset.id}"]`);
let nama = row.querySelector('td:nth-child(2)');
let alamat = row.querySelector('td:nth-child(3)');
console.log(nama);
console.log(alamat);
namaToko = nama;
alamatToko = alamat;
});
});
</script>
This is my form modal and the datatable
<!-- Bagian Edit Form Modal -->
<div class="modal fade modalUpdate" tabindex="-1" role="dialog" aria-hidden="true" id="modalUpdate">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Edit Data Toko</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method = "post" action = "library/services/formAction.php">
<input type="hidden" name="pageReferrer" value="http://localhost/city/?page=store" >
<input type="hidden" name="actionObject" value="toko" >
<input type="hidden" name="actionType" value="update" >
<div class="form-group">
<label for="namaToko" class="col-form-label">Nama Toko</label>
<input type="text" class="form-control" id="namaToko" placeholder="Masukkan Nama Toko" name="namaToko" required>
</div>
<div class="form-group">
<label for="alamatToko" class="col-form-label">Alamat Toko</label>
<input type="text" class="form-control" id="alamatToko" placeholder="Masukkan Nama Toko" name="alamatToko" required>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Akhir Edit Bagian Modal -->
<!-- /.card-header -->
<div class="card-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Toko</th>
<th>Alamat</th>
<th>Status</th>
<th>Opsi</th>
</tr>
</thead>
<tbody>
<?php
$n=1;
$toko = getDataToko();
while ($dataToko = mysqli_fetch_array($toko)) {
if($dataToko['status_ot']==1)
{
$status = "Aktif";
$idStatus = "1";
}
if($dataToko['status_ot']==2)
{
$status = "Tidak Aktif";
$idStatus = "2";
}
?>
<tr data-row-id="<?= $dataToko['id_ot'] ?>">
<td>
<?php echo $n++; ?>
</td>
<td>
<?php echo $dataToko['nama_ot'] ?>
</td>
<td>
<?php echo $dataToko['alamat_ot'] ?>
</td>
<td>
<?php echo $status ?>
</td>
<td>
<button type ="button" class ="view-detail btn btn-success" data-id="<?= $dataToko['id_ot'] ?>"> Edit </button>
<button type = "button" class = "btn btn-danger deletebtn"> Delete </button>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
And this is the picture where i'm click the Edit Button, and the data was showing in the console but didn't show up in my modal form:
If you give your form a name you can then set its input values using their name.
<form name="myForm" method = "post" action = "library/services/formAction.php">
const myForm = document.forms.myForm;
myForm.elements.namaToko.value = namaToko;
myForm.elements.alamatToko.value = alamatToko;
To set value
jQuery("#modalUpdate #namaToko").val(nama.innerText);
jQuery("#modalUpdate #alamatToko").val(alamat.innerText);
I am trying to set the radio button in the Modal by using the data attribute value. It works fine if I remove the hidden modal code. However, i want that code as I also use it to add new students(which I have not provided in code) and so i clear it on closing. The textbox works fine but the radio button stops working after selecting one student and then selecting another student.
For ex, I edit John and it works as expected. Now after clicking John and then i close and click Jane the radio button does not work. Is there a way where I can clear the content of the controls on closing the modal but also get the values back in on selection?
$(document).on('click', '.editStudent', function(e) {
var row = $(this).closest('tr');
var name = row.find('td.name').text().trim();
var qualified = $(this).attr("data-qualified");
if (name != null && name != "" && name != undefined) {
$("#ModalName").val(name);
}
if (qualified != null && qualified != "" && qualified != undefined) {
$("input[name='ModalQualified']").val([qualified.toLowerCase()])
}
$('#EditModal').modal('toggle');
})
$('#EditModal').on('hidden.bs.modal', function(e) {
$(this)
.find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", false)
.end();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<table id="tblStudent">
<thead>
<tr>
<th style="display:none;">Id</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none;"><input type="hidden" value="id1" /></td>
<td class="name">John</td>
<td><a title="Edit" class="btn btn-xs editStudent" data-qualified="false"> Edit</a></td>
</tr>
<tr>
<td style="display:none;"><input type="hidden" value="id2" /></td>
<td class="name">Jane</td>
<td><a title="Edit" class="btn btn-xs editStudent" data-qualified="true"> Edit</a></td>
</tr>
<tr>
<td style="display:none;"><input type="hidden" value="id3" /></td>
<td class="name">Jim</td>
<td><a title="Edit" class="btn btn-xs editStudent" data-qualified="false"> Edit</a></td>
</tr>
</tbody>
</table>
<div id="EditModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel">Edit Student</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="form-group">
<label>Student</label><br />
<input type="text" id="ModalName" class="form-control medium" />
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="form-group">
<label for="Refrigeration">Qualified</label>
<input type="radio" id="ModalQualified" name="ModalQualified" value="true" />Yes
<input type="radio" id="ModalQualified" name="ModalQualified" value="false" style="margin-left: 15px;" />No<br />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The ID of the radio would have to be different, and then use prop of element:
if(qualified.toLowerCase() == 'true')
$('#ModalQualifiedY').prop('checked',true)
else
$('#ModalQualifiedN').prop('checked',true)
I have created custom popup to show my records.
I am using CodeIgniter, I am fetching records from database and display on the view page which is working.
Now I have records in the view page like this
EmpName EMPID Mobile No. Status Action
xyz 122 0012141010 Pending view archive
mnb 123 0124541021 Pending view archive
poiu 124 0000000000 Approved view archive
What I am doing is, When user click on " pending" then it will ask for confirmation popup "Are you sure want to continue?" If the user clicks on "Later" button then the popup will close. It will not take any action. There is no issue till now.
Now let's talk about Sure button. Sure button not taking any action. I don't understand why it's not calling the submit action. Even it's not working on the archive.
Note: I don't want to use confirm() or any alert() popup
View page
<div class="white_bg pad0 m_b_20">
<div class="emp_list">
<div class=" ">
<?php if (!empty($get_emp_records)) {?>
<table cellspacing="0" id="tableData">
<thead>
<tr>
<th class="" width="3%"> <input type="checkbox" id="selectall" />
</th>
<th class="" width="15%"> EmpName </th>
<th class="" width="7%"> EMP ID</th>
<th class="" width="11%"> Mobile No. </th>
<th class="" width="13%"> Status </th>
<th class="" width="23%"> Action </th>
</tr>
</thead>
<?php
foreach ($get_emp_records as $row)
{ $encryption_id=base64_encode($this->encryption->encrypt($row->id));//encrpt the id
?>
<tbody>
<tr>
<td width="3%"><input type="checkbox" name="crm" class="crm_select" value="0" /></td>
<td>
<?php echo $row->firstname; echo $row->lastname;?>
</td>
<td>
<?php echo $row->employee_id;?>
</td>
<td>
<?php echo $row->mobileno;?>
</td>
<?php if ($row->is_approved == 1): ?>
<td>Approved</td>
<?php else: ?>
<td>
<span>Pending</span>
</td>
<?php endif; ?>
<td>View
Archive
</td>
</tr>
<!--conformation popup-->
<div class="confirmation_alert" id="popup-<?=$row->id;?>" style="display: none;">
<div class="opacity"></div>
<div class="profile_content">
<div class="profile_header clearfix">
x
<div class="profile_name_pic"> Confirmation!!! </div>
<div class="profile_header_right">
</div>
</div>
<div class="profile_body">
<div class="row">
<div class="col-md-12">
<div class="leave_reason">
<h3>Are you sure want to continue?</h3>
</div>
</div>
</div>
</div>
<div class="profile_footer clearfix">
<button type="submit" class="btn_default submit_btn" id="confirm">Sure</button>
<button type="button" class="btn_default edit_btn" onclick="closePopup(this)" data-id="<?=$row->id;?>">Later</button>
</div>
</div>
</div>
</tbody>
<?php } ?>
</table>
<?php }else{echo "No record found";}?>
</div>
</div>
</div>
Script
var url = "<?php echo base_url();?>";
function approve(obj) {
var id = $(obj).data('id');
$("#popup-" + id).show();
var el = document.getElementById("confirm");
if (el.addEventListener) {
el.addEventListener("click", function() {
//alert("clicked");
window.location = url + "Employee_control/approved_user?key=" + id;
});
}
return false;
}
function closePopup(obj) {
var id = $(obj).data('id');
$("#popup-" + id).hide();
};
Hope this will help you :
Since your r not submitting any form you should change your button type from submit to button like this :
<div class="profile_footer clearfix">
<button type="button" class="btn_default submit_btn" id="confirm">Sure</button>
<button type="button" class="btn_default edit_btn" onclick="closePopup(this)" data-id="<?=$row->id;?>">Later</button>
</div>
Your js code should be like this :
var url="<?php echo base_url();?>";
function approve(obj)
{
var id = $(obj).data('id');
$("#popup-"+id).show();
$('.submit_btn').on('click',function(e) {
alert('hi i am working');
window.location = url+"Employee_control/approved_user?key="+id;
e.preventDefault();
});
}
</script>
$(document).ready(function(){
var modalConfirm = function(callback){
$(".btn-confirm").on("click", function(){
$("#mi-modal").modal('show');
});
$("#modal-btn-si").on("click", function(){
callback(true);
$("#mi-modal").modal('hide');
});
$("#modal-btn-no").on("click", function(){
callback(false);
$("#mi-modal").modal('hide');
});
};
modalConfirm(function(confirm){
if(confirm){
alert('delete works fine');
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type='button' value="delete" class="btn btn-danger btn-confirm">
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="mi-modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Do you want to delete?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" id="modal-btn-si"><i class="icon-ok icon-white"></i> Yes</button>
<button type="button" class="btn btn-primary" id="modal-btn-no"><i class="icon-ban-circle icon-white"></i> No</button>
</div>
</div>
</div>
</div>
Hope it will work, try adding click event on idof submit
try using
$('#confirm').click(function()
{
// do tricks
});
I'm trying to read value from table once modal show with form.
I'm not able to get value from table behind modal. is there any specific rules?
What am I doing wrong? Would like to read value of backed table fields and wants to use for calculation of the modal fields.
please check example here -
Sample Code
/*doesn't read value of rollno from table when modal input box on change*/
$('#frm_name').change(function() {
var $row = $(this).closest('tr');
var rowID = $row.attr('class').split('_')[1];
var rollno = $row.find('.td_rollno').text();
alert(rollno);
});
HTML
<table class="table table-responsive">
<thead>
<tr>
<th>NAME</th>
<th>ROLL NUMBER</th>
<th>CONTACT NO</th>
<th>ADDRESS</th>
<th>EDIT</th>
</tr>
</thead>
<tbody>
<tr class="trID_1">
<td class="td_name">Name Row1</td>
<td class="td_rollno">12345</td>
<td class="td_contact">Mickey Mouse</td>
<td class="td_address">123 Mouse Lane</td>
<td>
<button class='td_btn btn btn-link btn-custom dis'>EDIT</button>
</td>
</tr>
<tr class="trID_2">
<td class="td_name">Name Row2</td>
<td class="td_rollno">22222</td>
<td class="td_contact">Wiley Coyote</td>
<td class="td_address">RR3 Road Runner Lane</td>
<td>
<button class='td_btn btn btn-link btn-custom dis'>EDIT</button>
</td>
</tr>
<tr class="trID_3">
<td class="td_name">Name Row3</td>
<td class="td_rollno">33333</td>
<td class="td_contact">Pepe LePew</td>
<td class="td_address">88 Stink Street</td>
<td>
<button class='td_btn btn btn-link btn-custom dis'>EDIT</button>
</td>
</tr>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">EDIT RECORD</h4>
</div>
<div class="modal-body">
<form id="updateValues" action="update.php" method="POST" class="form">
<div class="form-group">
<label for="name">NAME</label>
<input type="text" class="form-control" name="name" id="frm_name">
</div>
<div class="form-group">
<label for="contact">CONTACT</label>
<input type="text" class="form-control" name="contact" id="frm_contact">
</div>
<div class="form-group">
<label for="address">ADDRESS</label>
<textarea class="form-control" rows="3" name="address" id="frm_address"></textarea>
</div>
<input type="hidden" name="frm_id">
<input type="submit" class="btn btn-primary btn-custom" value="Save changes">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="results"></div>
</div>
</div>
Your markup suggests trying to update a record with a modal form that posts to update.php. Separately, you have a jQuery function that looks like an attempt to update the table contents with the modal inputs.
If I understand you correctly, you will want to instead read the docs for your particular PHP framework for how to:
submit forms via AJAX
handle successful update with a script that will update the DOM accordingly
I want to save multiple data in one go using codeigniter and then on success load the data on my datatable wihtout refreshing the whole page. I am able to do this successfully if I use modal and insert a single value but when I try to save multiple values, it doesn't work. I produce my input boxes on button click. Below are my codes:
CONTROLLER
public function add_multiple_orders(){
$dataset=[];
$item_name=$this->input->post('m_item_name');
$quantity=$this->input->post('m_quantity');
$amount=$this->input->post('m_amount');
$order_comment=$this->input->post('m_order_comment');
$branch_name=$this->input->post('m_branch_name');
$date_added=$this->input->post('m_date_added');
for($i=0;$i<sizeof($item_name);$i++){
$dataset[$i]=array(
'date_added'=>$date_added,
'item_name'=>$item_name[$i],
'quantity'=>$quantity[$i],
'amount'=>$amount[$i],
'ordered_by'=>$this->session->userdata['username'],
'order_status'=>'ordered',
'order_comment'=>$order_comment[$i],
'branch_name'=>$branch_name
);
}
$result=$this->sales_model->insert_mult_orders($dataset);
}
VIEW
<a name="mult_page">
<button class="btn btn-info" data-toggle="collapse" data-target="#add_multiple" style="margin-left: 20px;">Add Multiple Orders</button>
<div class="collapse" id="add_multiple" style="width: 95%; margin: 0 auto; margin-top: 10px;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
</div>
<div class="panel-body">
<form class="form_mult_ordrs form-inline" method="post">
<div class="form-group">
<label for="m_date_added">Date</label>
<input type="date" name="m_date_added" required>
</div>
<div class="form-group">
<label for="m_branch_name" class="control-label">Branch Name</label>
<select name="m_branch_name" class="form-control">
<option value="superdome">Superdome</option>';
<option value="seaside">Sea Side</option>
<option value="robinsons">Robinsons</option>
</select>
</div>
<div class="btn btn-warning pull-right" onclick="add_new_row()">Add more</div>
<hr>
<div style="font-weight: bold;">Total Php <input type="text" id="total_result" placeholder="0.00" class="form-control"></div>
<br>
<table id="mult_ord_tbl" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th class="ui-help-center">Item Name</th>
<th class="ui-help-center">Quantity</th>
<th class="ui-help-center">Amount</th>
<th class="ui-help-center">Comment</th>
<th class="ui-help-center">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="item_name[]" class="form-control">
<?php foreach($items as $item){
echo '<option value"='.$item->item_name.'">'.$item->item_name.'</option>';
} ?>
</select>
</td>
<td><input type="text" name="m_quantity[]" placeholder="Quantity"></td>
<td><input type="text" name="m_amount[]" id='m_amount[]' placeholder="Amount" onblur="total_values()"></td>
<td><input type="text" name="m_order_comment[]" placeholder="Commment"></td>
<td>
<button class="btn btn-danger" onclick="delete_row(this)"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>
</tbody>
</table>
<tr>
<td colspan="12">
<button id="btn_mult_ordrs" class="btn btn-success" onclick="save_mult_ordrs()" value="">Submit All</button>
</td>
</tr>
</form>
</div> <!-- end of panel body -->
<div class="panel-footer">
footer
</div>
</div> <!-- end of panel primary -->
</div> <!-- end of column 12 -->
</div> <!-- end of row -->
</div> <!-- end of collapse -->
<script type="text/javascript">
$(document).ready(function(){
$('#table_id').DataTable({
"order":[[0,"desc"]]
});
});
function save_mult_ordrs(){
if(confirm("Are you done?")){
var url="<?php echo site_url('sales/add_multiple_orders')?>";
add_new_row();
// $("#form_mult_ordrs").submit();
$.ajax({
url:url,
type:"POST",
data:$('#form_mult_ordrs').serialize(),
datatype:"JSON",
success:function(data)
{
alert('All data has been saved.');
location.reload();
},
error:function(jqXHR, textStatus, errorThrown){
alert('Error in saving.');
}
});
}
}
function add_new_row(){
var arrTables = document.getElementById('mult_ord_tbl');
var oRows = arrTables.rows;
var numRows = oRows.length;
var newRow = document.getElementById('mult_ord_tbl').insertRow( numRows );
var cell1=newRow.insertCell(0);
var cell2=newRow.insertCell(1);
var cell3=newRow.insertCell(2);
var cell4=newRow.insertCell(3);
var cell5=newRow.insertCell(4);
cell1.innerHTML = "<tr><td><select name='m_item_name[]' class='form-control'>" +
<?php
foreach($items as $item){
echo ('"<option value=\"'.$item->item_name.'\">'.$item->item_name.'</option>"+');
}
?>
+ "</select></td>";
cell2.innerHTML="<td height='5'><input type='text' name='m_quantity[]' placeholder='Quantity'></td>";
cell3.innerHTML="<td height='5'><input type='text' name='m_amount[]' placeholder='Amount' onblur='total_values()'></td>"
cell4.innerHTML="<td height='5'><input type='text' name='m_order_comment[]' placeholder='Comment'></td>";
cell5.innerHTML="<td><button class='btn btn-danger' onclick='delete_row(this)''><i class='glyphicon glyphicon-remove'></i></button></td></tr>";
}
</script>
MODEL
public function insert_mult_orders($data){
$this->db->insert_batch('piercapitan.sls_ordrs',$data);
return $this->db->affected_rows();
}
Your help is immensely appreciated.
Never mind guys. I found what's wrong. It's my form id! I somehow placed the name on the class and not on the id.
<form class="form_mult_ordrs form-inline" method="post">
It should have been:
<form id="form_mult_ordrs" class="form-inline" method="post">