How to dynamically create database driven select field with php - javascript

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>

Related

How can I add each students ca and exam score in different input Fields and display their total in separate text field

I'm new in jQuery. I want the user to enter the CAT score and the EXAM score to get Total score, Grade, Remark and Position. The result to be displayed should be dependent on the addition of both CAT and EXAM score. Like once the user is enters the cat score and the exam score, the script should be able to add both, then display the total, the grade which could be A, B, ..., Remark and the position of the student based on the already entered scores.
Any help will be really appreciated. Thanks in advance!
$sql=mysqli_query($conn, "SELECT * from students where class='$classId'");
echo '
<div class="adv-table padTable">
<table id="marks" class="table table-bordered" id="hidden-table-info">
<caption><h3 style="text-align: center;">RESULT SHEET</h3></caption>
<thead>
<tr>
<th>SN</th>
<th width="40%">Student Name</th>
<th>CAT</th>
<th>Exam Score</th>
<th>Total Score</th>
<th>Grade</th>
<th>Remark</th>
<th>Position</th>
</tr>
</thead>
<tbody>';
$sn=0;
while ($res=mysqli_fetch_array($sql)) {
echo '<form action="'. htmlspecialchars($_SERVER['PHP_SELF']).' " method="post" class="style-form" enctype="multipart/form-data">
<tr>
<td>'.++$sn.'<input type="text" value="'.$res['id'].'" hidden="" name="studId"></td>
<td><input type="text" class="form-control form-control-inline input-medium " value="'.$res['surname'].' '. $res['othernames'].'" readonly=""></td>
<td>
<div class="form-group">
<input type="number" class="form-control form-control-inline input-medium cat" id="cat" name="cat" onkeypress="return (event.charCode == 8 || event.charCode==0)? null: event.charCode >=48 && event.charCode <=57">
</td>
<td>
<input type="number" class="form-control form-control-inline input-medium examScore" id="examScore" name="examScore" onkeypress="return (event.charCode == 8 || event.charCode==0)? null: event.charCode >=48 && event.charCode <=57" >
</td>
<td>
<input type="text" class="form-control form-control-inline input-medium totScore" id="totScore" name="totScore" readonly="">
</td>
<td>
<input type="text" class="form-control form-control-inline input-medium grade" id="grade" name="grade" readonly="">
</td>
<td>
<input type="text" class="form-control form-control-inline input-medium remark" id="remark" name="remark" readonly="">
</td>
<td>
<input type="text" class="form-control form-control-inline input-medium position" id="position" name="position" readonly="" >
</td>
</div>
</div>
</tr>
</form>' ;
JQUERY CODE
$('#marks').on('input', '.cat', '.examScore', function() {
var examScore = (".examScore").val();
$mark = $(this)
var cat = $mark.val();
total
field
$row = $mark.closest('tr')
$studTotalScore = $row.find('.totScore')
studTotalScore = parseInt(cat) + parseInt(examScore);
$studTotalScore.val(studTotalScore).attr('readonly', true);
$studTotalScore.val(studTotalScore).attr('readonly', true);
$studentgrade = $row.find('.grade')
$remarks = $row.find('.remark')
if (studTotalScore >= 90 && studTotalScore <= 100) {
calculatedgrade = "A";
remark = "Excellent";
}
$studentgrade.val(calculatedgrade).attr('readonly', true);
$remarks.val(remark).attr('readonly', true);
});
Your selector syntax is wrong it should be '.cat , .examScore' if you need to use multiple classes in same event. Then , you can check if the cat or examscore values are not empty depending on this get value typed by user or take 0 then set your values in your required inputs.
Demo Code :
//use comma
$('#marks').on('input', '.cat , .examScore', function() {
var $mark = $(this)
$row = $mark.closest('tr')
//check if the value is not "" else use 0
var examScore = $row.find('.examScore').val() != "" ? $row.find('.examScore').val() : 0;
var cat = $row.find('.cat').val() != "" ? $row.find('.cat').val() : 0;
//declare variables
var $studTotalScore = $row.find('.totScore')
studTotalScore = parseInt(cat) + parseInt(examScore);
$studTotalScore.val(studTotalScore).attr('readonly', true);
var $studentgrade = $row.find('.grade')
var $remarks = $row.find('.remark')
var calculatedgrade, remark;
if (studTotalScore >= 90 &&
studTotalScore <= 100) {
calculatedgrade = "A";
remark = "Excellent";
}
$studentgrade.val(calculatedgrade).attr('readonly', true);
$remarks.val(remark).attr('readonly', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="adv-table padTable">
<table id="marks" class="table table-bordered" id="hidden-table-info">
<caption>
<h3 style="text-align: center;">RESULT SHEET</h3>
</caption>
<thead>
<tr>
<th>SN</th>
<th width="40%">Student Name</th>
<th>CAT</th>
<th>Exam Score</th>
<th>Total Score</th>
<th>Grade</th>
<th>Remark</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<form action="'. htmlspecialchars($_SERVER['PHP_SELF']).' " method="post" class="style-form" enctype="multipart/form-data">
<tr>
<td>1<input type="text" value="1" hidden="" name="studId"></td>
<td><input type="text" class="form-control form-control-inline input-medium " value="s s" readonly=""></td>
<td>
<div class="form-group">
<input type="number" class="form-control form-control-inline input-medium cat" id="cat" name="cat">
</td>
<td>
<input type="number" class="form-control form-control-inline input-medium examScore" name="examScore">
</td>
<td>
<input type="text" class="form-control form-control-inline input-medium totScore" id="totScore" name="totScore" readonly="">
</td>
<td>
<input type="text" class="form-control form-control-inline input-medium grade" name="grade" readonly="">
</td>
<td>
<input type="text" class="form-control form-control-inline input-medium remark" name="remark" readonly="">
</td>
<td>
<input type="text" class="form-control form-control-inline input-medium position" name="position" readonly="">
</td>
</tr>
<tr>
<td>1<input type="text" value="2" hidden="" name="studId"></td>
<td><input type="text" class="form-control form-control-inline input-medium " value="ss ss" readonly=""></td>
<td>
<div class="form-group">
<input type="number" class="form-control form-control-inline input-medium cat" name="cat">
</td>
<td>
<input type="number" class="form-control form-control-inline input-medium examScore" name="examScore">
</td>
<td>
<input type="text" class="form-control form-control-inline input-medium totScore" name="totScore" readonly="">
</td>
<td>
<input type="text" class="form-control form-control-inline input-medium grade" name="grade" readonly="">
</td>
<td>
<input type="text" class="form-control form-control-inline input-medium remark" name="remark" readonly="">
</td>
<td>
<input type="text" class="form-control form-control-inline input-medium position" name="position" readonly="">
</td>
</tr>
</form>
</tbody>
</table>

Fill inputs that are generated dynamically with jquery while selecting an option in the select box

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);
}
});
}

