I have this code where I used jQuery code to duplicate a table, the original table is working fine with php fetch query, but the duplication process doesn't work if i add php code to it, but if the php code removed it works.
<form action="" method="post" name="addusers" id="addusers">
<div class="felements"><select name="proname" type="text" required class="tfield2" id="proname">
<option id="0">-- Select Provider --</option>
<?php $prov = $con->query("SELECT * FROM providers"); while ($vall = mysqli_fetch_array($prov)){ ?>
<option id="<?php echo $vall ['ID'];?>">
<?php echo $vall ['provname']?>
</option>
<?php } ?>
</select></div>
<div class="felements"><input name="invodate" type="text" required class="tfield" id="invodate" placeholder="Invoice Date"/>
</div>
<div class="felements"><input name="Save" type="submit" class="button" value="Save" style="width: 91%;"></div>
<table class="table table-borderd table-hover felements">
<thead>
<th>Company Name</th>
<th>Claimed Amount</th>
<th>Exchange Rate</th>
<th>Claimed Amount (LYD)</th>
<th>Insurance Type</th>
<th><input type="button" value="+" id="add" class="btn btn-primary"></th>
</thead>
<tbody class="detail">
<tr>
<td><select name="comname[]" type="text" class="form-control comname"><option id="0">-- Select Company --</option>
<?php $comp = $con->query("SELECT * FROM companys"); while ($vall = mysqli_fetch_array($comp)){?><option id="<?php echo $vall ['ID'];?>"> <?php echo $vall ['company']?></option><?php } ?></select></td>
<td><input name="claimed[]" type="text" class="form-control claimed" required placeholder="Invoice Amount"/></td>
<td><input name="rate[]" type="text" class="form-control rate" required placeholder="EX Rate"/></td>
<td><input name="netclaimed[]" type="text" class="form-control netclaimed" required placeholder="Invoice Amount"/></td>
<td><select name="reinsurer[]" type="text" class="form-control reinsurer">
<option id="0">-- Select Reinsurer --</option>
<option id="1">تكافلي</option>
<option id="2">تجاري</option>
</select></td>
<th><input type="button" value="-" id="remove" class="btn btn-primary"></th>
</tr>
</tbody>
<tfoot>
<th></th>
<th></th>
<th>Total</th>
<th class="total">0</th>
<th>LYD</th>
<th></th>
</tfoot>
</table>
</form>
<?php require('../includes/footer.php'); ?>
<script type="text/javascript">
$(function(){
$('#add').click(function(){
addnewrow();
});
$('body').delegate('#remove','click',function(){
$(this).parent().parent().remove();
});
$('.detail').delegate('.claimed, .rate', 'keyup',function(){
var tr = $(this).parent().parent();
var qty = tr.find('.claimed').val();
var rate = tr.find('.rate').val();
var amt = (qty * rate);
tr.find('.netclaimed').val(amt);
total();
});
});
function total(){
var t = 0;
$('.netclaimed').each(function(i,e)
{
var amt = $(this).val()-0;
t += amt;
});
$('.total').html(t);
}
function addnewrow()
{
var tr = '<tr>'+
'<td><select name="comname[]" type="text" class="form-control comname"><option id="0">-- Select Company --</option> <option id=""></option></select></td>'+
'<td><input name="claimed[]" type="text" class="form-control claimed" required placeholder="Invoice Amount"/></td>'+
'<td><input name="rate[]" type="text" class="form-control rate" required placeholder="EX Rate"/></td>'+
'<td><input name="netclaimed[]" type="text" class="form-control netclaimed" required placeholder="Invoice Amount"/></td>'+
'<td><select name="reinsurer[]" type="text" class="form-control reinsurer"><option id="0">-- Select Reinsurer --</option> <option id="1">تكافلي</option><option id="2">تجاري</option></select></td>'+
'<th><input type="button" value="-" id="remove" class="btn btn-primary"></th>'+
'</tr>';
$('.detail').append(tr);
}
</script>
You either need to AJAX the content if the selects are different OR clone instead of inserting static rows:
function addnewrow() {
$('.detail').append($("tbody.detail tr:eq(0)").clone());
}
FIDDLE
Related
In my HTML page I have a dynamic input table, in which when button is clicked another row gets added. I think the JavaScript is fine and everything is fine but after all the row isn't getting added after clicking.
$(document).ready(function() {
var a = 1;
$('#add').click(function() {
a++;
$('#dynamic_pdfield').append('<tr id="row' + a + '"><td style="display:none;"><input type="text" name="preportno[]" value="<?php echo $report ?>"></td><td><input type="text" name="pending[]" placeholder="Work Pending" class="form-control name_list" ></td><td><input type="text" name="pendingqty[]" placeholder="QTY." class="form-control name_list" /></td><td><button type="button" name="remove" id="' + a + '" 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();
});
});
<div class="input-field">
<div class="form-group">
<table class="table table-bordered" id="dynamic_pdfield">
<tr>
<th style="display:none;">Report No.</th>
<th>Description</th>
<th>QTY.</th>
<th>Add or Remove</th>
</tr>
<tr>
<td style="display:none;"><input type="text" name="preportno[]" value="<?php echo $report ?>"></td>
<td><input type="text" name="pending[]" placeholder="Work Pending" class="form-control name_list"></td>
<td><input type="text" name="pendingqty[]" placeholder="QTY." class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">+</button></td>
</tr>
</table>
<center>
<input type="submit" name="save" id="save" class="btn btn-success">
</center>
</div>
</div>
I could not figure out what I am going wrong on?
Since you didn't reveal explicitly, I have to add not including JQuery library will conclude with an error object on the console with the "message" property "ReferenceError: $ is not defined".
Then if you take a look at the embedded code snippet below, you may see the only thing added to both of the rows are ids that user entered as input params. With the intended ids declared within input fields, and then using via string interpolation inside the append function, it concludes the intended behaviour.
$(document).ready(function() {
var a = 1;
$('#add').click(function() {
a++;
$('#dynamic_pdfield').append(`<tr id="row' + a + '"><td style="display:none;"><input type="text" name="preportno[]" value="<?php echo $report ?>"></td><td><input type="text" name="pending[]" placeholder="${desc.value}" class="form-control name_list" ></td><td><input type="text" name="pendingqty[]" placeholder="${qty.value}" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + a + '" 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();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-field">
<div class="form-group">
<table class="table table-bordered" id="dynamic_pdfield">
<tr>
<th style="display:none;">Report No.</th>
<th>Description</th>
<th>QTY.</th>
<th>Add or Remove</th>
</tr>
<tr>
<td style="display:none;"><input type="text" name="preportno[]" value="<?php echo $report ?>"></td>
<td><input type="text" id="desc" name="pending[]" placeholder="Work Pending" class="form-control name_list"></td>
<td><input type="text" id="qty" name="pendingqty[]" placeholder="QTY." class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">+</button></td>
</tr>
</table>
<center>
<input type="submit" name="save" id="save" class="btn btn-success">
</center>
</div>
</div>
I have created the GUI that looks like this:
enter image description here
the code for this part is:
<table class="table table-responsive table-bordered table-hover">
<thead>
<th>Shërbimi</th>
<th>Përshkrimi</th>
<th>Njësia</th>
<th>Çmimi</th>
<th>Sasia</th>
<th>Total</th>
<th><input type="button" value="+" id="add" class="btn btn-primary"></th>
</thead>
<tbody class="detail">
<tr>
<td width="25%">
<select name="service[]" id="sh" class="form-control sherbimi" aria-describedby="llojisherbimit" required>
<option selected="selected" value="">Zgjedh Shërbimin</option>
<?php
$service = new \Admin\Lib\Service();
$services=$service->find_all();
foreach ($services as $s){
echo "<option value='".$s->id ."' class='sale-select' selected='selected'> "
.$s->service_name . "</option>";
}
?>
</select>
<div class="invalid-feedback">
Ju lutem plotësoni shërbimin.
</div>
</td>
<td width="30%" >
<input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required >
<div class="invalid-feedback">
Ju lutem plotësoni përshkrimin.
</div>
</td>
<td width="15%">
<select name="unit[]" class="form-control" aria-describedby="llojinjesis" required>
<option value="">Zgjedh Njësin</option>
<option value='cope'> Copë </option>
<option value='dite'> Ditë </option>
</select>
<div class="invalid-feedback">
Ju lutem plotësoni njësin.
</div>
</td>
<td width="10%" >
<input type="text" id="cmimi" class="form-control price" name="price[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni çmimin.
</div>
</td>
<td width="10%">
<input type="text" class="form-control quantity" name="quantity[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni sasinë.
</div>
</td>
<td width="10%">
<input type="text" class="form-control amount" name="amount[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni totalin.
</div>
</td>
<td>
<!-- <a href="#" class="btn btn-danger a-btn-slide-text remove">
<span><strong>x</strong></span></a> -->
</td>
</tr>
</tbody>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="text-align:center;" class="total">0<b></b></th>
<th></th>
</tfoot>
</table>
The rows of the table are generated dynamically with javascript, the code for generating the rows looks like this:
function addnewrow()
{
vartr = '<tr>'+
'<td><?php
echo '<select id="sh" name="service[]" class="form-control sherbimi" aria-describedby="llojisherbimit" required>';
echo '<option selected="selected" value=""> Zgjedh opsionin </option>';
$service = new \Admin\Lib\Service();
$services=$service->find_all();
foreach ($services as $s){
echo '<option value="'.$s->id .'" class="sale-select" selected="selected"> '
.$s->service_name. '</option>';
}
echo '</select>';
?></td>'+
'<td><input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required ></td>'+
'<td><select name="unit[]" class="form-control unit"><option value=""> Zgjidh Njësine </option><option value="cope"> Copë </option>'+
'<option value="dite">Ditë </option></select></td>'+
'<td><input type="text" id="cmimi" class="form-control price" name="price[]" required></td>'+
'<td><input type="text" class="form-control quantity" name="quantity[] required"></td>'+
'<td><input type="text" class="form-control amount" name="amount[]" required></td>'+
'<td><a href="#" class="btn btn-danger a-btn-slide-text remove"><span><strong>x</strong></span>'+
'</tr>';
$('.detail').append(vartr);
}
I fill the select box with the data from a table using php .
What i'm trying to do is getting the data of the specified service(Sherbimet) while selecting that option in the select box and display these data in the inputs of the specified row(rows are created dynamically).
I've done it for the first row, the data is displayed well, but for the other rows it is changing result all the inputs of all the rows with the same data.
The code for this looks like this:
$(document).ready(function() {
$(document).on('change','#sh',function(e){
e.preventDefault();
var empid = $(this).val();
$.ajax({
method:"POST",
url: 'sale_data.php',
dataType: "JSON",
data: 'empid='+ empid,
cache: false,
success: function(data) {
var a= data.description;
var b=data.price;
$('input[name="description[]"]').val(a);
$('input[name="price[]"]').val(b);
}
});
});
});
First of all try cleaning the html code inside the javascript using backticks (``) for comments
function addNewRow() {
var tableRow = `
<tr>
<td>
<select
onchange="fillData(this)"
name="service[]"
class="form-control sherbimi"
aria-describedby="llojisherbimit" required>
<option selected="selected" value=""> Zgjedh opsionin </option>
<option value="5" class="sale-select">5</option>
</select>
</td>
<td><input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required ></td>
<td>
<select name="unit[]" class="form-control unit">
<option value="">Zgjidh Njësine </option>
<option value="cope"> Copë </option>
<option value="dite">Ditë </option>
</select>
</td>
<td><input type="text" id="cmimi" class="form-control price" name="price[]" required></td>
<td><input type="text" class="form-control quantity" name="quantity[] required"></td>
<td><input type="text" class="form-control amount" name="amount[]" required></td>
<td><a href="#" class="btn btn-danger a-btn-slide-text remove"><span><strong>x</strong></span></td>
</tr>
`
$('.detail').append(tableRow);
}
use proper naming syntax for functions and variables e.g addnewrow to addNewRow, always declare variables with var, const or let.
results of php code store in a javascript variable, as the php code will execute only on the server side and if you need something dynamic
from php you should use ajax otherwise it will not work. In your case
it is working as php its echo-ing out the html code that will be used
for preparing the results of a function.
the problem with your code is that you are not passing the certain elemenet that is being changed but rather you are trying to select the
element via class selectors, that one is always defaulting to the
first selector instead what you need to do is:
on the html side call the function fillData with the paramete this like:
<table class="table table-responsive table-bordered table-hover">
<thead>
<th>Shërbimi</th>
<th>Përshkrimi</th>
<th>Njësia</th>
<th>Çmimi</th>
<th>Sasia</th>
<th>Total</th>
<th>
<button id="add" class="btn btn-primary" onclick="addNewRow()">+</button></th>
</thead>
<tbody class="detail">
<tr>
<td width="25%">
<select name="service[]" onchange="fillData(this)" class="form-control sherbimi" aria-describedby="llojisherbimit" required>
<option selected="selected" value="" disabled="disabled">Zgjedh Shërbimin</option>
<option value='1' class='sale-select'>1</option>
<option value='2' class='sale-select'>2</option>
<option value='3' class='sale-select'>3</option>
</select>
<div class="invalid-feedback">
Ju lutem plotësoni shërbimin.
</div>
</td>
<td width="30%" >
<input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required >
<div class="invalid-feedback">
Ju lutem plotësoni përshkrimin.
</div>
</td>
<td width="15%">
<select name="unit[]" class="form-control" aria-describedby="llojinjesis" required>
<option value="">Zgjedh Njësin</option>
<option value='cope'> Copë </option>
<option value='dite'> Ditë </option>
</select>
<div class="invalid-feedback">
Ju lutem plotësoni njësin.
</div>
</td>
<td width="10%" >
<input type="text" id="cmimi" class="form-control price" name="price[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni çmimin.
</div>
</td>
<td width="10%">
<input type="text" class="form-control quantity" name="quantity[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni sasinë.
</div>
</td>
<td width="10%">
<input type="text" class="form-control amount" name="amount[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni totalin.
</div>
</td>
<td>
<!-- <a href="#" class="btn btn-danger a-btn-slide-text remove">
<span><strong>x</strong></span></a> -->
</td>
</tr>
</tbody>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="text-align:center;" class="total">0<b></b></th>
<th></th>
</tfoot>
</table>
also change the addNewRow function so it includes this variable (dont forget to use your version as I removed the php stuff from here):
function addNewRow() {
var tableRow = `
<tr>
<td>
<select
onchange="fillData(this)"
name="service[]"
class="form-control sherbimi"
aria-describedby="llojisherbimit" required>
<option selected="selected" value=""> Zgjedh opsionin </option>
<option value="5" class="sale-select">5</option>
</select>
</td>
<td><input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required ></td>
<td>
<select name="unit[]" class="form-control unit">
<option value="">Zgjidh Njësine </option>
<option value="cope"> Copë </option>
<option value="dite">Ditë </option>
</select>
</td>
<td><input type="text" id="cmimi" class="form-control price" name="price[]" required></td>
<td><input type="text" class="form-control quantity" name="quantity[] required"></td>
<td><input type="text" class="form-control amount" name="amount[]" required></td>
<td><a href="#" class="btn btn-danger a-btn-slide-text remove"><span><strong>x</strong></span></td>
</tr>
`
$('.detail').append(tableRow);
}
and then filldata function:
function fillData(element) {
var empid = element.value
$.ajax({
method:"POST",
url: 'sale_data.php',
dataType: "JSON",
data: 'empid='+ empid,
success: function(data) {
$('input[name="description[]"]').val(data.description);
$('input[name="price[]"]').val(data.price);
}
});
}
I have created php form as be image onchange select stock to display other cell.
<table id="example1" class="table table-striped" >
<thead>
<th style="width:10px">#</th><th style="width:300px">Name</th><th>Stock</th><th>Qty</th><th>Qty</th>
</thead>
<tr>
<TD style="width:10px"><INPUT type="checkbox" name="chk"/></TD>
<td>
<select class="form-control" id="icode" name="icode[]" onchange="get_stock(this.parentElement.parentElement)">
<?php
$sql_br="select * from jsl_store.item_master order by itemname";
$sql_br_r = oci_parse($con, $sql_br);
oci_execute($sql_br_r);
while (oci_fetch($sql_br_r)) {
?>
<option value=<?php echo oci_result($sql_br_r,1); ?>><?php echo oci_result($sql_br_r,2); ?></option>
<?php
}
?>
</select>
</td>
<td><input type="text" class="form-control" id="istock" name="istock[]"></td>
<td><input type="text" class="form-control" id="iqty"></td>
<td><input type="text" class="form-control" id="rqty"></td>
</tr>
</table>
function get_stock(thisRow) {
var x=thisRow.getElementsByTagName('select')[0].value;
$.ajax({
url: 'itemstock.php?u=1&itemcode=' + x,
success: function(data) {
$("[name='istock[]']").val(data);
}
});
}
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.