We Keep Coding

How to get dynamic values by selection (mysql database) in multiple table rows

I have created an invoice table in which rows are created by pressing 'Add' button. In addition, items price are being displayed into first row of the input value by selection. Everything is fine but when I come to the second row by pressing Add row, price value isn't working by pressing selection.
Here is the table code:
<div class="box pattern pattern-sandstone">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Item</th>
<th>Description</th>
<th>Price</th>
<th>Qty</th>
<th>Total</th>
</tr>
</thead>
<tbody id="customFields">
<tr>
<td> 1 </td>
<td>
<?php include "db_conn.php";
$query_order_to = "SELECT * from gs_items ORDER BY item_name ASC";
$result_order_to = $conn->query($query_order_to); ?>
<select name="selected_item" id="selected_item" onchange="myItemPrice()" data-placeholder="Item Name" >
<option value="">Select Item</option>
<?php
while($rows=mysqli_fetch_assoc($result_order_to))
{ ?>
<option data-price='<?php echo $rows['price']; ?>' value='<?php echo $rows['Id']; ?>'> <?php echo $rows['item_name']; ?></option>
";
<?php } ?>
</select>
</td>
<td><textarea style="min-width: 90%;"></textarea></td>
<td> <input type="text" name="getprice" style="font-size: 12px; color: #333333;" id="getprice" disabled></td>
<td><input type="number" ></td>
<td><input type="number" ></td>
<td><button onclick="addRow();">Add</button></td>
</tr>
</tbody>
</table>
</div>
Here is Javascript + PHP:
<script>
function findAddress(){
var address = $('#select_data').find(':selected').data('address');
$('#getcustomeraddress').val(address);
}
</script>
<script>
function myItemPrice(){
var price = $('#selected_item').find(':selected').data('price');
$('#getprice').val(price);
}
</script>
<?php
$conn = mysqli_connect('localhost','root','','gs');
function fill_unit_select_box($conn)
{ $query_item = "SELECT * from gs_items ORDER BY item_name ASC";
$result_item = $conn->query($query_item);
$x = 1;
foreach($result_item as $rows)
{ echo '<option data-prices'.$x++.'="'.$rows['price'].'" value="'.$rows['Id'].'">'.$rows['item_name'].'</option>';
}
} ?>
<script>
function addRow()
{ var table = document.getElementById("customFields");
var i = 1;
while (i <= table.rows.length) {
i++;
}
var html = '';
html += '<tr>';
html += '<td >'+i+'</td>';
html += '<td><select name="selected_items'+i+'" id="selected_items'+i+'" onchange="myItemPrices()" data-placeholder="Item Name" ><option value="">Select Item</option>';
html += ' <?php echo fill_unit_select_box($conn); ?>
</select></td>';
html += '<td > <textarea style="min-width: 90%;"></textarea></td>';
html +='<td > <input type="number" name="getprices'+i+'" style="font-size: 12px; color: #333333;" id="getprices'+i+'" ></td>';
html +='<td ><input type="number" ></td>';
html +='<td ><input type="number" ></td>';
html +='<td><button onclick="remove();">Remove</button></td>';
html +='</tr>';
$('#customFields').append(html);
}
function myItemPrices(){
var prices = $('#selected_items'+i+'').find(':selected').data('prices'+i+'');
$('#getprices'+i+'').val(prices); }
</script>

