JavaScript - How can I run the javascript in all my html rows - javascript

I am creating invoice form, I have written a Java Script to calculate Tax and Discount price as the user the value, But it is just working in one row how can I enable it to work on all the rows
Javascript to calculate discount and tax
Html form

The better option is to do this calculation in PHP itself but if you want to do this in Javascript the you can do something like this:
Try creating a JS function that takes in all the values and the id of output input field and make sure that the id of output field is distinct.
JS Code
function calculate(unit_price, quantity, discount, tax, output_id) {
var subtotal = "do subtotal calc here";
document.getElementById(output_id).value = subtotal;
}
PHP/HTML Code
<?php
// mySQL Code goes here
while($row = mysql_fetch_array($result, MYSAL_ASSOC))
?>
<div class="centered">
<table border="1">
<tr>
<form id = "invoiceform" action="final.php" method="post">
<td><input type="text" id="Sl_no" value="<?php echo $s; ?>"></td> <!-- DO NOT INCREASE $S HERE YET-->
<td><input type="text" id="partno" value="<?php echo $p[$j]; ?>"></td>
<td><input type="text" id="description" value="<?php $row['Description']; ?>"></td>
<td><input type="text" id="unit_price" value="<?php echo $row['Unit_Price']; ?>"></td>
<td><input type="text" id="quantity" value=""></td>
<td><input type="text" id="discount" value=""></td>
<td><input type="text" id="tax" value=""></td>
<td><input type="text" id="<?php echo 'subtotal_'.$s;?>" value=""></td>
<script>
calculate(<?php echo $row['Unit_Price']; ?>, <?php echo $row['Quantity']; ?>, <?php echo $row['Discount']; ?>, <?php echo $row['Tax']; ?>, <?php echo 'subtotal_'.$s; s++;?>);
</script>
</tr>
</table>
</div>
P.S. Try making all the field ids distinct the way i made subtotal id distinct because a HTML page is supposed to have distinct IDs on elements

Related

submitting only filled textbox values and discard empt textbox ih form php

I have form which lists all the in stock products from database with price.User will add quantity , it calculated the amounts and submits the form. in the list there are 5 products. Each time user can fill any one or all the 5. While submiting, i want to get only quantity filled values to database. I am not getting how to do it
Here is my code
<tr>
<td><?php echo $Myrow['product']; ?></td>
<input type="hidden" name="product_id[]" value="<?php echo Myrow['id']; ?>" />
<td><input type="text" name="rte[]" value="<?php echo $Myrow['rate']; ?>" readonly="readonly" class="price form-control" /></td>
<td><input type="text" name="Qty[]" class="Qty form-control" /></td>
<td><input type="text" id="amount" name="amount[]" class="amount form-control" /></td>
</tr>
<?php } ?>
</tbody>
How can is submit only non-emptied values. Please help
I think this could help you
$product_id=$_POST['product_id'];
$qty=$_POST['qty'];
foreach ($qty as $key => $value) {
if($value){
.... here you can save $product_id[$key], qty and other
}
}

Assign id or class to fetched data to work with in JavaScript

i have fetched data from database with PHP in while loop.i want to assign id or class to this data to work with it in javaScript individually with every id or class which are in table td.
For example
$i = 0 ;
if($result->rowCount() > 0)
{
while($row_pro = $prod->fetch())
{
$type = $row->type;
$brand = $row->brand;
$qty = $row->qty;
$total = $row->total;
$i++ ;
?>
<tr>
<td><input type="text" value="<?php echo $type; ?>" ></td>
<td><input type="text" value="<?php echo $brand; ?>" ></td>
<td><input type="text" value="<?php echo $qty; ?>" ></td>
<td><input type="text" value="<?php echo $total; ?>" ></td>
</tr>
<?php }} ?>
One solution would be to simply echo out your loop's index ($i) as a class:
<tr>
<td><input type="text" value="<?php echo $type; ?>" class="<?php echo $i; ?>"></td>
<td><input type="text" value="<?php echo $brand; ?>" class="<?php echo $i; ?>"></td>
<td><input type="text" value="<?php echo $qty; ?>" class="<?php echo $i; ?>"></td>
<td><input type="text" value="<?php echo $total; ?>" class="<?php echo $i; ?>"></td>
</tr>
Keep in mind that you can't do this for IDs, as IDs must be unique. Also, you don't actually need to do this in the first place, as you can directly target elements with JavaScript that have neither IDs nor classes. This is most commonly with .getElementsByTagName(), which returns a NodeList collection of elements. Here's an example of that:
let three = document.getElementsByTagName('td')[2];
console.log(three.innerHTML);
<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>

How to handle a php post when I don't know all the variables to grab

