Hi I am using codeigniter. I need to have a form_dropdown embedded inside javascript.I have a table with a button add row.
When I click add I replicate the same row above. In my view page I have a javascript to add the dynamic table row.
Now I could not have a drop-down in it.I have a controller file where I pass a data that should be displayed as drop-down box.
My controller function:
class Admin_billing extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('billing_model');
if(!$this->session->userdata('is_logged_in')){
redirect('admin/login');
}
}
public function ticket($id)
{
$this->load->library('session');
$this->session->unset_userdata('client_detail');
$id=$this->uri->segment(4);
$data['id']=$this->uri->segment(4);
$data['employee']=$this->billing_model->emp_name();
$data['main_content'] = 'admin/billing/ticket_page';
$this->load->view('includes/template', $data);
}
}
My model function:
<?php
class billing_model extends CI_Model {
public function __construct()
{
$this->load->database();
}
public function emp_name()
{
$this->db->select('employee.first_name');
$this->db->from('employee');
$this->db->group_by('employee.id');
$query = $this->db->get();
return $query->result_array();
}
}
?>
Here I have a emp_name function to get the employee name from my database.
My view page:
<script>
function displayResult() {
var row = document.getElementById("test").insertRow(-1);
row.innerHTML = '<td>form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"')</td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td>';
}
</script>
<?php
$attributes = array('class' => 'form-horizontal', 'id' => '');
$options_employee = array('' => "Select");
foreach ($employee as $row)
{
$options_employee[$row['name']] = $row['name'];
}
?>
<table id="test">
<thead>
<tr>
<td style="width:80px;">Employee</td>
<td style="width:35px;">Start time</td>
<td style="width:35px;">Id</td>
<td style="width:145px;">Description</td>
<td style="width:45px;">Type></td>
<td style="width:45px;">qty prch></td>
<td style="width:45px;">qty used</td>
<td style="width:70px;">Price</td>
<td style="width:70px;">discount></td>
<td style="width:70px;">Tax></td>
<td style="width:70px;">Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');?></td>
<td><input type="text" name="start_time[]" value="" style="width:35px;"/></td>
<td><input type="text" name="pid[]" value="" style="width:35px;"/></td>
<td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td>
<td><input type="text" name="type[]" class="type" style="width:45px;"/></td>
<td><input type="text" name="qty_prch[]" class="qty_prch" style="width:45px;"/></td>
<td><input type="text" name="qty_used[]" class="qty_used" style="width:45px;"/></td>
<td><input type="text" name="price[]" class="price" style="width:70px;"/></td>
<td><input type="text" name="discount[]" class="discount" style="width:70px;"/></td>
<td><input type="text" name="tax[]" class="tax" style="width:70px;"/></td>
<td><input type="text" name="total[]" class="total" style="width:70px;"/></td>
</tr>
</tbody>
</table>
<div id="add_row">
<button onClick="displayResult()" class="add_r"></button>
</div>
This is my view page in the above table My first field is a dropdown php code. This works for static row in my table.When I use javascript to add new row I could not get a dropdown.How to handle this?Can someone help me code?
First at all PHP is server side language. If you append to html your row only in javascript no php is executed.
You need use ajax for this. Solution with jQuery:
On server side (php) you need to prepare url (function) for serve a new row snipped data.
On buton onClick event trigger jQuery ajax http://api.jquery.com/jquery.ajax. Url param point to prepared url.
After ajax request is done you set response data as new row to your table.
$.ajax({
url: "DOMAIN/newRow",
})
.done(function(data) {
$('table#test tbody').append(data);
}
});
PHP (in your admin billing controller)
I am not verry familiar with cakePHP, so simple. You need write function which returns generated row html.
public function newRow()
{
$options_employee = 'prepare this variable here';
$dropdown = form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');
// Send data to browser (return is only for demonstration)
return '<tr><td>' . $dropdown . '</td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td></tr>';
}
Related
Is there a way for me to submit data collected and passed to a variable using javascript to a php page.
I have a form that has input fields that are posted to a php file I am using a jquery function to serialize the form data and process it in php. However as well as the form data from the input fields I want to send data that I have collected and stored in a javascript variable and pick that up into a php variable so I can run a for loop.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>New User Registration</title>
</head>
<body>
<div id="newUserHld">
<table id="newUserFrmTbl">
<form id="newUserFrm">
<tr>
<td><label id="firstnameLbl">First Name</label></td>
<td><input type="text" id="firstname" size="20" /></td>
</tr>
<tr>
<td><label id="lastnameLbl">Last Name</label></td>
<td><input type="text" id="lastname" size="20" /></td>
</tr>
<tr>
<td><label id="dobLbl">Date of Birth</label></td>
<td><input type="text" id="dob" size="8" /></td>
</tr>
<tr>
<td><label id="positionLbl">Position</label></td>
<td>
<select size="1">
<option>Select Option</option>
<option> WFXM </option>
<option>Operations Manager</option>
<option>Assistant</option>
</select>
</td>
</tr>
<tr>
<td><label id="usernameLbl">Username</label></td>
<td><input type="text" id="username" size="20" /></td>
</tr>
<tr>
<td><label id="passwordLbl">Password</label></td>
<td><input type="password" id="password" size="20" /></td>
</tr>
<tr>
<td><label id="payRateLbl">Pay Rate</label></td>
<td><input type="text" id="payRate" size="20" /></td>
</tr>
<tr><td><input type="submit" id="createUsr" name="createUsr" value="Create User" /> </td>
</form>
</table>
</div>
<div id="success">
</div>
<button type="button" onclick="getFrmElm()">Try it</button>
</body>
<script>
function getFrmElm (){
var x = document.getElementById("newUserFrm");
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
txt = txt + x.elements[i].id + "<br>";
}
formSubmit();
}
function formSubmit(){
$.ajax({
type:'POST',
url:'userreg.php',
data:$('#newUserFrm').serialize(),
success:function(response){
$('#success').html(response);
}
});
return false;
}
</script>
</html>
PHP FROM userreg
<?php
include_once "iud.php";
$db = connectDatabase();
$formfields = test_input($_POST['txt'];
$firstname=test_input($_POST['firstname']);
$lastname=test_input($_POST['lastname']);
$sql="INSERT INTO contacts(firstname, lastname) ";
$sql .= "values (";
$sql .= "'".$firstname."', '".$lastname."'";
$sql .= ")";
if(mysqli_query($db, $sql)){
echo "Record Inserted";
}else{
echo "Insert failed";
}
mysqli_close($db);
function test_input($data){
$data=trim($data);
$data=stripslashes($data);
$data=htmlspecialchars($data);
return $data;
}
?>
Basically I want to send the data from the form but also from the VAR txt with it.
Modify your ajax to contain data Key.
Currently there are no key there.
$.ajax({
type:'POST',
url:'userreg.php',
data: {
firstName: $("#firstName").val(),
lastName: $("#lastName").val(),
// ... and so on until all the form element in here - then your PHP will work
},
success:function(response){
$('#success').html(response);
}
});
your missing name attribute in input field and if u user ajax need to link jquery library file in header. below code help to post your form data using ajax.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>New User Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="newUserHld">
<table id="newUserFrmTbl">
<form id="newUserFrm" method="POST" >
<tr>
<td><label id="firstnameLbl">First Name</label></td>
<td><input type="text" id="firstname" size="20" name="firstname" /></td>
</tr>
<tr>
<td><label id="lastnameLbl">Last Name</label></td>
<td><input type="text" id="lastname" size="20" name="lastname" /></td>
</tr>
<tr>
<td><label id="dobLbl">Date of Birth</label></td>
<td><input type="text" id="dob" size="8" name="dob" /></td>
</tr>
<tr>
<td><label id="positionLbl">Position</label></td>
<td>
<select size="1" name="positionLbl">
<option>Select Option</option>
<option> WFXM </option>
<option>Operations Manager</option>
<option>Assistant</option>
</select>
</td>
</tr>
<tr>
<td><label id="usernameLbl">Username</label></td>
<td><input type="text" id="username" size="20" name="username" /></td>
</tr>
<tr>
<td><label id="passwordLbl">Password</label></td>
<td><input type="password" id="password" size="20" name="password" /></td>
</tr>
<tr>
<td><label id="payRateLbl">Pay Rate</label></td>
<td><input type="text" id="payRate" size="20" name="payRate" /></td>
</tr>
<tr><td><input type="submit" id="createUsr" name="createUsr" value="Create User" onclick="formSubmit(); return false;" /> </td>
</form>
</table>
</div>
<div id="success">
</div>
</body>
<script>
function formSubmit(){
alert($('#newUserFrm').serialize());
$.ajax({
type:'POST',
url:'userreg.php',
data:$('#newUserFrm').serialize(),
success:function(response){
$('#success').html(response);
}
});
return false;
}
</script>
</html>
and php File to check response.
<?php
print_r($_POST);
exit;
?>
i am trying to calculate the total price for each new item added. I have created an onchange function that will calculate the total price based on the quantity inputted by the user, so every time the user changes the quantity, the price changes. I have tried running my code however it doesn't seem to be calculating and displaying the total in its corresponding text box.
function getTotal($i){
var price = document.getElementById('priceper_'+$i+'').value;
var per_pack = document.getElementById('per_pack_'+$i+'').value;
var quantity = document.getElementById('quantity_'+$i+'').value;
document.getElementById('subtotal_'+$i+'').value = ((price/per_pack)*quantity);
}
<table>
<tr>
<td>Paper</td>
<td align="center">Price</td>
<td align="center">Per Pack</td>
<td align="center">Quantity</td>
<td align="center">Sub Total</td>
</tr>
<tr class="multipp">
<td><input type="text" name="description_0" id="description_" size="85" maxlength="70" value="<?php echo htmlspecialchars($description[0]); ?>" /></td>
<td><input type="text" name="priceper_0" id="priceper_" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="per_pack_0" id="per_pack_" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" onChange="getTotal(<?php echo $i;?>);"/></td>
<td><input type="text" name="subtotal_0" id="subtotal_" size="15" maxlength="9" value="" /></td>
</tr>
<?php
for($i=1; $i<10; $i++)
{
echo '<tr class="multipp">';
echo '<td><input type="text" name="description_'.$i.'" id="description_'.$i.'" size="85" maxlength="70" value="'.htmlspecialchars($description[$i]).'" /></td>';
echo '<td><input type="text" name="priceper_'.$i.'" id="priceper_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="per_pack_'.$i.'" id="per_pack_'.$i.'" class="txt" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="quantity_'.$i.'" id="quantity_'.$i.'" size="10" maxlength="9" onChange="getTotal('.$i.');" value="'.htmlspecialchars($quantity[$i]).'" />`</td>';
echo '<td><input type="text" name="subtotal_'.$i.'" id="subtotal_'.$i.'" size="15" maxlength="9" value="'.htmlspecialchars($subtotal[$i]).'" /></td>';
echo '</tr>';
}
?>
</table>
Something like this
function getTotal() {
var total = 0;
for (var i=0,n=document.querySelectorAll(".multipp").length; i<n;i++) {
var price = document.getElementById('priceper_'+i).value;
var per_pack = document.getElementById('per_pack_'+i).value;
var quantity = document.getElementById('quantity_'+i).value;
var subtotal = (price/per_pack)*quantity;
document.getElementById('subtotal_'+i).value=subtotal.toFixed(2);
total+=subtotal;
}
document.getElementById("total").value=total.toFixed(2);
}
window.onload=function() {
for (var i=0,n=document.querySelectorAll(".multipp").length; i<n;i++) {
document.getElementById('quantity_'+i).onkeyup=getTotal;
}
getTotal();
}
<table>
<tr>
<td>Paper</td>
<td align="center">Price</td>
<td align="center">Per Pack</td>
<td align="center">Quantity</td>
<td align="center">Sub Total</td>
</tr>
<!-- here you loop in your PHP from 0 to 9 if you want 10 fields -->
<tr class="multipp">
<td><input type="text" name="description_0" id="description_'" size="85" maxlength="70" value="desc 0" /></td>
<td><input type="text" name="priceper_0" id="priceper_0" size="10" maxlength="9" value="11" /></td>
<td><input type="text" name="per_pack_0" id="per_pack_0" size="10" maxlength="9" value="1" /></td>
<td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" value="0"/></td>
<td><input type="text" name="subtotal_0" id="subtotal_0" size="15" maxlength="9" value="0.00" /></td>
</tr>
<tr class="multipp">
<td><input type="text" name="description_1" id="description_1" size="85" maxlength="70" value="desc 1" /></td>
<td><input type="text" name="priceper_1" id="priceper_1" size="10" maxlength="9" value="22" /></td>
<td><input type="text" name="per_pack_1" id="per_pack_1" size="10" maxlength="9" value="2" /></td>
<td><input type="text" name="quantity_1" id="quantity_1" size="10" maxlength="9" value="0"/></td>
<td><input type="text" name="subtotal_1" id="subtotal_1" size="15" maxlength="9" value="0.00" /></td>
</tr>
<tr><td colspan=4> </td><td><input type="text" id="total" value="0.00" />
</table>
The PHP:
<?php
for($i=0; $i<10; $i++)
{
echo '<tr class="multipp">';
echo '<td><input type="text" name="description_'.$i.'" id="description_'.$i.'" size="85" maxlength="70" value="'.htmlspecialchars($description[$i]).'" /></td>';
echo '<td><input type="text" name="priceper_'.$i.'" id="priceper_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="per_pack_'.$i.'" id="per_pack_'.$i.'" class="txt" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="quantity_'.$i.'" id="quantity_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($quantity[$i]).'" />`</td>';
echo '<td><input type="text" name="subtotal_'.$i.'" id="subtotal_'.$i.'" size="15" maxlength="9" value="'.htmlspecialchars($subtotal[$i]).'" /></td>';
echo '</tr>';
}
?>
I'm trying to make an invoice script with PHP+MySQL. I made my Invoice Entry Screen. Everything working perfectly. I also added "Add New Line" button.
Here is the problem, when I clicked the "Add New Line" all functions which used on first line are disabled. I do not have enough knowledge on JS.
Here are the Codes:
PHP:
<div class="table-striped" id="dataTable">
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Product No</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="ekleaq">
<tr>
<td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td>
<td>
<div class="col-xs selectContainer">
<select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])">
<?php
while($row = $result1->fetch_assoc()){
unset($id, $name, $ax1, $ax2);
$id = $row['inv_products_id'];
$name = $row['inv_products_no'];
$ax1 = $row['inv_products_desc'];
$ax2 = $row['inv_products_price'];
echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>';
}
?>
</select>
</div>
</td>
<td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td>
<td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td>
<td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td>
<td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td>
<td><button type="button" class="btn btn-default addButton" id="ekle"><i class="fa fa-plus"></i></button></td>
</tr>
</tbody>
</table>
</div>
JS:
<script>
$("#ekle").click(function(){
$("#ekleaq")
.append('<tr><td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td><td> \
<div class="col-xs selectContainer"><select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])"> "<?php while($row = $result1->fetch_assoc()){ unset($id, $name, $ax1, $ax2);$id = $row['inv_products_id'];$name = $row['inv_products_no'];$ax1 = $row['inv_products_desc'];$ax2 = $row['inv_products_price'];echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>'; } ?>" </select> \
</div></td><td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td><td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td><td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td><td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td></tr>');
});
function ShowData(obj)
{
document.getElementById('decription1').value = obj.getAttribute('data-ax1');
document.getElementById('price1').value = obj.getAttribute('data-ax2');
}
function CalculateData(input)
{
price = document.getElementById('price1');
quantity = document.getElementById('quantity1');
amount1.value = price.value * quantity.value;
}
</script>
I have a huge form which has a table in it. I add lines of this table with jQuery when the user press some button and try to catch all theses values in PHP
But I can't get other values than the first line of the table!
Got
Undefined index: categorie#2
when I'm trying to get it by $_POST['categorie#2']
HTML looks like this:
<form>
...[some working inputs]
<table id="matos" class="table table-responsive synthese">
<thead>
<tr>
<th>Matériel</th>
<th>Fournisseur</th>
<th>Numéro de série</th>
<th>Catégorie</th>
<th>Description</th>
<th>Date d'achat</th>
<th>Etat</th>
</tr>
</thead>
<tbody>
<tr class="" id="ligne#1">
<td><input type="text" name="materiel#1" id="materiel#1" class="form-control" value=""></td>
<td>
<select name="fournisseur#1" id="fournisseur#1" class="form-control" value="">
<?php
$list = listing_fournisseurs();
foreach ($list as $key => $value)
{
echo '<option value='.$key.'>'.$value.'</option>';
}
?>
</select>
</td>
<td><input type="text" name="num_serie#1" id="num_serie#1" class="form-control" value=""></td>
<td>
<select name="categorie#1" id="categorie#1" class="form-control" value="">
<?php
$list = listing_categories();
foreach ($list as $key => $value) {
echo ' <option value='.$key.'>'.$value.'</option>';
}
?>
</select>
</td>
<td><input type="text" name="description_materiel#1" id="description_materiel#1" class="form-control" value=""></td>
<td><input type="text" name="buy_date#1" id="buy_date#1" class="date form-control" value=""></td>
<td>
<select name="etat#1" id="etat#1" class="form-control" value="">
<?php
$list = listing_etats();
foreach ($list as $key => $value) {
echo ' <option value='.$key.'>'.$value.'</option>';
}
?>
</select>
</td>
</tr>
</tbody>
</table>
How I add a line in jQuery?
var num= parseInt($('#matos tr:last').prop("id").split('#')[1])+1;
$('#matos tr:last').after('<tr id="ligne#'+num+'">'+
'<td><input type="text" name="materiel#'+num+'" id="materiel#'+num+'" class="form-control" value=""></td>'+
'<td><select name="fournisseur#'+num+'" id="fournisseur#'+num+'" class="form-control" value="">'+
opt_fournisseurs+
'</select></td>'+
'<td><input type="text" name="num_serie#'+num+'" id="num_serie#'+num+'" class="form-control" value=""></td>'+
'<td><select name="categorie#'+num+'" id="categorie#'+num+'" class="form-control" value="">'+
opt_categories+
'</select></td><td><input type="text" name="description_materiel#'+num+'" id="description_materiel#'+num+'" class="form-control" value=""></td>'+
'<td><input type="text" name="buy_date#'+num+'" id="buy_date#'+num+'" class="date form-control" value=""></td>'+
'<td><select name="etat#1" id="etat#1" class="form-control" value="">'+
opt_states+
'</select></td></tr>');
$('#nbLignes').val(num);
And well in PHP I'm trying:
$_POST['materiel#2'] // doesn't work
$_POST['materiel#1'] // works ! ( because first line ! )
I've read some issues that form don't work if they're not into table tr td ... But in my case they are ... What's wrong ?
My bad here ! I just messed up with my DOM-structure ...
You shouldn't close a div, that you oppened before your <form>, before the end of your </form> that's why !
Won't work :
<div id="some_div">
<form>
[Some inputs...]
</div><!-- /some_div -->
</form>
Should work :
<div id="some_div">
<form>
[Some inputs...]
</form>
</div><!-- /some_div -->
Seems obvious but not when you have a very large DOM ;)
You will make your life ALOT easier, if you use this naming convention <input name="category[]" /> instead of <input name="category#1" />
That way you will get your variables in an array on the PHP end, which makes traversing the data ALOT easier!
eg:
<?php
foreach($_POST['categories'] as $num => $value){
}
?>
var opt_fournisseurs = '<option value="gg">gg</option><option value="dd">dd</option>';
var opt_categories = '<option value="ss">ss</option><option value="aa">aa</option>';
var opt_states = '<option value="ww">ww</option><option value="ee">ee</option>';
var num= parseInt($('#matos tr:last').prop("id").split('#')[1])+1;
$('#matos tr:last').after('<tr id="ligne#'+num+'">'+
'<td><input type="text" name="materiel#'+num+'" id="materiel#'+num+'" class="form-control" value=""></td>'+
'<td><select name="fournisseur#'+num+'" id="fournisseur#'+num+'" class="form-control" value="">'+
opt_fournisseurs+
'</select></td>'+
'<td><input type="text" name="num_serie#'+num+'" id="num_serie#'+num+'" class="form-control" value=""></td>'+
'<td><select name="categorie#'+num+'" id="categorie#'+num+'" class="form-control" value="">'+
opt_categories+
'</select></td><td><input type="text" name="description_materiel#'+num+'" id="description_materiel#'+num+'" class="form-control" value=""></td>'+
'<td><input type="text" name="buy_date#'+num+'" id="buy_date#'+num+'" class="date form-control" value=""></td>'+
'<td><select name="etat#1" id="etat#1" class="form-control" value="">'+
opt_states+
'</select></td></tr>');
$('#nbLignes').val(num);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<?php
var_dump($_POST);
?>
<form method="post">
<table id="matos" class="table table-responsive synthese">
<thead>
<tr>
<th>Matériel</th>
<th>Fournisseur</th>
<th>Numéro de série</th>
<th>Catégorie</th>
<th>Description</th>
<th>Date d'achat</th>
<th>Etat</th>
</tr>
</thead>
<tbody>
<tr class="" id="ligne#1">
<td><input type="text" name="materiel#1" id="materiel#1" class="form-control" value=""></td>
<td>
<select name="fournisseur#1" id="fournisseur#1" class="form-control" value="">
<option value="one">one</option>
<option value="two">two</option>
</select>
</td>
<td><input type="text" name="num_serie#1" id="num_serie#1" class="form-control" value=""></td>
<td>
<select name="categorie#1" id="categorie#1" class="form-control" value="">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td><input type="text" name="description_materiel#1" id="description_materiel#1" class="form-control" value=""></td>
<td><input type="text" name="buy_date#1" id="buy_date#1" class="date form-control" value=""></td>
<td>
<select name="etat#1" id="etat#1" class="form-control" value="">
<option value="1a">1a</option>
<option value="2a">2a</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="submit" name="txtsubmit" value="submit"/>
This is a sample created from the code you have provided, which was working for me.
my problem is that my smarty script wont work when appending it to the DOM using after() jquery, I use this script when user tries to add new item and just by inserting it after the last table row.
in PHP
var smartyFetchItem = '{section name=cnt loop=$ItemsVal}<option value="{$ItemsVal[cnt].itemname}" >{$ItemsVal[cnt].itemname}</option>{/section}';
$('tbody.tbodyruler tr:last').after('<tr><td><input type="hidden" id="ds" name="itemname[]"><select class="itemanm"><option value="others">If Others - Please fill up add info</option>'+smartyFetchItem+'</select></td><td><input type="text" name="addinfo[]" id="addinfo[]" value="none"></td><td><input class="spinner" name="quantity[]" id="quantity[]" value="1"></td><td></td><td><input type="hidden" name="unitprice[]" id="unitprice[]" class="unitprice"></td><td></td><td><input type="hidden" name="total[]" id="total[]" class="subtot" readonly></td></tr>');
in TPL
<tbody class="tbodyruler">
{section name=count loop=$counter}
<tr>
<td><input type="hidden" id="ds" name="itemname[]">
<select class="itemanm">
<option value="others">If Others - Please fill up add info</option>
{section name=cnt loop=$ItemsVal}
<option value="{$ItemsVal[cnt].itemname}" >{$ItemsVal[cnt].itemname}</option>
{/section}
</select>
</td>
<td><input type="text" name="addinfo[]" id="addinfo[]" value="none"></td>
<td><input class="spinner" name="quantity[]" id="quantity[]" value="1"></td>
<td></td>
<td><input type="hidden" name="unitprice[]" id="unitprice[]" class="unitprice"></td>
<td></td>
<td><input type="hidden" name="total[]" id="total[]" class="subtot" readonly></td>
</tr>
{/section}
Try This
var smartyFetchItem = '';
{section name=cnt loop=$ItemsVal} {literal}
smartyFetchItem = smartyFetchItem + '<option value="{$ItemsVal[cnt].itemname}" >{$ItemsVal[cnt].itemname}</option>';
{/section}
$('tbody.tbodyruler tr:last').after('<tr><td><input type="hidden" id="ds" name="itemname[]"><select class="itemanm"><option value="others">If Others - Please fill up add info</option>'+smartyFetchItem+'</select></td><td><input type="text" name="addinfo[]" id="addinfo[]" value="none"></td><td><input class="spinner" name="quantity[]" id="quantity[]" value="1"></td><td></td><td><input type="hidden" name="unitprice[]" id="unitprice[]" class="unitprice"></td><td></td><td><input type="hidden" name="total[]" id="total[]" class="subtot" readonly></td></tr>');