I have fixed a number of bugs in your original codes
The $x++ is not necessary for the function fill_unit_select_box($conn)
You should pass the i to the javascript myItemPrices function, for example as var1 (so will be myItemPrices(var1)):
Please find below a fully working one:
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<div class="box pattern pattern-sandstone">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Item</th><th>Description</th><th>Price</th><th>Qty</th><th>Total</th>
</tr></thead>
<tbody id="customFields">
<tr>
<td>1</td><td >
<?php
$conn = mysqli_connect('localhost','dbuser','dbpass','dbname');
$query_order_to = "SELECT * from gs_items ORDER BY item_name ASC";
$result_order_to = $conn->query($query_order_to); ?>
<select name="selected_item" id="selected_item" onchange="myItemPrice()" data-placeholder="Item Name" >
<option value="">Select Item</option>
<?php
while($rows=mysqli_fetch_assoc($result_order_to))
{ ?> <option data-price='<?php echo $rows['price']; ?>' value='<?php echo $rows['Id']; ?>'> <?php echo $rows['item_name']; ?></option>";
<?php } ?> </select> </td>
<td ><textarea style="min-width: 90%;"></textarea></td>
<td ><input type="text" name="getprice" style="font-size: 12px; color: #333333;" id="getprice" disabled></td>
<td ><input type="number" ></td>
<td ><input type="number" ></td>
<td><button onclick="addRow();">Add</button></td>
</tr>
</tbody>
</table>
</div>
<script>
function findAddress(){
var address = $('#select_data').find(':selected').data('address');
$('#getcustomeraddress').val(address);
}
</script>
<script>
function myItemPrice(){
var price = $('#selected_item').find(':selected').data('price');
$('#getprice').val(price);
}
</script>
<?php
$conn = mysqli_connect('localhost','dbuser','dbpass','dbname');
function fill_unit_select_box($conn)
{
$query_item = "SELECT * from gs_items ORDER BY item_name ASC";
$result_item = $conn->query($query_item);
$x = 1;
foreach($result_item as $rows)
{ echo '<option data-prices="'.$rows['price'].'" value="'.$rows['Id'].'">'.$rows['item_name'].'</option>';
}
} ?>
<script>
function addRow()
{ var table = document.getElementById("customFields");
var i = 0;
while (i <= table.rows.length) {
i++;
}
i=i-1;
var html = '';
html += '<tr>';
html += '<td >'+i+'</td>';
html += '<td><select name="selected_items'+i+'" id="selected_items'+i+'" onchange="myItemPrices(' + i +')" data-placeholder="Item Name" ><option value="">Select Item</option>';
html += ' <?php echo fill_unit_select_box($conn); ?>
</select></td>';
html += '<td > <textarea style="min-width: 90%;"></textarea></td>';
html +='<td ><input type="text" disabled name="getprices'+i+'" style="font-size: 12px; color: #333333;" id="getprices'+i+'" ></td>';
html +='<td ><input type="number" ></td>';
html +='<td ><input type="number" ></td>';
html +='<td><button onclick="remove();">Remove</button></td>';
html +='</tr>';
$('#customFields').append(html);
}
function myItemPrices(var1){
i=var1;
var prices = $('#selected_items'+i+'').find(':selected').data('prices');
$('#getprices'+i+'').val(prices); }
</script>

Multiple Inline Insert into table