I have a form that the user can add additional lines (using javaScript) but when the save button is clicked, how to I grab the new data to assign to a variable?
What's happening now: The user adds new rows, clicks save and the rows disappear from the page along with the data.
Here is my html:
<table id="desc_table" class="form">
<tbody id="desc_tbody">
<tr id="headings">
<td><font><h3>Description</h3></font></td>
<td><font><h3>Hours</h3></font></td>
<td><font><h3>Rate</h3></font></td>
<td><font><h3>Amount</h3></font></td>
<td></td>
</tr>
<tr>
<td><input name="desc1" type="text" value="<?php echo $desc1; ?>"></td>
<td> <input name="desc_hr1" type="text" value="<?php echo $desc_hr1; ?>"></td>
<td> <input name="desc_rt1" type="text" value="<?php echo $desc_rt1; ?>"></td>
<td><input name="desc_amt1" type="text" value="<?php echo $desc_amt1; ?>"></td>
<td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td>
</tr>
<tr>
<td><input name="desc2" type="text" value="<?php echo $desc2; ?>"></td>
<td> <input name="desc_hr2" type="text" value="<?php echo $desc_hr2; ?>"></td>
<td> <input name="desc_rt2" type="text" value="<?php echo $desc_rt2; ?>"></td>
<td><input name="desc_amt2" type="text" value="<?php echo $desc_amt2; ?>"></td>
<td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td>
</tr>
<tr>
<td><input name="desc3" type="text" value="<?php echo $desc3; ?>"></td>
<td> <input name="desc_hr3" type="text" value="<?php echo $desc_hr3; ?>"></td>
<td> <input name="desc_rt3" type="text" value="<?php echo $desc_rt3; ?>"></td>
<td><input name="desc_amt3" type="text" value="<?php echo $desc_amt3; ?>"></td>
<td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td>
</tr>
</tbody>
</table>
<div>
<center><input type="button" value="Add New Line" id="add_btn" name="add_btn" onclick="newLine()"></center>
</div>
JavaScript:
function newLine(){
//get the total amount of rows in the table
var $rowcount = $('#desc_table tr').length;
//add the row number to the field name to make it unique
var $desc = "desc" + $rowcount;
var $desc_hr = "desc_hr" + $rowcount;
var $desc_rt = "desc_rt" + $rowcount;
var $desc_amt = "desc_amt" + $rowcount;
//create new row data
var $newRowData = '<tr><td><input name=' + $desc + ' type=text></td><td><input name=' + $desc_hr + ' type=text></td><td><input name=' + $desc_rt + ' type=text></td><td><input name=' +$desc_amt+ ' type=text></td><td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td></tr>';
//append new row to bottom of the table
$($newRowData).appendTo($("#desc_table tbody"));
}
PHP variable declaration:
...
if (!empty($_POST['desc1'])){
$desc1 = $_POST['desc1'];
}
else{
$desc1 = NULL;
}
if (!empty($_POST['desc_hr1'])){
$desc_hr1 = $_POST['desc_hr1'];
}
else{
$desc_hr1 = NULL;
}
if (!empty($_POST['desc_rt1'])){
$desc_rt1 = $_POST['desc_rt1'];
}
else{
$desc_rt1 = NULL;
}
if (!empty($_POST['desc_amt1'])){
$desc_amt1 = $_POST['desc_amt1'];
}
else{
$desc_amt1 = NULL;
}
if (!empty($_POST['desc2'])){
$desc2 = $_POST['desc2'];
}
else{
$desc2 = NULL;
}
if (!empty($_POST['desc_hr2'])){
$desc_hr2 = $_POST['desc_hr2'];
}
...
When the page variables are captured with the POST, how do I find the new row variables to declare them and capture the data?
Use array-style names rather than incrementing the suffix on each row:
<tr>
<td><input name="desc[]" type="text" value="<?php echo $desc; ?>"></td>
<td> <input name="desc_hr[]" type="text" value="<?php echo $desc_hr; ?>"></td>
<td> <input name="desc_rt[]" type="text" value="<?php echo $desc_rt; ?>"></td>
<td><input name="desc_amt[]" type="text" value="<?php echo $desc_amt; ?>"></td>
<td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td>
</tr>
PHP will then put all the inputs into arrays, and you can loop through them.
foreach ($_POST['desc'] AS $i => $desc) {
$desc_hr = $_POST['desc_hr'][$i];
$desc_rt = $_POST['desc_rt'][$i];
$desc_amt = $_POST['desc_amt'][$i];
...
}
Put in a hidden input and then set its value to the amount of rows shown by default. When you add or delete a row update the value using JavaScript. When submitted you can then use this value in a loop.
However, the easiest and most appropriate solution would be just to use form arrays. For example, why not call each input name as "desc[]"? Then use the array index to figure out where/amount of rows etc. You could have 1 or 1000 inputs named that...

