i have an input into my page and it's value is changing by + and - buttons,
this input contain the directive ng-model to pass it's value to angular controller js file
and there is a button to submit the input value inside MYSQL database
the issue is that every time i press the submit button the value inserted into database returns zero value
How can i assign the value of the input which changes by the buttons to the ng-model??
The index.php file :
<!-- October Evaluation Start -->
<div class="row">
<div class="card shadow mb-4" style="width: 900px;">
<div class="card-header py-3">
<div class="row">
<div class="col">
<h6 class="m-0 font-weight-bold text-primary">October evaluation</h6>
</div>
<div class="col"><button id="plus11" class="btn btn-info text-right">Add new</button>
</div>
</div>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="exampleFormControlSelect1">select user</label>
<select class="form-control" id="exampleFormControlSelect1" ng-model="gid">
<?php
$con = mysqli_connect("localhost","root","","users");
$sql = mysqli_query($con, "SELECT name From myusers");
$row = mysqli_num_rows($sql);
while ($row = mysqli_fetch_array($sql)){
echo "<option value='". $row['name'] ."'>" .$row['name'] ."</option>" ;
}
?>
</select>
</div>
<br>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number" data-type="minus" data-field="quant[2]">
<span><i class="fas fa-minus"></i></span>
</button>
</span>
<input type="text" id="trig" name="quant[2]" class="form-control input-number" value="1" min="1" max="5" ng-model="onoctober">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number" data-type="plus" data-field="quant[2]">
<span><i class="fas fa-plus"></i></span>
</button>
</span>
</div>
</td>
</tr>
</tbody>
</table>
<input type="button" value="submit" class="btn btn-primary" ng-click="insertEval()" />
</form>
</div>
</div>
</div>
<!-- October Evaluation End -->
<br><br>
The AngularJS Controller js file:
var app = angular.module("myApp", []);
app.controller('userEval', function ($scope, $http) {
$scope.insertEval = function () {
$http.post(
"inserteval.php",
{
'gid': $scope.gid,
'onoctober': $scope.onoctober,
}).success(function (data) {
alert(data);
});
}
});
The inserteval.php file:
<?php
$connection = mysqli_connect("localhost","root","","users");
$data = json_decode(file_get_contents("php://input"));
if(count($data)>0)
{
$gid = mysqli_real_escape_string($connection,$data->gid);
$onoctober = mysqli_real_escape_string($connection,$data->onoctober);
$query = "INSERT INTO `myusers`(`name`, `on-october`) VALUES ('$gid','$onoctober')";
if(mysqli_query($connection,$query)){
echo "Done , new User added !";
}else {
echo "Error add !";
}
}
?>
Photos to illustrate:
In support of #Sujay Subrahmanya, you have to inform your html file that it is part of which app and which controller. Here is the syntax to inform it
<body ng-app="myApp" ng-controller="userEval">
<!-- Put your index.php content -->
</body>
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 have one table with rows of input type text and one button on each row to open modal window.
I am adding the rows in the main table with the help of add row button.
In modal window I have another table with rows of data and one radio button.
I want to get the values of columns of selected row with the help of radio button. I am getting the selected row values but the values are fetched always on first row of main table.
I want to get the selected values in the current row of main table I mean the row from where I opened the modal window.
Following is the HTML code of my table........
<div class="row pt-3">
<div class="table-responsive col-md-10">
<table id="tarifftable" class="table table-sm table-bordered table-hover">
<thead class="thead-light">
<tr>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","TDID"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","TDSCCODE"); ?></th>
<th></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","SCDESC"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","TDRATE"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"TARIFFS","TDREMARKS"); ?></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="text-control input-sm" readonly name="tdid[]" id="tdid"
value="1" style="text-align:right;width:50px;" maxlength="4" />
</td>
<td>
<input type="text" class="text-control" name="tdsccode[]" id="tdsccode"
style="width:100px;" maxlength="50" />
</td>
<td>
<a href="#" data-toggle="modal" data-target="#serviceModal" class="btn btn-info btn-xs">
<i class="fa fa-search"></i>
</a>
</td>
<td>
<input type="text" class="text-control" name="tdscdesc[]" id="tdscdesc" readonly
style="width:200px;" maxlength="250" />
</td>
<td>
<input type="number" class="text-control" name="tdrate[]" id="tdrate"
style="text-align:right;width:90px" maxlength="17" />
</td>
<td>
<input type="text" class="text-control" name="tdremarks[]" id="tdremarks"
style="width:200px" maxlength="100" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2 pl-0">
<button type="button" name="addrow" id="addrow" class="btn btn-success fa fa-plus btn-sm"></button>
</div>
</div>
Following is the JavaScript code for adding new row....
<script>
$(document).ready(function(){
var allInputs = document.querySelectorAll('table tr input[name="tdid[]"]');
var rowcount = allInputs[allInputs.length - 1].value;
var count=parseInt(rowcount);
$(document).on('click','#addrow', function(){
count=count+1;
var html_code='';
html_code +='<tr id="row_id_'+count+'">';
html_code += '<td><input type="text" class="text-control input-sm" name="tdid[]" id="tdid" readonly style="text-align:right;width:50px" value="'+count+'"/></td>';
html_code +='<td><input type="text" class="text-control" name="tdsccode[]" id="tdsccode" style="width:100px;" maxlength="50" /> </td>';
html_code +='<td><i class="fa fa-search"></i></td>';
html_code +='<td><input type="text" class="text-control" name="tdscdesc[]" id="tdscdesc" readonly style="width:200px;" maxlength="250" /></td>'
html_code +='<td><input type="number" class="text-control" name="tdrate[]" id="tdrate" style="text-align:right;width:90px" maxlength="17" /></td>'
html_code +='<td><input type="text" class="text-control" name="tdremarks[]" id="tdremarks" style="width:200px" maxlength="100" /></td>';
//html_code +='<td><button type="button" name="removerow" id="removerow" class="btn btn-danger fa fa-remove"></button></td>';
html_code +='</tr>';
$('#tarifftable').append(html_code);
//alert(count);
//}
});
});
</script>
Following is the HTML code for modal window......
<div id="serviceModal" class="modal show fade" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title"><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","SERVICELIST");?></h6>
</div>
<div class="modal-body">
<div class="control-container" style="padding:10px;">
<div class="row pt-1">
<div class="col-md-3">
<label><?php echo GetBilingualLabels($_SESSION['$language'],"SEARCHTABLE","SEARCHBY"); ?></label>
</div>
<div class="col-md-3">
<select id="searchby" class="text-control">
<option value="1"><?php echo GetBilingualLabels($_SESSION['$language'],"SERVICECODE","SCCODE"); ?></option>
<option value="2"><?php echo GetBilingualLabels($_SESSION['$language'],"SERVICECODE","SCDESC"); ?></option>
</select>
</div>
<div class="col-md-6">
<input type="text" id="searchvalue" class="text-control" onkeyup="FilterFunction('serviceTable','searchby','searchvalue')" style="width:100%"
placeholder="<?php echo GetBilingualLabels($_SESSION['$language'],"SEARCHTABLE","SEARCHVALUE"); ?>" />
</div>
</div>
<div class="line"></div>
<table id="serviceTable" class="table table-sm table-bordered table-hover table-lightfont paginated">
<thead class="thead-light">
<tr>
<th></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"SERVICECODE","SCCODE"); ?></th>
<th><?php echo GetBilingualLabels($_SESSION['$language'],"SERVICECODE","SCDESC"); ?></th>
</tr>
</thead>
<tbody>
<?php
if ($_SESSION['$language']=="E") {
$servicedata=SelectData("service_code","sc_code,sc_desc","","sc_code");
}
else {
$servicedata=SelectData("service_code","sc_code,sc_bldesc as sc_desc","","sc_code");
}
$rownum=0;
foreach ($servicedata as $servicedata) {
echo "<tr id=$rownum>
<td><input type='radio' name='serviceradio' id='serviceradio' value='{$servicedata['sc_code']}'></td>
<td>{$servicedata['sc_code']}</td>
<td>{$servicedata['sc_desc']}</td>
</tr>";
$rownum+=1;
} ?>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-close"></i>
<?php echo GetBilingualLabels($_SESSION['$language'],"BUTTON","CANCEL"); ?>
</button>
<button type="button" name="selectservice" id="selectservice" class="btn btn-success"> <!--onclick="DispMsg(<//?php echo "'".$_SESSION['AlertMsg']."'";?>)"-->
<i class="fa fa-check"></i>
<?php echo GetBilingualLabels($_SESSION['$language'],"BUTTON","SELECTLIST"); ?>
</button>
</div>
</div>
</div>
</div>
Following is the JavaScript for getting the selected values from modal window into main table.....
<script>
$(document).ready(function(){
$(document).on('click','#selectservice',function(){
var service = document.getElementsByName('serviceradio');
var scdesc = document.getElementsByName('scdesc');
for(i = 0; i < service.length; i++) {
if(service[i].checked) {
var Row = document.getElementById(i);
var Cells = Row.getElementsByTagName("td");
document.getElementById('tdsccode').value= service[i].value;
document.getElementById('tdscdesc').value=Cells[2].innerText;
}
}
$('#serviceModal').modal('hide');
});
</script>
Thanks everybody for the support but i have solved the issue by myself as follows..
1)i have set the id of my main table input text with count value.
2)on the button to show the modal window i have set the data-book-id with the value of count.
2)i have created one input type text with display none attribute
3)on modal show event i have set the value of this input type text with passed data-book-id value
4)then i concatenated this value with the id of the input type text in main table.
This way i am getting the value set of the current row of input type text.
I am creating a survey app that dynamically adds a dropdown box , and two text boxes.Once an option is selected from the dropdown it populates the selected option . Unforunately the first option works but for the others it simply populates the data I selected in the first.The overall goal is to input it inside a database using php.This is my php script
<?php
$connect = mysqli_connect("localhost", "root", "", "test");
$number = count($_POST["name"]);
$crops = count($_POST["selectedCrop"]);
// echo $number;
// echo $crop;
if ($number > 0) {
for ($i=0; $i<$number; $i++) {
if (trim($_POST["name"][$i] != '')) {
$sql = "INSERT INTO tbl_name(name,crop) VALUES('".mysqli_real_escape_string($connect, $_POST["selectedCrop"][$i])."' ,'".mysqli_real_escape_string($connect, $_POST["name"][$i])."')";
mysqli_query($connect, $sql);
}
}
echo "Data Inserted";
} else {
echo "Please Enter Name";
}
The result are as follows The Image with the duplicated resukts
Here is my HTML Code and the Javascript I am using to achieve
<body>
<div class="container">
<div class="page-header">
<h1 class="text-center">SURVEY</h1>
</div>
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<strong>E. FARMING AND AGRIBUSINESS </br>Farming</strong>
</div>
<div class="panel-body">
Which of the value chains did your household produce in September 2016 through rain fed production mechanisms? Or you produce now through rain fed production mechanisms?<i>Select all options applicable – 1, 2 up to last</i>
<br />
<form name="add_name" id="add_name">
<!-- This is the Table That I am adding the widgets dynamically -->
<table class="table table-striped table-bordered" id="dynamic_field">
<thead>
<tr>
<th>Name of Crop Options</th>
<th>Crop Selected</th>
<th>Produced/produce this value chain in 2015/2016?</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="dropdown" name= "crops[]">
<button id="crop" onchange="copyValue()" class="btn dropdown-toggle" type="button" data-toggle="dropdown" >
Name of Crop<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Maize</li>
<li>Beans</li>
<li>Tomatoes</li>
<li>Potatoes</li>
</ul>
</div>
</td>
<td>
<input type="text" name="selectedCrop[]" id="selectedCrop" placeholder="Enter your Name" class="form-control name_list" />
</td>
<td>
<input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" />
</td>
<td>
<button type="button" name="add" id="add" class="btn btn-success">Add More</button>
</td>
<!-- <td><button type="button" name="remove" id="'0'" class="btn btn-danger btn_remove">X</button></td></tr> -->
</tr>
</tbody>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><div class="dropdown" name= "crops[]"><button class="btn dropdown-toggle" type="button" data-toggle="dropdown" >Name of Crop<span class="caret"></span></button><ul class="dropdown-menu"><li>Maize</li> <li>Beans</li><li>Tomatoes</li><li>Potatoes</li></ul></div></td><td><input type="text" name="selectedCrop[]" id="selectedCrop" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:"farming_and_agribusiness_1_copy.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
$(function(){
$(".dropdown-menu li a").click(function(){
$("#crop:first-child").text($(this).text());
$("#crop:first-child").val($(this).text());
$("#selectedCrop:first-child").text($(this).text());
$("#selectedCrop:first-child").val($(this).text());
});
});
</script>
<!-- Survey - END -->
</div>
</body>
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 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">