I have two div on index page that contains a datatable i need to hide two div by default when I select an option in dropdown then i need to show that corresponding div based on selection.
I am using this page for searching a div contains a drop downmenu contains two options to select.when i select indents it should return that corresponding div
Index File
#include('theme.header')
<br>
<div class="row" id="dropsearch">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body ">
<h4 class="mt-0 header-title">Search Indent</h4>
<label class="pull-left">
<select class="pull-left form-control input-lg" id="dropsearch" name="dropsearch">
<option>Select Search</option>
<option>Indents</option>
<option>Jobcards</option>
</select>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="indents">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body ">
<h4 class="mt-0 header-title">Search Indent</h4>
<input type="text" id="searchid" name="searchid" class="pull-right form-control-sm">
<label class="pull-right">search</label>
<br>
<br><br>
<table id="datatable" class="table table-bordered table-responsive-lg">
<thead>
<tr>
<th>Slno</th>
<th>Customer Name</th>
<th>Customer Phone Number</th>
<th>DateOfDelivery</th>
<th>Delivery At</th>
<th>Redistraion Mode</th>
<th>Chassis No</th>
<th>Engine No</th>
<th>Show</th>
</tr>
</thead>
<tbody id="searchinfo">
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="row" id="jobcardd">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body bg-secondary text-white">
<h4 class="mt-0 header-title">Search Jobcard</h4>
<input type="text" id="searchjob" name="searchjob" class="pull-right form-control-sm">
<label class="pull-right">search</label>
<br>
<br><br>
<table id="datatable" class="table table-bordered table-responsive-lg">
<thead>
<tr>
<th>Slno</th>
<th>Jobcard No</th>
<th>Customer Order No</th>
<th>Ticket No</th>
<th>Bill No</th>
<th>Show</th>
</tr>
</thead>
<tbody id="searchjobcard">
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
$('#indents').hide();
$('#jobcardd').hide();
$(function () {
$("#dropsearch").change(function () {
if ($(this).val() == "indents") {
$("#indents").show();
}
else if ($(this).val() == "jobcard") {
$("#jobcardd").show();
}
});
});
$(document).ready(function () {
$('#searchid').on('keypress', function () {
$value = $(this).val();
$.ajax({
type: 'GET',
url: '{{\Illuminate\Support\Facades\URL::to('searchindents')}}',
data: {'searchid': $value},
success: function (data) {
$('#searchinfo').html(data);
// console.log(data);
}
})
})
});
$(document).ready(function () {
$('#searchjob').on('keypress', function () {
$value = $(this).val();
$.ajax({
type: 'GET',
url: '{{\Illuminate\Support\Facades\URL::to('searchjobacard')}}',
data: {'searchjob': $value},
success: function (data) {
$('#searchjobcard').html(data);
// console.log(data);
}
})
})
});
</script>
<script>
$.ajaxSetup({headers: {'csrftoken': '{{ csrf_token() }}'}});
</script>
#include('theme.footer')
Change this
<option>Select Search</option>
<option>Indents</option>
<option>Jobcards</option>
To this
<option value="">Select Search</option>
<option value="indents">Indents</option>
<option value="jobcard">Jobcards</option>
Update
You have given same ID to the DIV and DropDown!!
Use this
<select class="pull-left form-control input-lg" id="dropsearchselect" name="dropsearch">
<option value="">Select Search</option>
<option value="indents">Indents</option>
<option value="jobcard">Jobcards</option>
</select>
$(function () {
$("#dropsearchselect").change(function () {
if ($(this).val() == "indents") {
$("#indents").show();
}
else if ($(this).val() == "jobcard") {
$("#jobcardd").show();
}
});
});
Here is a fiddle
Update 2
$('#indents').hide();
$('#jobcardd').hide();
$(function () {
$("#dropsearchselect").change(function () {
if ($(this).val() == "indents") {
$('#jobcardd').hide();
$("#indents").show();
}
else if ($(this).val() == "jobcard") {
$('#indents').hide();
$("#jobcardd").show();
}else{
$('#indents').hide();
$('#jobcardd').hide();
}
});
});
Related
In my scenario just select the list box options, that values and text going to append to the table rows, but im facing small issues, user not allow to select same options (already selected options) and user not allow to append same values in the table.. if user select same option show alert messages like, 'you are already selected, select another option' like that..
here is my sample code fiddle..
Fiddle
Sample snippet here..
$("#excist_supp").on("change", function() {
$(".indexDrop").hide();
var newText = $("#excist_supp option:selected").text();
var newValue = $("#excist_supp option:selected").val();
$("#letterTable tbody").append('<tr><td><input type="text" id="sm_supp" value="' + newText + '" class="form-control newStyle1" name="sm_supp" readonly></td><td><input type="text" id="sm_code" value="' + newValue + '" class="form-control newStyle2" name="sm_code" readonly></td><td><button type="button" class="adRow ibtnDel newExcist" style="width:30%;position: relative;right: 25%; margin-bottom:0px">x</button></a></td></tr>');
$("#letterTable tr").each(function(i) {
var count = (i) - 1;
if (i === 0) return;
var input1 = $(this).find('.newStyle1');
var input2 = $(this).find('.newStyle2');
// id
input1.eq(0).attr("id", "sm_supp" + count); // Text fields
input2.eq(0).attr("id", "sm_code" + count);
// name
input1.eq(0).attr("name", "sm_supp[" + count + "]"); // Text fields
input2.eq(0).attr("name", "sm_code[" + count + "]");
});
});
/* compare two fields */
$('#excist_supp').change(function() {
$("#letterTable tr").each(function(i) {
var listVal = $('#excist_supp').val();
var tableVal = $('.newStyle2').val();
var nawTab = JSON.stringify(tableVal);
if (listVal == nawTab) {
alert('Matching!');
return true;
} else {
alert('Not matching!');
return false;
}
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<div class="row">
<!-- Existing Suppliers -->
<div class="col-sm-6">
<div class="col-12">
<div class="row">
<div class="col-12">
<input class="form-control serch" id="supSearch" type="search" placeholder="Search Existing Suppliers..">
<div class="selector">
<select class="col-12 listbox newBox" name="List_0" size="20" id="excist_supp" style="height: 125px !important;">
<option class="indexDrop">Choose Existing Suppliers</option>
<option value="0000">Komal </option>
<option value="0001">Ranjeet</option>
<option value="0002">Vishal </option>
<option value="0003">Gaurav</option>
<option value="0004">Dhanpat</option>
<option value="0005">Joe</option>
<option value="0006">Gowri</option>
<option value="0007">shankar</option>
<option value="0008">Dhanpat</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- Table -->
<div class="col-5">
<div class="container">
<div class="row clearfix">
<div class="table-wrapper">
<div class="table-scroll">
<table id="letterTable" class="table table-bordered table-striped order-scroll order-list" style="width: 95%;">
<thead>
<tr style="background-color: #680f79;color: #fff;">
<th class="text-center">Supplier Name</th>
<th class="text-center">Supplier Code</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody id="mytbody" style="text-align: center;">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
With $("#excist_supp").on("change".... and $('#excist_supp').change(function()... you are attaching the same event to the same element twice.
You can create a temporary array of all the used list values and create a function to check if the current value is exist in that array or not using Array.prototype.includes().
Try the following way:
$("#excist_supp").on("change", function() {
if(!checkValue()){
$(".indexDrop").hide();
var newText = $("#excist_supp option:selected").text();
var newValue = $("#excist_supp option:selected").val();
$("#letterTable tbody").append('<tr><td><input type="text" id="sm_supp" value="' + newText + '" class="form-control newStyle1" name="sm_supp" readonly></td><td><input type="text" id="sm_code" value="' + newValue + '" class="form-control newStyle2" name="sm_code" readonly></td><td><button type="button" class="adRow ibtnDel newExcist" style="width:30%;position: relative;right: 25%; margin-bottom:0px">x</button></a></td></tr>');
$("#letterTable tr").each(function(i) {
var count = (i) - 1;
if (i === 0) return;
var input1 = $(this).find('.newStyle1');
var input2 = $(this).find('.newStyle2');
// id
input1.eq(0).attr("id", "sm_supp" + count); // Text fields
input2.eq(0).attr("id", "sm_code" + count);
// name
input1.eq(0).attr("name", "sm_supp[" + count + "]"); // Text fields
input2.eq(0).attr("name", "sm_code[" + count + "]");
});
}
});
/* compare two fields */
var temp = [];
function checkValue() {
var listVal = $('#excist_supp').val();
var tableVal = $('.newStyle2').val();
var nawTab = JSON.stringify(tableVal);
if (temp.includes(listVal)) {
alert('Matching!');
return true;
} else {
alert('Not matching!');
temp.push(listVal)
return false;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<div class="row">
<!-- Existing Suppliers -->
<div class="col-sm-6">
<div class="col-12">
<div class="row">
<div class="col-12">
<input class="form-control serch" id="supSearch" type="search" placeholder="Search Existing Suppliers..">
<div class="selector">
<select class="col-12 listbox newBox" name="List_0" size="20" id="excist_supp" style="height: 125px !important;">
<option class="indexDrop">Choose Existing Suppliers</option>
<option value="0000">Komal </option>
<option value="0001">Ranjeet</option>
<option value="0002">Vishal </option>
<option value="0003">Gaurav</option>
<option value="0004">Dhanpat</option>
<option value="0005">Joe</option>
<option value="0006">Gowri</option>
<option value="0007">shankar</option>
<option value="0008">Dhanpat</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- Table -->
<div class="col-5">
<div class="container">
<div class="row clearfix">
<div class="table-wrapper">
<div class="table-scroll">
<table id="letterTable" class="table table-bordered table-striped order-scroll order-list" style="width: 95%;">
<thead>
<tr style="background-color: #680f79;color: #fff;">
<th class="text-center">Supplier Name</th>
<th class="text-center">Supplier Code</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody id="mytbody" style="text-align: center;">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
I have a list here from my table. It has a edit button and if I click edit button, It goes to another component which is called editTeacher. My question is how could I get the data from the table and transfer it to my editTeacher component. I get the data from route using axios . In laravel it is like this
<span class="glyphicon glyphicon-pencil"> .
How could I achieve it in vue?
Here is my code snippet
<table id="myTable" class="table table-hover">
<tbody>
<tr>
<th>ID</th>
<th>Image</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Birthday</th>
<th>Age</th>
<th>Type</th>
<th>Department</th>
<th>Status</th>
<th>Actions</th>
</tr>
<tr v-for="teacher in teachers" :key="teacher.id">
<td>{{teacher.id}}</td>
<td><img style=" border-radius: 50%;" :src="'img/'+teacher.image" height="42" width="42"/></td>
<td>{{teacher.firstname}}</td>
<td>{{teacher.lastname}}</td>
<td>{{teacher.gender}}</td>
<td>{{teacher.birthday}}</td>
<td>{{teacher.age}}</td>
<td>{{teacher.type}}</td>
<td>{{teacher.department_name}}</td>
<td v-if="teacher.status == 1"><span class="label label-success">Active</span></td>
<td v-else><span class="label label-danger">Inactive</span></td>
<td><router-link to="/viewTeacher"> <i class="fa fa-edit"></i></router-link></td>
</tr>
</tbody>
</table>
Route
//Teachers
Route::get('/getTeachers','TeacherController#index');
Route::post('/addTeacher','TeacherController#store');
Route::put('/editTeacher/{id}','TeacherController#update');
app.js route
{ path: '/viewTeacher', component: require('./components/editTeacher.vue').default },
Please follow the below code for the Vue js edit method.
As per your git repo.
app.js route
{ path: '/viewTeacher/:id', component: require('./components/editTeacher.vue').default, name: viewTeacher},
Edit Button in Teachers.vue
<router-link :to="{name: 'viewTeacher', params: {id: teacher.id}}" class="btn btn-xs btn-default">Edit</router-link>
EditTeacher.vue component
<template>
<div class="row">
<div class="col-xs-3">
<div class="box">
<div class="box-tools">
<img style="border-radius: 50%;" src="" height="100" width="50">
</div>
</div>
</div>
<div class="col-xs-9">
<div class="box">
<form v-on:submit.prevent="saveForm()">
<div class="row">
<div class="col-xs-12 form-group">
<label class="control-label">Teacher first name</label>
<input type="text" v-model="teacher.firstname" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12 form-group">
<label class="control-label">Teacher Last name</label>
<input type="text" v-model="teacher.lastname" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12 form-group">
<button class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
let app = this;
let id = app.$route.params.id;
app.teacherId = id;
axios.get('/getTeacher/' + id)
.then(function (resp) {
app.teacher = resp.data;
})
.catch(function () {
alert("Could not load teacher")
});
},
data: function () {
return {
teacherId: null,
teacher: {
firstname: '',
lastname: '',
}
}
},
methods: {
saveForm() {
var app = this;
var newTeacher = app.teacher;
axios.patch('/editTeacher/' + app.teacherId, newTeacher )
.then(function (resp) {
app.$router.replace('/');
})
.catch(function (resp) {
console.log(resp);
alert("Could not Update");
});
}
}
}
Web.php
Route::get('/getTeachers','TeacherController#index');
Route::get('/getTeacher/{id}','TeacherController#show');
Route::post('/addTeacher','TeacherController#store');
Route::put('/editTeacher/{id}','TeacherController#update');
Controller
public function show($id)
{
return Teacher::findOrFail($id);
}
I am a beginner in Javascript and would appreciate some guidance in using the List.js library. So far, I have created the filters and they are able to work. But I would like the default table to have filter 'Pending Delivery' applied already as this would be the most commonly accessed page.
HTML
(There is already code for the filters)
<table class="order-table table table-hover table-striped">
<thead>
<th>S/N</th>
<th>Order ID</th>
<th>Customer Name</th>
<th>Route Number</th>
<th>Order Date</th>
<th>Delivery Date</th>
<th>Status</th>
</thead>
<tbody class="list">
<tr>
<td>1</td>
<td class='orderId'>5</td>
<td>Matilda Tan</td>
<td>16</td>
<td>2018-06-29</td>
<td>2018-06-29</td>
<td class='sts'>Pending Delivery</td>
</tr>
<tr>
<td>2</td>
<td class='orderId'>7</td>
<td>Xena Yee</td>
<td>01</td>
<td>2018-06-21</td>
<td>2018-06-23</td>
<td class='sts'>Delivered</td>
</tr>
<div class="no-result">No Results</div>
<ul class="pagination"></ul>
</div>
</div>
</div>
JS
var options = {
valueNames: [
'name',
'sts',
{ data: ['status']}
],
page: 5,
pagination: true
};
var userList = new List('users', options);
function resetList(){
userList.search();
userList.filter();
userList.update();
$(".filter-all").prop('checked', true);
$('.filter').prop('checked', false);
$('.search').val('');
//console.log('Reset Successfully!');
};
function updateList(){
var values_status = $("input[name=status]:checked").val();
console.log(values_status);
userList.filter(function (item) {
var statusFilter = false;
if(values_status == "All")
{
statusFilter = true;
} else {
statusFilter = item.values().sts == values_status;
}
return statusFilter
});
userList.update();
//console.log('Filtered: ' + values_gender);
}
$(function(){
//updateList();
$("input[name=status]").change(updateList);
userList.on('updated', function (list) {
if (list.matchingItems.length > 0) {
$('.no-result').hide()
} else {
$('.no-result').show()
}
});
});
You have duplicated IDs. That's an error because an ID must be unique.
If you need to change from All to Pending Delivery selected it is enough to change your html moving the checked attribute from current position (All) to the Pending Delivery position.
After, call your updateList(); after the $("input[name=status]").change(updateList); in your dom ready function.
Your updated codepen
The short changes in your code:
$(function(){
//updateList();
$("input[name=status]").change(updateList);
updateList(); // this line added
userList.on('updated', function (list) {
if (list.matchingItems.length > 0) {
$('.no-result').hide()
} else {
$('.no-result').show()
}
});
});
<div class="container">
<div class="row">
<div id="users" class="col-xs-12">
<div class="filter-group row">
<div class="form-group col-xs-12 col-sm-12 col-md-4">
<input type="text" class="search form-control" placeholder="Search" />
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-4">
<div class="radio-inline">
<label>
<input class="filter-all" type="radio" value="All"
name="status" id="status-all"/> All <!-- removed checked -->
</label>
</div>
<div class="radio-inline">
<label>
<input class="filter" type="radio"
value="Pending Delivery" name="status" id="status-pending" checked/>
Pending <!-- added checked -->
</label>
</div>
.......
I am consuming api successfully in knockout.js.But according to my table definition(id,name,debit,credit,amount),this is based on accounting.The amount i want to show if it is credit or debit since not all the amount are under the debit and credit the same time.kindly help me to diplay the amount under redit and debit respectively.
This is the viewmodel
function JournalViewModel() {
var self = this;
self.Period = ko.observable();
self.PayGroup = ko.observable();
self.PayGroups = ko.observableArray([]);
self.LoadPeriods = function () {
$.ajax({
url: baseUrl + 'api/Process/Load',
type: 'GET',
headers: { 'Access-Control-Allow-Origin': '*' },
dataType: 'json',
success: function (data) {
console.log(data);
if (data.Successfull == 1) {
self.Period(data.Model.CurrentPeriod);
self.PayGroups(data.Model.Paygroups);
}
},
error: function (request, error) {
console.log(error);
}
});
}
self.periodId = ko.observable();
self.PaygroupId = ko.observable();
self.Journal = ko.observableArray([]);
self.PayMaster = ko.observableArray();
self.LoadJournal = function () {
$.ajax({
url: baseUrl + 'api/Journal/LoadJournal/'+periodId +'/'+self.PaygroupId(),
type: 'GET',
cache: false,
headers: { 'Access-Control-Allow-Origin': '*' },
dataType: 'json',
success: function (data) {
if (data.HasError == 0) {
self.Journal(data.Model);
console.log(data.Model);
alert("Journal Successfully Processed");
$("#listTable").DataTable();
}
},
error: function (request, error) {
console.log(error);
}
});
}
self.StartDate = ko.observable()
self.EndDate = ko.observable()
self.NbDays = ko.observable();
self.NbHours = ko.observable();
self.Code = ko.observable();
self.CountEmployees = ko.observable();
self.LoadPeriods();
}ko.applyBindings(new JournalViewModel());
this is my view
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<nav role="navigation" aria-labelledby="system-breadcrumb">
<ol class="breadcrumb">
<li>Process</li>
<li>Journals</li>
</ol>
</nav>
<div class="box box-primary">
<div class="box-body">
<div class="col-md-12">
<div class="col-md-2">
<div class="form-group">
<label for="PeriodTxt">Pay Group</label>
<select data-bind="options: PayGroups,
optionsText: 'Name',
optionsValue: 'Id',
optionsCaption: 'Choose...',
value:PaygroupId" class="form-control"></select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="PeriodTxt">Period</label>
<input id="FullNameTxt" class="form-control" type="text"
readonly="readonly"
data-bind="value:Period()?Period().Code:''" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="StatusTxt">Number of Hours</label>
<input id="StatusTxt" class="form-control" type="text"
readonly="readonly"
data-bind="value:Period()?Period().NbHours:''" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="ds"></label>
<input type="submit" value="Load Journal" data-
bind="click:LoadJournal" class="btn btn-primary btn-block" />
</div>
</div>
</div>
</div>
</div>
<div class="well">
<div class="well-body">
<table id="listTable" class='table table-striped table-bordered'>
<thead>
<tr>
<th>
Account Code
</th>
<th>
Name
</th>
<th>
Debit
</th>
<th>
Credit
</th>
</tr>
</thead>
<tbody data-bind="foreach:Journal">
<tr>
<td data-bind="text:AcctId">
</td>
<td data-bind="text:AcctDescription">
</td>
<!-- ko if:Debit==1 -->
<td data-bind="text:Amount">
</td>
<!-- /ko -->
<!-- ko if:Credit==1 -->
<td data-bind="text:Amount"></td>
<!-- /ko -->
</tr>
</tbody>
</table>
</div>
</div>
#section Scripts{
<script>periodId = '#ViewBag.PeriodId';</script>
}
The problem is that you have the if condition on the tag, which will not render if false. The trick is to put it inside the tag as you want that to be shown all the time, just not the value inside. (If I understood your question correctly ofcourse)
<table>
<thead>
<tr>
<th>Account Code</th>
<th>Name</th>
<th>Debit</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr>
<td data-bind="text:AcctId"></td>
<td data-bind="text:AcctDescription"></td>
<td>
<span data-bind="if: Debit == 1">
<!-- ko text: Amount -->
<!-- /ko -->
</span>
</td>
<td>
<span data-bind="if: Credit == 1">
<!-- ko text: Amount -->
<!-- /ko -->
</span>
</td>
</tr>
</tbody>
</table>
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">