Dynamic subtotal in php

In my project I need to make the subtotal of the line (quantite*montant) dynamicali.
For the moment I have there:
I want the montant total it is auto make 1*110 for example and it is directly displayed.
My code :
<div id="contenu">
<h2>Renseigner ma fiche de frais du mois <?php echo $numMois."-".$numAnnee ?></h2>
<form method="POST" action="index.php?uc=gererFrais&action=validerMajFraisForfait">
<div class="corpsForm">
<fieldset>
<legend>Eléments forfaitisés
</legend>
<table width=100%>
<tr>
<td>Libelle</td>
<td>Nombre</td>
<td>Montant unitaire</td>
<td>Montant total</td>
</tr>
<?php
foreach ($lesFraisForfait as $unFrais)
{
$idFrais = $unFrais['idfrais'];
$libelle = $unFrais['libelle'];
$quantite = $unFrais['quantite'];
$montant = $unFrais['montant'];
?>
<tr>
<td><?php echo $libelle ?></td>
<td><input type="number" id="idFrais" name="lesFrais[<?php echo $idFrais?>]" size="10" min="0" autocomplete="off" maxlength="5" value="<?php echo $quantite?>" onkeyup="calculer()">
<td><input type="text" id="montant" value="<?php echo $montant ?>" disabled></td>
</tr>
<?php
}
?>
</table>
</fieldset>
</div>
<div class="piedForm">
<p>
<input id="ok" type="submit" value="Valider" size="20" />
<input id="annuler" type="reset" value="Effacer" size="20" />
</p>
</div>
</form>
Here I added another Answer for you.
So basically in your FOREACH Loop you have to create INCREMENTAL VARIABLE
<?php
$incr = 1;
foreach ($lesFraisForfait as $unFrais)
{
$idFrais = $unFrais['idfrais'];
$libelle = $unFrais['libelle'];
$quantite = $unFrais['quantite'];
$montant = $unFrais['montant'];
?>
<tr>
<td><?php echo $libelle ?></td>
<td><input type="number" id="<?php echo 'idFrais'.$incr; ?>" size="10" min="0" autocomplete="off" maxlength="5" value="<?php echo $quantite?>" onkeyup="calculer(this)">
<td><input type="text" id="<?php echo 'montant'.$incr; ?>" value="<?php echo $montant ?>" disabled></td>
<td id='subtotal<?php echo $incr;?>'><?php echo $quantite*$montant; ?></td>
</tr>
<?php
$incr ++;
}
?>
Since you already have ONKEYUP='calculer' on your javascript code this below.
function calculer( e ){
var i = e.getAttribute('id').length;
var input_identifier = e.getAttribute('id').substring(i-1,i);
var subtotal = document.getElementById('subtotal'+input_identifier)
var quantity = e.value;
var montant = document.getElementById('montant'+input_identifier);
subtotal.textContent = parseInt(quantity) + parseInt(montant.value);
return;
}
This should work.
please add td for total :
<tr>
<td><?php echo $libelle ?></td>
<td><input type="number" id="idFrais" name="lesFrais[<?php echo $idFrais?>]" size="10" min="0" autocomplete="off" maxlength="5" value="<?php echo $quantite?>" onkeyup="calculer()">
<td><input type="text" id="montant" value="<?php echo $montant ?>" disabled></td>
<td><input type="text" value="<?php echo ($montant*$quantite) ?>" disabled></td>
</tr>
You just have to add the following 4th TD.
<td><?php echo $quantite*$montant; ?></td>
That should work.

Javascript PHP/MySQL - Insert row value from database into textfield

Possibly very easy to do but I cannot work it out!
I'm trying to make a button which inserts row value pulled out from the database into a textfield.
<?php while ($row = mysql_fetch_array($query)) { ?> <tr>
<td><?php echo $row['mobile_number']; ?></td>
<td><input type="button" value="select" onclick="clickMe()" /></td>
</tr>
<?php } ?>
<input type="text" id="textfield" />
so when the button "select" is clicked, the textfield would get populated with the mobile number.
Many thanks for your help in advance.
Try this:
<script>
function clickMe(number) {
document.getElementById("textfield").value = number;
// or jQuery
$("#textfield").val(number);
}
</script>
<?php while ($row = mysql_fetch_array($query)) { ?> <tr>
<td><?php echo $row['mobile_number']; ?></td>
<td><input type="button" value="select" onclick="clickMe(<?php echo $row['mobile_number']; ?>)" /></td>
</tr>
<?php } ?>
<input type="text" id="textfield" />

Categories