Change value of input in sibling hidden TD

When my delete button is clicked I would like to change the value of the "is_active" input that has the class of 'active' value from "yes" to "no".
So far I tried to using siblings to try and select the input with the class of 'active'. No luck.
Here is my code:
<script type="text/javascript">
$(document).on("click", ".delete", function(){
if ($(this).parents('.idcheck').length){
$(this).siblings("td").next().find('.active').val('no');
$(this).parents("tr").hide();
}
else
{$(this).parents("tr").remove();
}
$(".add-new").removeAttr("disabled");
});
</script>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
<th>Street</th>
<th>City</th>
<th>Ward</th>
<th>Precinct</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<form id="" class="form" name="parts" method="post" action="">
<tr class="idcheck">
<td style="display:none;"><input type="hidden" class="form-control" name="username" id="username" value="user"></td>
<td><input type="text" class="form-control" name="first_name" id="first_name" value="John"></td>
<td><input type="text" class="form-control" name="last_name" id="last_name" value="Doe"></td>
<td><input type="text" class="form-control" name="county" id="county" value="my county"></td>
<td><input type="text" class="form-control" name="street" id="street" value="456 easy street"></td>
<td><input type="text" class="form-control" name="city" id="city" value="town"></td>
<td><input type="text" class="form-control" name="ward" id="ward" value="5"></td>
<td><input type="text" class="form-control" name="precinct" id="precinct" value="2"></td>
<td style="display:none;"><input type="hidden" class="form-control" name="id" id="id" value="1"></td>
<td style="display:none;"><input type="hidden" class="form-control active" name="is_active" id="is_active" value="yes"></td>
<td><a class="delete" title="" data-toggle="tooltip" data-original-title="Delete"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
I figured it out, here is the updated code:
<script type="text/javascript">
$(document).on("click", ".delete", function(){
if ($(this).parents('.idcheck').length){
$(this).closest('tr').find('.active').val('no');
$(this).parents("tr").hide();
}
else
{$(this).parents("tr").remove();
}
$(".add-new").removeAttr("disabled");
});
</script>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
<th>Street</th>
<th>City</th>
<th>Ward</th>
<th>Precinct</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<form id="" class="form" name="parts" method="post" action="">
<tr class="idcheck">
<td style="display:none;"><input type="hidden" class="form-control" name="username" id="username" value="user"></td>
<td><input type="text" class="form-control" name="first_name" id="first_name" value="John"></td>
<td><input type="text" class="form-control" name="last_name" id="last_name" value="Doe"></td>
<td><input type="text" class="form-control" name="county" id="county" value="my county"></td>
<td><input type="text" class="form-control" name="street" id="street" value="456 easy street"></td>
<td><input type="text" class="form-control" name="city" id="city" value="town"></td>
<td><input type="text" class="form-control" name="ward" id="ward" value="5"></td>
<td><input type="text" class="form-control" name="precinct" id="precinct" value="2"></td>
<td style="display:none;"><input type="hidden" class="form-control" name="id" id="id" value="1"></td>
<td style="display:none;"><input type="hidden" class="form-control active" name="is_active" id="is_active" value="yes"></td>
<td><a class="delete" title="" data-toggle="tooltip" data-original-title="Delete"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
I changed the line from :
$(this).siblings("td").next().find('.active').val('no');
To this:
$(this).closest('tr').find('.active').val('no');

how to add dynamic data with jquery add function?

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

Dynamically add inputs in a form ( can't get values in PHP )

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.

Categories