I am trying to insert in other table using for invoicing
I've tried to create insert function but it is not inserting into table and every time I click the page or even the input tag its always says localhost but empty.
Here is the form:
<form class="form-vertical" name="save" id="save" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<div class="form-group row">
<label for="inv_date" >Date</label>
<div class="col-sm-8">
<input type="date" class="form-control" autocomplete="off" id="inv_date" name="inv_date" required>
</div>
</div>
<div class="form-group row">
<label for="inv_num" >Inv Number</label>
<div class="col-sm-8">
<input type="number" class="form-control" autocomplete="off" id="inv_num" name="inv_num" required>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered" id="crud_table">
<tr>
<th width="30%">Item Name</th>
<th width="10%">Item Code</th>
<th width="45%">Description</th>
<th width="10%">Price</th>
<th width="5%"></th>
</tr>
<tr>
<td contenteditable="true" class="item_name"></td>
<td contenteditable="true" class="item_code"></td>
<td contenteditable="true" class="item_desc"></td>
<td contenteditable="true" class="item_price"></td>
<td></td>
</tr>
</table>
<div align="right">
<button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button>
</div>
<div align="center">
<button type="submit" name="save" id="save" class="btn btn-info">Save</button>
</div>
</div>
</form>
</div>
<script>
$(document).ready(function(){
var count = 1;
$('#add').click(function(){
count = count + 1;
var html_code = "<tr id='row"+count+"'>";
html_code += "<td contenteditable='true' class='item_name'></td>";
html_code += "<td contenteditable='true' class='item_code'></td>";
html_code += "<td contenteditable='true' class='item_desc'></td>";
html_code += "<td contenteditable='true' class='item_price' ></td>";
html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>";
html_code += "</tr>";
$('#crud_table').append(html_code);
});
$(document).on('click', '.remove', function(){
var delete_row = $(this).data("row");
$('#' + delete_row).remove();
});
$('#save').click(function(){
var item_name = [];
var item_code = [];
var item_desc = [];
var item_price = [];
$('.item_name').each(function(){
item_name.push($(this).text());
});
$('.item_code').each(function(){
item_code.push($(this).text());
});
$('.item_desc').each(function(){
item_desc.push($(this).text());
});
$('.item_price').each(function(){
item_price.push($(this).text());
});
$.ajax({
url:"insert.php",
method:"POST",
data:{item_name:item_name,item_code:item_code, item_desc:item_desc, item_price:item_price},
success:function(data){
alert(data);
$("td[contentEditable='true']").text("");
for(var i=2; i<= count; i++)
{
$('tr#'+i+'').remove();
}
}
});
});
});
</script>
and here is the insert page:
<?php
session_start();
//insert.php
require_once ('connect.php');
if((!empty($_POST['inv_date'])) && (!empty($_POST['inv_num']))){
$inv_date = $_POST["inv_date"];
$inv_num = $_POST["inv_num"];
$query = '';
$query = 'INSERT INTO invtran (inv_date, inv_num) VALUES ("'.$inv_date.'", "'.$inv_num.'")';
$result = mysqli_query($conn, $query) or die(mysqli_error($conn));
if(isset($_POST["item_name"]))
{
$item_name = $_POST["item_name"];
$item_code = $_POST["item_code"];
$item_desc = $_POST["item_desc"];
$item_price = $_POST["item_price"];
$query = '';
for($count = 0; $count<count($item_name); $count++)
{
$item_name_clean = mysqli_real_escape_string($conn, $item_name[$count]);
$item_code_clean = mysqli_real_escape_string($conn, $item_code[$count]);
$item_desc_clean = mysqli_real_escape_string($conn, $item_desc[$count]);
$item_price_clean = mysqli_real_escape_string($conn, $item_price[$count]);
if($item_name_clean != '' && $item_code_clean != '' && $item_desc_clean != '' && $item_price_clean != '')
{
$query .= '
INSERT INTO item(item_name, item_code, item_description, item_price)
VALUES("'.$item_name_clean.'", "'.$item_code_clean.'", "'.$item_desc_clean.'", "'.$item_price_clean.'");
';
}
}
if($query != '')
{
if(mysqli_multi_query($conn, $query))
{
echo 'Item Data Inserted';
}
else
{
echo 'Error';
}
}else
{
echo 'All Fields are Required';
}
}
}
?>
It must be inserted in different table to call them out in different page.

