Calculate the data in the every row simultaneously - javascript

I have a php code here which get the data in database and display it in php, it will create a textbox in every row and column, what I want is in every textbox that I will change in every row the last row in table should be sum up. Is there a way to do it?and how? Thank you.
<?php
include('../connect.php');
//$listsubid=$_GET['listsubid'];
$result = mysql_query("SELECT * FROM studsubject WHERE listsubid='$listsubid'");
while($row = mysql_fetch_array($result))
{
echo '<tr class="record">';
//echo '<td style="border-left: 1px solid #C1DAD7">'.$row['fname'].' '.$row['mname'].' '.$row['lname'].'</td>';
$sidnumber = $row['sidnumber'];
echo '<td><div align="left">'.$sidnumber.'&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</div></td>';
$result1 = mysql_query("SELECT * FROM student WHERE idnumber = '$sidnumber'");
while($row1 =mysql_fetch_array($result1))
{
echo '<td><div align = "left">'.$row1['lname'].' '.$row1['fname'].' '.$row1['mname'].'</div></td>';
echo '<input type = "text" name ="grade_id[]" value = '.$row['grade_id'].'>';
$grade_id = $row['grade_id'];
$result2 = mysql_query("SELECT * FROM prelim WHERE prelim_id = '$grade_id'");
while($row2 = mysql_fetch_array($result2))
{
echo '<td><input type="text" size= "2" maxlength = "3" name="att1[]" value = '.$row2['att1'].'></td>';
echo '<td><input type="text" size= "2" maxlength = "3" name="att2[]" value = '.$row2['att2'].'></td>';
echo '<td><input type="text" size= "2" maxlength = "3" name="att3[]" value = '.$row2['att3'].'></td>';
echo '<td><input type="text" size= "2" maxlength = "3" name="att4[]" value = '.$row2['att4'].'></td>'; } ?>

Yes you can do this, but for it to happen as the user changes it you will need to use javascript.
If you want your database to update as the user makes changes, you will need to watch each input field using something like jquery. If that field changes you can then make a post request to the server. This will require you to have a place to make a post, get, or put request.
The summing will also need to be done with javascript. You will need to watch each input field. If the user makes a change to one of the fields you will need to take that value, sum it with the rest of the row and then update the total.
You can do this with php as well but it will not happen as the user inputs new values. They will need to have a submit button, and after submission the user will be presented the update view.

The best way is to use JavaScript. Is it possible to do it in PHP? Sure, but you will want to add an "Update" button that, when pressed, will not only sum the values but re-render the whole page with both the sum and the original values. I would strongly recommend not doing this, however.
If you use JavaScript, it's as simple as something like this:
var sum = document.getElementsByName("att").reduce(function(a, b) { return a + b; });
document.getElementByID('totalTextBox').value = sum;
Just use name="att" for you text boxes instead of what you have.

Related

Creating array of text boxes dynamically using javascript and accessing text box names from php to pass data to mysql

I have a simple form with a text box. The user is able to add more text boxes by clicking a button.
I am dynamically creating the text boxes using javascript, however I have 2 issues:
1- I am not sure how to access the text boxes from the PHP file.
2- Whenever I click +addmore button on my html page it creates new text boxes but it clears the value of the previous ones.
Below is the html part:
<input type="text" id="program" name="program[]"> //Initital text box
<div><a onclick="CreateTxt()">+Add More</a></div> //Add more button
<input type="hidden" id="hid" name="hid" value="0">
<input type="submit" value="Next" name="submit1">
Below is javascript part:
var i = 1; // Global counter
var hidden_field;
function CreateTxt(){
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("Name", "program" + i); //I am sure this is not working for the array names
y.setAttribute("class", "form-control");
document.getElementById('userdata1').innerHTML +=
'<label for="program"><br />Program</label>';
document.getElementById('userdata1').appendChild(y);
hidden_field = document.getElementById("hid").value = i; //passing the number of created textboxes
i++;
}
Below is PHP part:
<?php
session_start();
include('connection.php');
$id = $_SESSION['id'];
$i = $_POST['hid'];
if(isset($_POST['submit1'])){
if($i > 0){ //It means more than one text box exist
$program = [];
for ($j = 0; $j <= $i; $j++){
$program[$j] = $_POST['program'][$j];
$sql = $db->prepare ("UPDATE user SET program = ?, WHERE id = ? ");
$sql->bind_param("ss", $program[$j], $id);
$sql->execute();
}
}
}
?>

Calculate (SUM) price given from database

I would like to calculate the price every choices the user made.
In my database all of these products already have different amount on it.
my Pricelist table looks like this: Pricelist table
(is this table advisable?)
I did this because I've wanted to display the amount.
Like this: radio button choices
At the same time, my admin can update the price.
I have a bunch of choices need to be calculated and I wanted it to be Calculated Automatically on the interface
What I've got so far and working fine.
Above my price I have php like this, works well
<?php
$link = mysql_connect('localhost', 'root', '');
mysql_select_db("myrnas", $link);
$query="SELECT * FROM pricelist";
$myData = #mysql_query($query, $link); ?>
function updateTotal() {
var optionprice = 0; //base price to start is 0
function cakeThemePrice() {
if (document.getElementById('theme1').checked) {
optionprice += 500; }
if (document.getElementById('theme2').checked) {
optionprice += 200;}
if (document.getElementById('theme3').checked) {
optionprice += 200; }
}
}
cakeThemePrice(); //function to add them up
var totalPrice = optionprice;
document.getElementById('totalPrice').innerHTML = "Amount : ₱ " + totalPrice;
<input type="radio" id="theme1" name="cake_theme" value="wedding" onchange="updateTotal()" /> Wedding
<?php
while($record=mysql_fetch_array($myData)){
echo "₱".$record['wedding_price'].""; ?>
<br> <input type="radio" id="theme2" name="cake_theme" value="birthday" onchange="updateTotal()" /> Birthday <?php echo "₱".$record['birthday_price'].""; ?>
<br> <input type="radio" id="theme3" name="cake_theme" value="dedication" onchange="updateTotal()" />Dedication <?php echo "₱".$record['dedi_price'].""; ?>
<? php } ?>
<span id="totalPrice"> Amount: </span>
Well you can see, the price to be displayed is still hardcoded , which is I don't want it.
I've seen codes like SUM and putting data-price to get the price in my table but I'm not sure how to use it.
Thanks in advance!
Well if you want to automatically compute it via Database (Which is far as I understand) you can do it like this in your query.
<?
php
$link = mysql_connect('localhost', 'root', '');
mysql_select_db("myrnas", $link);
$query="SELECTcolumn1,column2,SUM(column1+column2)as Sum FROMpricelist";
$myData = #mysql_query($query, $link);
?>
the Sum is now a column so it will display in the query like this
column1 column2 sum
1 2 3
4 5 9
footnote: you may want to use the mysqli as because the mysql that you are using is deprecated. and may cause trouble for you in the future.

2-step dynamical echo of a php in innerHTML

step 1: I have a form where input fields will be generated dynamically by innerHTML.
var d = document.getElementById("d1p_1");
d.innerHTML += "<input class='add' name='field_" + i + "' type='text'>";
step 2: now I would like to echo a php variable of each value to each dynamically generated input field. Something like:
d.innerHTML += "<input class='add' name='field_" + i + "' type='text' value='"<?php echo $field_" + i + "; ?>" + "'>
How can I archieve that?
Thanks in advance.
To give further information:
This is for a form where an user can add fields, depending from how many fields he needs and will be adding. Now it could be that an user adds more fields than he usually needs and enters data somewhere between field_1 and field_280. To catch the field_x where he entered data I need to echo the value of that input field.
$field_1 = value of field_1 if given;
...
$field_280 = value of field_280 if given;
The innerHTML will add the input fields dynamically by a counter for i. So I dont know what input will be given on which field. Thats why I need to generate the PHP echo part dynamical as well. Like:
<?php echo $field_" + i + "; ?>
The whole process:
form -> contains first just one input field (user will make some inputs) -> by clicking a button there will be added further input fields (1 click 1 field and user does not need to fill in data before he can add another fields) -> now imagine that a user will add 3 fields and has given input on first and third input field -> name="field_1" and name="field_3" ->
the name of each input field is generated by i++ -> the value is empty otherwise the form will be posted -> now the user will submit the form.
this means the value to echo would be $field_3 = (isset($_POST['field_3'])) ? $_POST['field_3']; : ''; -> this variable exist for all i so each variable is set in the php part before BUT to catch the right input name="field_i" with $field_i and to echo this match is the problem.
So by clicking submit the page would be reloaded and instead of only just one input field like from before now would be there 2 input fields. first would be name="field_1" and the second would be name="field_3" because user has left out input name="field_2" before. So name="field_3" needs to echo the right value depending from a dynamically generated name="field_"+ i +"what means that when the name tag is generated dynamically the php tag needs also to be generated dynamically to match each other.
i is a JavaScript variable so including it in a php declaration is giving you problems
You may implement your string concatenation out of the php code as follows
<?php
$field_="stavo";
?>
<script type="text/javascript">
var i=10;
var d = document.getElementById("d1p_1");
d.innerHTML+= "<input class='add' name='field_" + i + "' type='text'>";
d.innerHTML += "<input class='add' name='field_" + i + "' type='text' value='<?php echo $field_; ?>"+i+"'>";
</script>
Of course you must be having this in your Html
<div id="d1p_1"></div>

Create a submit form (wrap the table into a form and show it as a table again) from the products that were ordered

EDIT: Maybe its easier to create a new column in the database. Named: to_order.
Then create an UPDATE Query for each product . Something like : UPDATE products SET to_order = '[VALUE_INPUT]' WHERE id = '[ID_PRODUCT]'
The problem here is, where to excecute this query? How can I define the VALUE_INPUT and ID_PRODUCT for each row?
If this works, and I can UPDATE each row for that specific product etc.
I can easily create a mysqli_fetch_assoc again where only the [Product_name],[to_order] will be given.
Please help.
I'm working on a supplier order system. Where the manager of the restaurant can easily select a supplier, fill in how much stock he has now of that specific product. And it will automatically calculate how much you need to order.
This part is done.But now, once we fill in the form I want to get an overview of all products you need to order, and it needs to be printable.
For example in words explained:
We have some columns in our table [ID_product][ID_supplier][Product_name][Stock][Minimum][To_order]
ID_product, ID_supplier, Product_name and Minimum are all data from the database. Stock is what you need to fill in. And To_order is calculated by : Minimum-stock = To_order. (logic)
With a mysql_fetch_assoc command we can show all specific products with its specific id and minimum integer.
Now here is the part where my question is: Once everything is filled in, you need to click a button that refers to a next page. On this page your total input is shown, a full list.
Like: [Product_name][To_order]
So on this page you get an overview of your form where you filled in all these values. So you get a list (how big depends on how much products you have in your database) with all the calculated inputs from 'To_order'.
My problem is, if I create a Form Action into my fetch_assoc, it can read all element names, but as soon you submit the form and go to the next page. All the data is lost.
I need something where I can see the value from the previous page of that input. And then for all specific products.
My form.php (Where I need to fill in my stock in order to calculate the 'To_order' input). This is working fine.
<table width="600" border="1" cellpadding"1" cellspacing= "1" class="flatTable">
<tr class="headingTr">
<th>
Supplier code
</th>
<th>
Product
</th>
<th>
Stock
</th>
<th>
Minimum
</th>
<th>
To order
</th>
</tr>
<?php
while ($producten=mysqli_fetch_assoc($result_producten)) {
echo "<tr>";
echo "<td><form method='POST' action='lijst.php'><label name='".$producten['lev_id']."'>".$producten['lev_id']."</label></td>";
echo "<td><label name='".$producten['productnaam']."'>".$producten['productnaam']."</label></td>";
echo "<td>
<input id='".$producten['minimum']."' name='".$producten['id']."' type='text'
oninput='calculateBestelling(this.value,this.name, this.id)'
onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
</td>";
echo "<td><input id='".$producten['minimum']."' name='mytext2' type='text' readonly='true' value='".$producten['minimum']."' /></td>";
echo "<td><input id='".$producten['id']."' name='order[]' type='text' readonly='true' /></td>";
echo "</tr>";
}
?>
<script>
var minimum;
var stock;
var order;
function calculateBestelling(val,name,id){
minimum = document.getElementById(id).id;
stock = document.getElementById(id).value;
document.getElementById(name).value = minimum - val;
order = document.getElementById(name).value;
if (order < 0) {
document.getElementById(name).value = '0';
}
}
</script>
</table>
<p><input type='submit'/></p></form>
Then the next page (where the overview needs to be shown):
<header>
<h2>Complete order form - Supplier: (HERE THE SUPPLIER)</h2>
</header>
<div class="container">
<div class="row">
<table width="600" border="1" cellpadding"1" cellspacing= "1" class="flatTable">
<tr class="headingTr">
<th>
Product
</th>
<th>
To order
</th>
</tr>
<?php
//And I dont know what I need to do here. I want the values from the 3rd input the previous file. But how I can combine this with each row for a specific product?
while ($producten=mysqli_fetch_assoc($result_producten)) {
echo "<tr>";
echo "<td>PRODUCT HERE</td>";
echo "<td><input id='toorder' name='order[]' type='text' readonly='true' value='(THE VALUE OF THE PREVIOUS FILE FOR THAT PRODUCT)' /></td>";
echo "</tr>";
}
?>
</table>
</div>
</div>
I created an image, where you simple can see what I have in my mind.
URL TO IMAGE: http://i.stack.imgur.com/6AnTl.png
So we also need to check something like : if (!to_order > 0) { DONT SHOW ROW }
Feel free to change codes, maybe some other way that works? Like staying on the same page, and hide the stock and minimum values. So we only can see the ID's, Product names and To_order values?
Web pages are stateless, in other words, each request is separate to the web server. Because of this there is no link between two requests, for example form1 and form2.
In order to overcome this, you must use some form of storage that will persist across two (or more separate requests). This is called persistent storage. For long term persistent storage, use databases. For short term, use PHP sessions. You can read up on PHP sessions in the PHP manual.
To store your values from form 1, save the values into session.
In your form, you will point your form action to form1.php
form1_view.php:
<form action=<?php echo "form1.php" method="post">
<input name="field1">
<input type="form1_submit">
</form>
and your form input handler is form1.php
if (isset($_POST['form1_submit']) {
session_start();
$_SESSION['form1_inputs'] = serialize($_POST);
}
Then, when receiving the valued from form2, retrieve the values you stored from form1.
form2_view.php:
<form action=<?php echo "form2.php" method="post">
<input name="field2">
<input type="form2_submit">
</form>
Form2 is handled by its own handler.
form2.php
if (isset($_POST['form2_submit']) {
session_start();
$form1_values = unserialize($_SESSION['form1_inputs']);
$form2_values = $_POST;
// combine input from both forms into one variable.
$all_form_values = array_merge($form1_values, $form2_values)
// You can now save values from both forms. How you do this
// ...will depend on how you save the values. This is an example.
save_my_values($all_form_values);
}
After hours trying I finally figured it out.
I used $_SESSIONS to store data in. Thats one thing.
Then, made sure that the inputs are all array.
while ($producten=mysqli_fetch_assoc($result_producten)) {
echo "<form method='POST' action='verwerken.php'><tr>";
echo "<td><input name='ids[]' type='text' readonly='true' value='".$producten['id']."' /></td>";
echo "<td><input name='lev_id' type='text' readonly='true' value='".$producten['lev_id']."' /></td>";
echo "<td><input name='producten[]' type='text' readonly='true' value='".$producten['productnaam']."' /></td>";
echo "<td>
<input tabindex='1' id='".$producten['minimum']."' name='".$producten['id']."' type='text'
oninput='calculateBestelling(this.value,this.name, this.id)'
onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
</td>";
echo "<td><input id='".$producten['minimum']."' type='text' readonly='true' value='".$producten['minimum']."' /></td>";
echo "<td><input id='".$producten['id']."' name='test[]' type='text' readonly='true' /></td>";
echo "</tr>";
}
This is the while for the table.
Once you filled in all your STOCK values, it will automatically calculate the value to order.
Thats working fine. Now when you click the submit button a next page will be openend.
This page only inserts a query into a database.
For every row it will update the to_order value in the database.
$order_test = $_SESSION['hoeveelheid'] =$_POST['test'];
$ids_test = $_POST['ids'];
$producten = $_SESSION['product'] = $_POST['producten'];
foreach (array_combine($producten, $order_test) as $producten => $order_test) {
echo 'Product: ' . $producten . ' - Te bestellen: ' . $order_test.'<br>';
mysqli_query($conn, "UPDATE producten SET bestellen = '".$order_test."' WHERE productnaam ='".$producten."'");
}
$_SESSION['lev_id'] = $_POST['lev_id'];
$_SESSION['check'] = 'true';
header('Location: bestelformulier.php');
exit();
}
If the database is not that slow, you should not see this page.
After the query is done, you will be redirected to the overview page.
Bestelformulier.php.
Here you simply mysqli_fetch_assoc the values from the database again. And you have an updated form.
Thanks everyone for the help (:

Performing Functions on a Dynamically Created Table

I am retrieving 30 bakery items from a mySQL database into a dynamic HTML table using PHP. The data retrieved are Product, Item (Primary Key), Weight, and Price. My code also creates an INPUT box, called Quantity, for each item so that the user can type in how many cases he wants. Below is a segment of the code used to generate the dynamic table:
$i=0;
while ($i < $num) {
$Item=mysql_result($result,$i,"Item");
$Product=mysql_result($result,$i,"Product");
$Weight=mysql_result($result,$i,"Weight");
$BGPrice=mysql_result($result,$i,"BGPrice");
echo "<tr>";
echo "<td>$Product</td>";
echo "<td><INPUT NAME=Item size=5 value=$Item READONLY></td>";
echo "<td><INPUT NAME=Weight size=5 value=$Weight READONLY></td>";
echo "<td><INPUT NAME=Price size=5 value=$BGPrice READONLY></td>";
echo "<td><INPUT NAME=Quantity size=5 value=0 tabindex=$i></td>";
echo "<td><INPUT NAME=ExtPrice size=5 value=0 READONLY></td>";
echo "<td><INPUT NAME=TotalWt size=5 value=0 READONLY></td>";
echo "</tr>";
$i++;
}
I need JavaScript to call a function and calculate the values for Extended Price (ExtPrice) and Total Weight (TotalWt) as soon as the user enters the number of cases he would like to order.
Here's my struggle: there are 30 items in this dynamic table and each item's INPUT NAME is the same. How can I create a function that updates ExtPrice and TotalWt for each individual product?
You could use the $i variable to uniquely identify each input
echo "<td><INPUT NAME=Item id='item$i' size=5 value='$Item' READONLY></td>";
And as a side note use quotes or double quotes to wrap $Item as it may contains spaces, etc..
Your JavaScript should not directly reference each input by name. Instead, obtain a reference to the adjacent cells in the same row.
Assuming you have a submit button that re-calculates the results, here's an example:
document.getElementById("sub").addEventListener("click", function(e) {
var i, row;
var rows = document.getElementsByTagName("tr");
// process each row individually
for (i = 0, row; row = rows[i++];) {
totalsForRow(row);
}
e.preventDefault();
}, false);
// updates the totals for each row
function totalsForRow(tr) {
var j, inp, fields = {};
var inputs = tr.getElementsByTagName("input");
if (!inputs || inputs.length === 0)
return;
// map each input by name
for (j = 0; inp = inputs[j++];) {
fields[inp.name] = inp;
}
// update totals for this row, using the stored ref to the input
fields.TotalWt.value = fields.Weight.value * fields.Quantity.value;
fields.ExtPrice.value = fields.Price.value * fields.Quantity.value;
}
This doesn't do any error checking and could be improved in several ways. It's just meant to illustrate one approach.
See a working example.

Categories