We Keep Coding

Javascript inside PHP foreach

I made a loop using foreach, to show a list of products. Then I made a modal to edit each product. I need to get the value of product dimension and I'll make a dependent drop down between 'job drop down' and 'supply drop down'. At the moment, I can't continue it with Ajax because I got a problem at the first step to get value of dimension. In this code below I tried to get 'length' value of each product through javascript. But it returns the same value, it always is the value of the first product, even if I click on the 2nd, 3rd, 4th of product in the list.
<div class="table-responsive">
<table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Product</th>
<th>Supplier</th>
<th>Dimension</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php
$pcs_1 = 0;
$meter_1 = 0;
foreach ($stock as $s) { ?>
<tr>
<td class="small">
<?php echo $s->cat . ' - ' . $s->prod ?>
</td>
<td class="small">
<?php echo $s->spl ?>
</td>
<td class="small">
<?php echo $s->length . ' x ' . $s->width . ' x ' . $s->height . ' x ' . $s->diameter ?>
</td>
<td>
<a type="button" data-toggle="modal" class="btn btn-small" data-target="#modal_edit<?php echo $s->id ?>"><i class="fas fa-edit"></i></a>
<!--MODAL-->
<div class="modal fade" id="modal_edit<?php echo $s->id ?>" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" method="post" action="<?php echo site_url('admin/Stock/edit/') ?>">
<div class="modal-header">
<h5 class="modal-title" id="labelModal">EDIT STOCK</h5>
</div>
<div class="modal-body">
<input type="hidden" id="length_product" class="length_product" value="<?php echo $s->length ?>" />
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<?php echo form_label('JOB') ?>
</div>
</div>
<div class="col-sm-9">
<div class="form-group">
<select name="ref" id="ref" class="form-control" required onchange="GetData()">
<option value="">-- Select Job --</option>
<?php foreach ($job as $j) : ?>
<option value="<?php echo $j->id; ?>"><?php echo $j->id ?> - <?php echo $j->cust ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<?php echo form_label('Supply') ?>
</div>
</div>
<div class="col-sm-9">
<select name="supply" id="supply" class="form-control" required>
<option value="">--Select Supply--</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-warning submitBtn">edit</button>
</div>
</form>
</div>
</div>
</div> <!-- modal -->
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
Here is the javascript :
<script type="text/javascript">
function GetData() {
var length_product = $("#length_product").val();
alert(length_product);
}
</script>
The list works well, but I don't know how to get the detail of each list on javascript (passing multiple values from 'modal inside the list' to 'Javascript').

for me it looks like that you are always getting value of
<input type="hidden" id="length_product" class="length_product" value="<?php echo $s->length ?>" />
rather than option from the select element.
Try the following:
$('#ref').on('change', function(event) {
event.preventDefault();
var length_product = $(this).val();
alert(length_product);
});
and for the PHP and HTML:
<div class="form-group">
<select name="ref" id="ref" class="form-control" required>
<option value="">-- Select Job --</option>
<?php foreach ($job as $j) { ?>
<option value="<?php echo $j["id"]; ?>"><?php echo $j["id"]; ?>-<?php echo $j["cust"]; ?></option>
<?php
}
?>
</select>
</div>
Hope this helps!

Get data-price attribute from dynamically added row and put inside the input box

how to get data-price inside the text box using select in php html and sql?
i tried this so far. what im trying to do is, when i change the selection box, the input box beside should change base on the value of data-price.
been trying this for a week.
e.g
select debit
local treasury 100
<script>
$(document).ready(function(){
var i=1;
var chart_add = '<tr id="row_chart'+i+'"><td><select name="chart_of_account[]" class="selectpicker" data-live-search="true"><option style="width: 400px;">--Select Chart of Account--</option><?php $chart=mysqli_query($conn,"Select acoount_no,account_title from chart_of_account"); while($row=mysqli_fetch_assoc($chart)){$account_no = $row["acoount_no"]; $account_title = $row["account_title"];?><option value="<?php echo $account_no; ?>" style="width: 400px;"><?php echo $account_no ." | ". $account_title; ?></option><?php }?></select></td><td><input type="text" name="chart_debit[]" class="form-control chart_debit" id="chart_debit"onchange="chart_change_debit()"></td><td><input type="text" name="chart_credit[]" class="form-control chart_credit" id="chart_credit" onchange="chart_change_credit()"></td><td><button type="button" name="remove_chart" id="'+i+'" class="btn btn-danger remove_chart">X</button></td></tr>';
$('#add').click(function(){
i++;
$('#dynamic_field').append(chart_add);
$('.selectpicker').selectpicker('render');
$('.chart_debit').val($('select[name="chart_of_account"] option:selected').data('price'));
});
$(document).on('click', '.remove_chart', function(){
var button_id = $(this).attr("id");
$('#row_chart'+button_id+'').remove();
});
});
</script>
<form method = "POST" name="add_name" id="add_name">
<div class="row">
<div class="col-md-12">
<!-- chart of account -->
<div class="row">
<div class="col-md-12">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Chart of Account</h3>
</div>
<div class="box-body">
<table class="table table-bordered" id="dynamic_field">
<tr>
<th rowspan="2">Chart of Account</th>
<th>Debit</th>
<th>Credit</th>
<th rowspan="2"><button type="button" name="add" id="add" class="btn btn-success">Add More</button></th>
</tr>
<tr>
<th>
<input type="text" name="chart_debit_sum" class="form-control chart_debit_sum" id="chart_debit_sum" readonly>
</th>
<th>
<input type="text" name="chart_credit_sum" class="form-control chart_credit_sum" id="chart_credit_sum" readonly>
</th>
</tr>
<tr>
<td>
<select name="chart_of_account[]" class="selectpicker" data-live-search="true">
<option style="width: 400px;">--Select Chart of Account--</option>
<?php
$chart = mysqli_query($conn,"Select acoount_no,account_title from chart_of_account");
while($row = mysqli_fetch_assoc($chart)){
$account_no = $row['acoount_no'];
$account_title = $row['account_title'];
$amount = $row['test_amount'];
?>
<option value = "<?php echo $account_no; ?>" style="width: 400px;" data-price = "<?php echo $amount; ?>">
<?php echo $account_no . " | " .$account_title; ?>
</option>
<?php } ?>
</select>
</td>
<td>
<input type="text" name="chart_debit[]" class="form-control chart_debit" id="chart_debit" onchange="chart_change_debit()">
</td>
<td>
<input type="text" name="chart_credit[]" class="form-control chart_credit" id="chart_credit" onchange="chart_change_credit()">
</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- chart of account -->
</div>
<!-- chart and sub-->
</div>
</form>
sample screenshot

Why oninput function not work under JavaScript?

My HTML code:
<div class="form-group col-sm-12">
<label for="input-text-help" >Select Vendor
</label>
<select name="vname" class="form-control">
<option value="">Select Vendor</option>
<?php
foreach($Fetchvendors as $Fetch){
?>
<option value="<?php echo $Fetch->id;?>"><?php echo $Fetch->name; ?>
</option>
<?php
}
?>
</select>
</div>
<div class="form-group col-sm-12">
<label for="input-text-help"> Date</label>
<input type="text" name="date" id="datepicker" class="form-control">
</div>
<table class="table">
<i class="fa fa-plus" style="margin-left:500px;">**Add More**</i>
<thead>
<th>Material Name</th>
<th>Quantity</th>
<th>Price</th>
</thead>
<tbody>
<tr >
<td>
<select name="mname[]" class="mname">
<option value=""> Select Material </option>
<?php
foreach($FetchMateril as $Fetch){
?>
<option value="<?php echo $Fetch->id;?>"><?php echo $Fetch->mname; ?></option>
<?php
}
?>
</select>
</td>
<td>
<input type="text" name="qty[]" class="quanitity" id="qty" placeholder="Material Unit">
<!--
<select name="qty[]" class="quanitity">
<option>Select Quanitity</option>
<?php for($i=1;$i<=50;$i++){?>
<option><?php echo $i;?></option>
<?php }?>
</select>
-->
</td>
<td>
<input type="text" name="price[]" class="price" id="**price**" *oninput="calculate()"*>
<input type="text" name="Totalprice[]" id="Totalprice" >
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<div class="form-group">
<div class="col-sm-10">
<input type="submit" name="submit" class="btn btn-primary" id="input-text-help" style=" margin-left:300px;" >
</div>
</div>
</form>
</div>
</div>
In my html code have a option to add more row for multiple insert, When i click on add more option it add one row by javascript. in my input tage price oninput call calculate function, where calculate function calculate two input field and return in third field.
It Work on row one but in second row totalprice not work mean calculate not return any value in third field.
My question can oninput="calculate()" function under JavaScript like
My code when I am click Add more option
<script>
$(document).ready(function(){
//alert();
var i = 0;
$(".fa-plus").click(function(){
$(".table").append('<tr><td><select name="mname[]"
class="mname"><option>Select Material</option><?php foreach($FetchMateril as
$Fetch){?><option value="<?php echo $Fetch->id;?>"><?php echo $Fetch-
>mname;?></option><?php }?></select></td><td><input type="text" name="qty[]"
></td><td><input type="text" name="price[]" class="price" value=""></td>
</tr>');
i++;
});
});
</script>
My calculate function
function calculate() {
var myBox1 = document.getElementById('qty').value;
var myBox2 = document.getElementById('price').value;
var result = document.getElementById('Totalprice');
var myResult = myBox1 * myBox2;
//alert(myResult);
document.getElementById('Totalprice').value = myResult;
}

Try This May this will help you
$('#price').on('keyup', function(){
var myBox1 = document.getElementById('qty').value;
var myBox2 = document.getElementById('price').value;
var result = document.getElementById('Totalprice');
var myResult = myBox1 * myBox2;
document.getElementById('Totalprice').value = myResult;
});

pass all rows selected option values which is determined by user input from php

How can I pass selected option values if it's randomly generate by user?
How can I get the values of each selected option for each rows if I determined the values?
something like this.
Javascript
<script>
function submitForm(action)
{
document.getElementById('columnarForm').action = action;
document.getElementById('columnarForm').submit();
}
</script>
PHP
<form class="form-horizontal" action="" method="post" id="columnarForm">
<!-- some html tag -->
<?php
if ($_SERVER['REQUEST_METHOD'] =='POST' && isset($_POST['addButton1'])) {
$table = $_POST['selectTable'];
if($table == 'company')
{
$num = $_POST['num'];
for($j = 1; $j <= $num; $j++) {
?>
<tr id="row1">
<td align="right"><?php echo $j; ?></td>
<td id="name_row1" width="2px">
<input type="text" id="new_name" name="text<?php echo $j; ?>" value=""></td>
<td id="country_row1">
<select class="selectField" onChange="" id="selectcom" name="selectcom<?php echo $j; ?>">
<option value="">-- Select Field --</option>
<option value="comp_id<?php echo $j; ?>">comp_id</option>
<option value="comp_name<?php echo $j; ?>">comp_name</option>
</select>
</td>
<td><input type="text" name="default" size="10"></td>
<td id="data_row"><div id="new_text<?php echo $j;?>"></div></td>
<td id="size_row"><div id="size_row<?php echo $j;?>"></div></td>
<td>
<input type="button" value="Delete" class="delete btn btn-small btn-info" onclick="delete_row('row1')">
</td>
</tr>
<?php
}
}
?>
<button type="submit" class="btn btn-primary noty" name="next" onclick="submitForm('import.php')">Create Template</button>
How can I give variable at the next page (import.php)?
sorry for my english imperfections

$('#noc').change(function(e) {
$('.child').remove();
id = $(this).val();
for(var i=1; i<id; i++){
var thisRow = $('.dd').last(".dd");
var newid = parseInt(thisRow.attr('divid'))+1;
newRow = thisRow.clone(true).insertAfter(thisRow).find('input').val('').end().
find('.name').each(function(){
$(this).attr('id', 'name-'+newid);
$(this).attr('name','name-'+(newid));
$(this).attr('placeholder','Name '+(newid));
}).end().find('.drop').each(function(){
$(this).attr('id', 'dd-'+newid);
$(this).attr('name','dd-'+(newid));
}).end();
thisRow.next('.dd').attr("divid",newid).addClass("child");
}
});
div{ display: inline-table;}
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><section style="width:40%" align="center">
<form>
<div class="col-md-12"><input type="text" class="form-control" id="noc" /></div>
<div class="dd" divid="1" align="center">
<div class="col-md-6">Field Name</div>
<div class="col-md-6">Column Name</div>
<div class="col-md-6"><input type="text" placeholder="Name 1" class="name form-control" id="name-1" name="name-1" /></div>
<div class="col-md-6">
<select name="dd-1" id="dd-1" class="drop form-control">
<option>value 1</option>
<option>value 2</option>
<option>value 3</option>
<option>value 4</option>
</select>
</div>
</div>
</form>
</section>
Check this code

Passing javascript variable to PHP using ajax but it gives error

I am trying to pass my JavaScript variable using Ajax into my PHP script but that doesn't work it given me error that it is undefined index. both codes are in different files but both of them are accessible on the main page.
Here's my script.php
<script>
function get_child_options(){
var parentID = jQuery('#parent').val();
jQuery.ajax({
url: '/**/**/**/child_categories.php',
type: 'POST',
data: {parentID : parentID},
success: function(data){
jQuery('#child').html(data);
},
error: function(){alert("Something Went Wrong with child options. ")},
});
}
jQuery('select[name="parent"]').change(get_child_options);
</script>
And this is my php file
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/ **/core/init.php'; //Including database path stored in init.php
$parentID = (int)$_POST['parentID'];
$childQuery = "SELECT * FROM categories WHERE parent = '$parentID' ORDER BY category";
ob_start();
?>
<option value="">Select <strong>Child</strong> Category</option>
<?php while ($child = mysqli_fetch_assoc($childQuery)): ?>
<option value="<?= $child['id']; ?>"><?= $child['category']; ?></option>
<?php endwhile; ?>
<?php
echo ob_get_clean();
?>
in script the #parent is a form id i am passing to javascript using jQuery.
because of variable is not accessible PHP is not running query.
This is my products.php the main where page where this is happening
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/Online Store/core/init.php'; //Including database path stored in init.php
include 'includes/head.php'; //Including header
include 'includes/navigation.php'; //Including Navigation bar
include 'includes/script.php';
if (isset($_GET['add'])) {
$brandQuery = $db->query("SELECT * FROM brand ORDER BY brand");
$parentQuery = $db->query("SELECT * FROM categories WHERE parent = 0 ORDER BY category");
?>
<h2 class="text-center">Add A New Product</h2><hr />
<form action="products.php?add=1" method="post" enctype="multipart/form-data">
<div class="form-group col-md-3">
<label for="title">Title*:</label>
<input type="text" class="form-control" id="title" name="title" value="<?= ((isset($_POST['title']))?sanitize($_POST['title']):''); ?>" placeholder="Add a title" />
</div>
<div class="form-group col-md-3">
<label for="brand">Brand*: </label>
<select class="form-control ">
<option value="" <?= ((isset($_POST['brand']) && $_POST['brand'] == '')?' selected':''); ?> >Select Brand</option>
<?php while($brand = mysqli_fetch_assoc($brandQuery)): ?>
<option value="<?= $brand['id']; ?>" <?= ((isset($_POST['brand']) && $_POST['brand'] == $brand['id'])?' selected':''); ?> ><?= $brand['brand'] ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="form-group col-md-3">
<label for="parent">Parent Category*: </label>
<select class="form-control" id="parent" name="parent">
<option value="" <?= ((isset($_POST['parent']) && $_POST['parent'] == '')?' select':''); ?> >Select <strong>Parent</strong> Category</option>
<?php while($parent = mysqli_fetch_assoc($parentQuery)): ?>
<option value="<?= $parent['id']; ?>" <?= ((isset($_POST['parent']) && $_POST['parent'] == $parent['id'])?' select':''); ?> ><?= $parent['category']; ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="form-group col-md-3">
<label for="child">Child Category*: </label>
<select id="child" name="child" class="form-control"></select>
<?php include $_SERVER['DOCUMENT_ROOT'].'/Online Store/admin/parsers/child_categories.php'; ?>
</div>
<div class="form-group col-md-3">
<label for="price">Price*: </label>
<input type="text" id="price" name="price" class="form-control" value="<?= ((isset($_POST['price']))?sanitize($_POST['price']):''); ?>" />
</div>
<div class="form-group col-md-3">
<label for="list_price">List Price*: </label>
<input type="text" id="list_price" name="list_price" class="form-control" value="<?= ((isset($_POST['list_price']))?sanitize($_POST['list_price']):''); ?>" />
</div>
<div class="form-group col-md-3">
<label>Quantity & Sizes</label>
<button class="btn btn-default btn-info form-control" onclick="jQuery('#sizesModal').modal('toggle'); return false;">Quantity & Sizes</button>
</div>
<div class="form-group col-md-3">
<label for="sizes">Sizes & Quantity preview*: </label>
<input type="text" name="sizes" id="sizes" class="form-control" value="<?= ((isset($_POST['sizes']))?$_POST['sizes']:''); ?>" readonly/>
</div>
<div class="form-group col-md-6">
<label for="photo">Photo*: </label>
<input type="file" name="photo" id="photo" class="form-control" />
</div>
<div class="form-group col-md-6">
<label for="description">Description</label>
<textarea name="description" id="description" class="form-control" rows="6" placeholder="Description" ><?= ((isset($_POST['description']))?sanitize($_POST['description']):''); ?></textarea>
</div>
<div class="form-group pull-right">
<input type="submit" class="form-control btn btn-success" value="Add Product" />
</div>
<div class="clearfix"></div>
</form>
<?php
}else{
$sql = "SELECT * FROM products WHERE deleted = 0";
$presults = $db->query($sql);
$product = mysqli_fetch_assoc($presults);
// Featured product
if (isset($_GET['featured'])) {
$id = (int)$_GET['id'];
$featured = (int)$_GET['featured'];
$featuredSql = "UPDATE `products` SET `featured` = '$featured' WHERE `products`.`id` = '$product[id]' ";
$db->query($featuredSql);
// header('Location: products.php');
}
?>
<h2 class="text-center">Products</h2>
Add Product<div class="clearfix"></div>
<hr />
<table class="table table-bordered table-condensed table-striped">
<thead>
<th></th>
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Featured</th>
<th>Sold</th>
</thead>
<tbody>
<?php
while($product = mysqli_fetch_assoc($presults)):
$childID = $product['categories'];
$catSql = "SELECT * FROM categories WHERE id = '$childID'";
$result = $db->query($catSql);
$child = mysqli_fetch_assoc($result);
$parentID = $child['parent'];
$pSql = "SELECT * FROM categories WHERE id = '$parentID'";
$presult = $db->query($pSql);
$parent = mysqli_fetch_assoc($presult);
$category = $parent['category'].'~'.$child['category'];
?>
<tr>
<td>
<span class= " glyphicon glyphicon-pencil"></span>
<span class= " glyphicon glyphicon-remove-sign"></span>
</td>
<td><?= $product['title']; ?></td>
<td><?= money($product['price']) ?></td>
<td><?= $category; ?></td>
<td><a href="products.php?featured=<?= (($product['featured'] == 0)?'1':'0'); ?>&id =<?= $product['id']; ?>" class=" btn btn-sx btn-default">
<span class=" glyphicon glyphicon-<?= (($product['featured'] == 1)?'minus':'plus'); ?>"></span>
</a>&nbsp <?= (($product['featured'] == 1)?'Featured':''); ?></td>
<td>0</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<?php
}
include 'includes/footer.php'; //Including footer
?>
Is there any other way to do it? What I am trying to do is when user selects parent category I want child category to arrange as per parent category.

Try this:
<script>
function get_child_options(){
var parentID = $(this).val();
jQuery.ajax({
url: '/**/**/**/child_categories.php',
type: 'POST',
data: {'parentID' : parentID},
success: function(data){
jQuery('#child').html(data);
},
error: function(){alert("Something Went Wrong with child options. ")},
});
}
jQuery('select[name="parent"]').change(get_child_options);
</script>
Getting the Value by $(this) and putting single quotes around parentID data: {'parentID' : parentID},