instead of if(isset($_POST['item_name']))
I tried different approach like this:
if ($result) {
$j = 0;
$count = sizeof($_POST['po_qty']); // ive use the sizeof() to get the count of the rows
// Use insert_id property
$po_trans_id = $link->insert_id;
$user = $_SESSION["username"];
for ($j = 0; $j < $count; $j++) {
$query = "INSERT INTO request_po (item_name, item_code, item_description, item_price) VALUES (
'".$item_name[$j]."',
'".$item_code[$j]."',
'".$item_description[$j]."',
'".$item_price[$j]."');

Can I able to write with out isset($post[]) for the below code

<script>
function removeAllRowsContainingCheckedCheckbox() {
alert("hello");
for (var rowi= table.rows.length; rowi-->0;) {
var row= table.rows[rowi];
var inputs= row.getElementsByTagName('input');
for (var inputi= inputs.length; inputi-->0;) {
//alert("inside for");
var input= inputs[inputi];
if (input.type==='checkbox' && input.checked) {
//alert("indide if ")
row.parentNode.removeChild(row);
break;
}
}
}
}
</script>
<html>
<head>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<table border="1" id="table">
<tr>
<td colspan="2">Select Technolgy:</td>
</tr>
<tr>
<td>c</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td>hadoop</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td>core java</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td>Javascript</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td>springs</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="submit" name="sub"></td>
</tr>
<input type='button' value='del' onclick='removeAllRowsContainingCheckedCheckbox();'>Click me to delete
</table>
</form>
<?php
if(isset($_POST['sub']))
{
$db = pg_connect("host=localhost port=5432 dbname=postgres user=postgres password=ndem$123");
if(!$db){
echo "Error : Unable to open database\n";
} else {
echo "Opened database successfully\n";
}
$checkbox1=$_POST['techno'];
$chk="";
foreach($checkbox1 as $chk1)
{
$chk .= $chk1."";
echo '<script>alert("Inserted Successfully")</script>';
}
$in_ch=pg_query("insert into news_table(technology) values ('$chk')");
echo "the check box value is " . $in_ch;
if($in_ch==1)
{
echo '<script>alert("Inserted Successfully")</script>';
echo "Records created successfully\n";
}
else
{
echo pg_last_error($db);
}
pg_close($db);
}
?>
</body>
</html>
For the submit can i able to write javascript function with out using
$checkbox1=$_POST['techno'];
$chk="";
foreach($checkbox1 as $chk1)
{
$chk .= $chk1."";
echo '<script>alert("Inserted Successfully")</script>';
}
above code because if(isset($_POST['sub'])) is reloading the already submitted checkboxs in the table so user may confuse after delete the page will again show all the check box those who are submitted also .. Please suggest alternatives for this any ways i want to insert the checked checkboxes into database but my thought is to delete the checked submitted also in the table.

php html javascript wrong result

This is my code
<html>
<head>
<title>
Aplikasi KRS
</title>
</head>
<body>
<p>IPK : 1.xx</p>
<form name="formTes" method="post">
<script>
function cekKrs()
{
var jum_sks = 0;
for(var i=0; i<7; i++)
{
if(document.formTes.elements[i].checked)
jum_sks += mataKuliah;
}
document.formTes.fieldJumlah.value = jum_sks;
if(jum_sks > 15)
{
alert("Anda harus mengurangi SKS\n karena melebihi 15 SKS");
}
}
function cekKirim()
{
if(document.formTes.fieldJumlah.value > 15)
alert("Anda harus mengurangi SKS\n karena melebihi 15 SKS");
else
window.location.href = "tesform.html";
}
</script>
<table border="2">
<tr><th>Kode</th><th>Mata Kuliah</th><th>SKS</th><th><Pilihan/th></tr>
<?php
include "koneksi.php";
$sql = "SELECT * FROM mata_kul";
$query = $con->query($sql);
while($mataKuliah = $query->fetch_array())
{
echo "<tr><td>". $mataKuliah['kodeMK'] ."</td>";
echo "<td>". $mataKuliah['namaMK'] ."</td>";
echo "<td>". $mataKuliah['sks'] ."</td>";
echo "<script>var mataKuliah= ".$mataKuliah['sks']."</script>";
echo "<td><input name='mk". $mataKuliah['kodeMK'] ."' type='checkbox' onclick='cekKrs()'></td>";
}
?>
<tr><td colspan="2" align="right">Jumlah SKS</td>
<td colspan="2"><input size="3" value="0" name="fieldJumlah" type="text" readonly="readonly"></td></tr></table>
<br>
<input type="button" name="tombolKirim" value="Kirim" onclick="cekKirim()">
</form>
</body>
</html>
My question is
"Why when i click checklist it show the last value of sks in jumlah SKS, not the sks checked value i click ? like when i click checklist which have value of 2 in sks it should show 2 not 8 in jumlah SKS"
Here's the image
Can you tell me where did i go wrong ? I'm still new

I guess you need send the checkbox obj as param to cekKrs() , and in function cekKrs evaluates if obj is checked to + or - the obj.value from total
Try this DEMO
HTML ( draft )
<table>
<!-- while($mataKuliah = $query->fetch_array())
{ -->
<tr>
<!-- echo "<td><input name='mk". $mataKuliah['kodeMK'] ."' type='checkbox' onclick='cekKrs(this)' value='".$mataKuliah['sks']."'></td>"; // PHP -->
<td><input type='checkbox' onclick='cekKrs(this)' value='1'>1</td>
</tr>
<tr>
<td><input type='checkbox' onclick='cekKrs(this)' value='2'>2</td>
</tr>
<tr>
<td><input type='checkbox' onclick='cekKrs(this)' value='3'>3</td>
</tr>
<!-- } -->
</table>
<input size="3" value="0" name="fieldJumlah" id='fieldJumlah' type="text" readonly="readonly">
onclick='cekKrs(this)' sends checkbox obj , and you keep the mataKuliah's value inside the checkbox value
JS
function cekKrs(chkObj)
{
//Get current total
var jum_sks = parseInt(document.getElementById('fieldJumlah').value);
//Get checkbox value clicked
var mataKuliah = parseInt(chkObj.value);
//Evaluate check to + or -
if(!chkObj.checked)
{
mataKuliah = (mataKuliah * -1)
}
jum_sks += mataKuliah;
//Set new total
document.getElementById('fieldJumlah').value = jum_sks;
}

I'm trying to pull data from database into selectboxes

I'm trying to pull data from database into selectboxes, but when the data is pulled it goes into one 'td' and not into separate td's. I'm trying to achieve result as shown below
but I keep getting this result
here is my code
<?php
$data_array = array();
$result2 = mysql_query("SELECT * FROM `firefightersonscene`
JOIN `firefighterinfo` ON `firefightersonscene`.`FireFighterInfo_fighterID` = `firefighterinfo`.`fighterID`
JOIN `stationlocation` ON `firefighterinfo`.`StationLocation_locationID`=`stationlocation`.`locationID`
WHERE `IncidenceOfFire_incidentID`='$getIncID' ORDER BY `firstName`");
if(mysql_num_rows($result2) > 0)
{
while($rows2 = mysql_fetch_object($result2))
{
$data_array[] = $rows2;
}
}
?>
<form action="core_viewfireoccurrence.php?incidentID=<?php echo $rows->incidentID; ?>" method="post" class="view_occurrence_form">
<table id="myTable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td class="count">1</td>
<td>
<?php
foreach($data_array as $rows2):
$fighterID = $rows2->FireFighterInfo_fighterID;
$results = mysql_query("SELECT `fighterID`, `firstName`, `middleName`, `lastName`, `stationlocation`.`exactlocation`
FROM `firefighterinfo`
JOIN `stationlocation` ON `firefighterinfo`.`StationLocation_locationID`=`stationlocation`.`locationID` ORDER BY `firstName`");
echo '<select name="fireman[]" required><option value=""></option>';
while($row = mysql_fetch_array($results))
{
if($row['fighterID'] == $fighterID)
echo '<option selected>'. $row['firstName']." ".$row['middleName']." ".$row['lastName'].", ".$row['exactlocation'].'</option>';
else
echo '<option>'. $row['firstName']." ".$row['middleName']." ".$row['lastName'].", ".$row['exactlocation'].'</option>';
}// end while
echo '</select><br>';
endforeach;
?>
</td>
<td>
<input type="button" value="X" class="removeVar"/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input type="button" id="addVar" value="Add Item"/>
</tr>
</tfoot>
</table>
</form>
JS CODE
<script type="text/javascript">
$('form').on('click', '.removeVar', function(){
$(this).closest('tr').remove();
$('.count').each(function(i){
$(this).text(i + 1);
});
});
//add a new node
$('#addVar').on('click', function(){
var varCount = $('#myTable tr').length - 1;
$node = ['<tr>',
'<td class="count">'+varCount+'</td>',
'<td><select name="fireman[]" class="ctlGroup" required>',
'<option value=""></option>',
'<?php require("php/fireman_list.php"); ?>',
'</select></td>',
'<td><input type="button" value="X" class="removeVar"/>',
'</td></tr>'].join('\n');
$('#myTable > tbody:last').append($node);
});
</script>

You need to put your whole table row in the loop. You will also need to add a variable to count the row number for you.
<?php
$row =1;
foreach($data_array as $rows2):
?>
<tr>
<td class="count"><?php echo $row; ?></td>
<td>
<?php
$fighterID = $rows2->FireFighterInfo_fighterID;
$results = mysql_query("SELECT `fighterID`, `firstName`, `middleName`, `lastName`, `stationlocation`.`exactlocation`
FROM `firefighterinfo`
JOIN `stationlocation` ON `firefighterinfo`.`StationLocation_locationID`=`stationlocation`.`locationID` ORDER BY `firstName`");
echo '<select name="fireman[]" required><option value=""></option>';
while($row = mysql_fetch_array($results))
{
if($row['fighterID'] == $fighterID)
echo '<option selected>'. $row['firstName']." ".$row['middleName']." ".$row['lastName'].", ".$row['exactlocation'].'</option>';
else
echo '<option>'. $row['firstName']." ".$row['middleName']." ".$row['lastName'].", ".$row['exactlocation'].'</option>';
}// end while
echo '</select><br>';
?>
</td>
<td>
<input type="button" value="X" class="removeVar"/>
</td>
</tr>
<?php
$row++;
endforeach;
?>