We Keep Coding

how to take the values from an input and a php array into a js and multiply?

Ok so as you can see in the code snip bellow I am creating choices (inputs) in number (1) in number (2) I display the choice's name and in number (3) I display the unit price.
(1) is a number from 1 to n, I want to take the input number from each (1) and multiply it with the unit price (3) (example x=(1)*(3)) and then sum all of these results and display them in another textbox.
I have tried several things but I couldn't make it happen.
I could really use some guidance here.
Any more information I will be happy to provide.
<?php
$sum = $choice['qty'] * $choice['timi'];
foreach($choice3 as $choice3){
?>
//(1)
<input type="number" class="colorqty" name="color[<?php echo $i; ?>][unit]" step="<?php echo $step; ?>" value="0" min="0" class="color_qty_1" onchange="updateTotal();">
//(2)
<input type="text" value="<?php echo $choice3['price_name']; ?>" name="color[<?php echo $i; ?>][price_name]" readonly="readonly" class="color_qty_2">
//(3)
<input type="text" value="<?php echo $choice3['price']."€"; ?>" name="xrwmas" readonly="readonly" class="color_qty_2" id="tests"> <br />
<?php $i++; } ?>
for example from the loop above we get
I want to multiply in this example 5 * 68, 0 * 74, etc and then sum the results and display it in the sum box.
#Jerson is close but I it gets really messed up this is a bit of an edit on his code but still can't figure it out.
<input type="number" style="width:40px" class="colorqty" id="input_value" step="1" value="0" min="0" onchange="updateSum();">
<input type="text" value="58" readonly="readonly" class="color_qty_3" id="price">
<br>
<input type="number" style="width:40px" class="colorqty" id="input_value" step="1" value="0" min="0" onchange="updateSum();">
<input type="text" value="33" readonly="readonly" class="color_qty_3" id="price">
<br>
<input type="number" style="width:40px" class="colorqty" id="input_value" step="1" value="0" min="0" onchange="updateSum();">
<input type="text" value="54" readonly="readonly" class="color_qty_3" id="price">
<br>
<input type="number" style="width:40px" class="colorqty" id="input_value" step="1" value="0" min="0" onchange="updateSum();">
<input type="text" value="55" readonly="readonly" class="color_qty_3" id="price">
<br>
<br><br>
<label for="sinolo" class="color_qty_2" style="margin-left:45px"> Σύνολο €</label>
<input type="number" class="color_qty_2" style="background-color:white;color:black;width: 90px; border-color:black;border-radius:5px; border-width:1px; text-align:center;" value="<?php echo number_format((float)$sum, 2, '.', ''); ?>" id="a3" readonly="readonly">
and the js
function updateSum(value,id) {
var elements = document.getElementsByTagName('input')
var input_val = 0;
var price_val = 0;
var some_test = 0;
var test1 = 0;
for(let i = 0 ; i < elements.length; i++) {
if(elements[i].getAttribute('id') == 'price') {
price_val = parseInt(elements[i].value)
}
if(elements[i].getAttribute('id') == 'input_value') {
input_val = parseInt(elements[i].value)
}
test1 = price_val*input_val;
some_test += test1;
document.getElementById('a3').value = some_test
}
}

This works fine for me
<?php Route::add('/route', function() {
$array = [
[
'price_name' => 'Xiaomi Poco X3',
'price' => 2000
],
[
'price_name' => 'Xiaomi Poco F1 plus',
'price' => 1500
],
[
'price_name' => 'Xiaomi Poco F1',
'price' => 1000
]
];
foreach($array as $key => $value) {
?>
<div id="form">
<input type="number" id="input_value" class="colorqty" name="color[<?php echo $key; ?>][unit]" value="0" min="0" class="color_qty_1" onkeyup="updateTotal();">
<input type="text" value="<?php echo $value['price_name']; ?>" name="color[<?php echo $key; ?>][price_name]" readonly="readonly" class="color_qty_2">
<input type="text" data-id="<?php echo $key; ?>" value="<?php echo $value['price']."€"; ?>" id="price" name="xrwmas" readonly="readonly" class="color_qty_2" id="tests"> <br />
</div>
<?php
}
echo '<p>SUM <span id="sum">0</span></p>';
?>
<script>
function updateTotal(value,id) {
var elements = document.getElementsByTagName('input')
var input_val = 0;
var price_val = 0;
for(let i = 0 ; i < elements.length; i++) {
if(elements[i].getAttribute('id') == 'price') {
price_val += parseInt(elements[i].value.replace('€',''))
}
if(elements[i].getAttribute('id') == 'input_value') {
input_val += parseInt(elements[i].value)
}
}
document.getElementById('sum').innerHTML = !Number.isNaN(price_val * input_val) ? price_val * input_val : 0
}
</script>
<?php
});
?>
Will you need only javascript todo that

So I did figure it out #Jerson helped out a lot.
So for the code in the beginning we add unique id in all items we need. In this example price and input so here is the example
<?php
foreach($choice3 as $choice3){
?>
//(1)
<input type="number" class="colorqty" name="color[<?php echo $i; ?>][unit]" step="<?php echo $step; ?>" value="0" min="0" class="color_qty_1" onchange="updateSum();" id="input_value_<?php echo $i; ?>">
//(2)
<input type="text" value="<?php echo $choice3['price_name']; ?>" name="color[<?php echo $i; ?>][price_name]" readonly="readonly" class="color_qty_2">
//(3)
<input type="text" value="<?php echo $choice3['price']."€"; ?>" name="xrwmas" readonly="readonly" class="color_qty_2" id="price_<?php echo $i; ?>">
Then we just need the JS that takes one element by class and counts its length and then well you as you can see makes it work for infinite inputs.
function updateSum(value,id) {
var elements = document.getElementsByClassName('colorqty').length;
var input_val = 0;
var price_val = 0;
var multipl = 0;
var output = 0;
var i = 0;
while(i < elements ) {
price_val = document.getElementById('price_'+[i]).value;
input_val = document.getElementById('input_value_'+[i]).value;
if(input_val != null){
multipl = price_val*input_val;
output += multipl ;
document.getElementById('a3').value = !Number.isNaN(output) ? output : 0
}
i ++;
}
}
and here is the working example in jsfiddle

Result POST Submit inside php form without refresh

i just combine some code to generate some random string, searching from stackoverflow and googling.
How do i get result instantly without page going refresh.
when i press button generate.
here is my code
<?php
function randomString($length = 5) {
$str = "";
$characters = array_merge(range('A','Z'), range('0','9'));
$max = count($characters) - 1;
for ($i = 0; $i < $length; $i++) {
$rand = mt_rand(0, $max);
$str .= $characters[$rand];
}
return $str;
}
?>
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
?>
<?php
$randomprivate = randomString();
if (isset($_POST['submit']))
{
$result = $_POST['firstname']."-".$_POST['lockercode']."-".$randomprivate;
}
?>
<form action="#" method="post">
First name:<br>
<input type="text" name="firstname">
<br>
Locker ID:<br>
<input type="text" name="lockercode">
<br><br>
<input type="submit" name="submit" value="Generate Secret">
<br>
Your Secret Identifier:<br>
<input type="text" value="<?php if (isset($result)) echo $result ?>" readonly>
<br><br>
<button onclick="goBack()">Go Back</button>
</form>

<script>
function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
document.getElementById("mytext").value = text;
}
</script>
<form action="#" method="post">
First name:<br>
<input type="text" name="firstname">
<br>
Locker ID:<br>
<input type="text" name="lockercode">
<br><br>
<input type="submit" name="submit" value="Generate Secret" onclick="makeid()">
<br>
Your Secret Identifier:<br>
<input id="mytext" type="text" readonly>
<br><br>
<button onclick="goBack()">Go Back</button>
</form>

How to call php function on submit on the same page while action redirects to another page

i have a problem. I want to execute a php function on submit but the php function HAS to be on the same page because of a multi dimensional array foreach loop. So in easy terms input type="submit" action="post only $orderid to ideal.php" onclick="phpFunction on same page"
Here is my code:
$total =0;
$b = 0;
$items = array();
foreach ($_SESSION["cart_products"] as $cart_itm)
{
$product_qty = $cart_itm["product_qty"];
$pid = $cart_itm["product_code"];
$results = mysql_query("SELECT * FROM Products WHERE ProductID = '".$pid."'");
while($row = mysql_fetch_array ($results)) {
$naam = $row["ProductName"];
$liters = $row["ProductLiters"];
$kleur = $row["ProductColor"];
$product_price = $row["ProductPrice"];
$beschrijving = $row["ProductDescription"];
$image = $row["ProductImage"];
$merk = $row["SupplierID"];
}
$items[] = array('pid' => $pid, 'qty' => $product_qty);
$subtotal = ($product_price * $product_qty);
$total = ($total + $subtotal);
?>
<div class="'.$bg_color.'">
<h1 class="ptitel" id="ptitel"><?= $naam ?></h1>
<p class="prijs" id="prijs">€<?= $product_price ?> x <?= $product_qty ?></p>
<p class="verzenden">Geen verzendkosten binnen Nederland</p>
<p id="pinfo"><?= $beschrijving ?></p>
<div id="liter">
<p class="text">Liters: <?= $liters ?></p>
</div>
<div id="kleur">
<p class="text">Kleur: <?= $kleur ?></p>
</div>
</div>
<?php
}
?>
</div>
<div class="left">
<?php
---------THIS HAS TO BE EXECUTED-----------
$orderid = mt_rand(100000,900000);
foreach ($items as $key => $value) {
mysql_query("INSERT INTO Bestellingen (pid, qty, orderid) VALUES ('".$value['pid']."', '".$value['qty']."', '".$orderid."')");
}
------------------END----------------------
?>
<form method="post" action="test.php">
<input type="text" name="realname" id="name" placeholder="Volledige naam" required/>
<input type="text" name="postcode" id="postcode" placeholder="Postcode" required/>
<input type="text" name="adres" id="adres" placeholder="Straatnaam+huisnummer" required/>
<input type="text" name="plaats" id="plaats" placeholder="Plaats" required/>
<input type="tel" name="telefoon" id="telefoon" placeholder="Mobiel nummer" required/>
<input type="email" name="email" id="email" placeholder="mail#voorbeeld.com" required/>
<textarea name="Message" placeholder="Heeft u wat te vertellen?"></textarea>
<input type="text" name="discount" id="discount" placeholder="Kortingscode"/>
<input type="submit" name="betaal" class="knop" value="BETALEN €<?= $total ?>" />
</form>

1. you can use ajax to post form date to any page.
2. you can use js to update action in form tag according to you convenience.
Extra suggestion : use tag <?php ?>

Javascript Add New Input Field in Increasing Order

I'm having trouble getting my javascript to add a variable to getElementById. What I'm doing is allowing the users to have 10 authors per post. The script shows the authors already entered in the system and now I'm trying to allow them to add more input fields only to the point that 10 fields show up. Here is the code I have so far:
$y=1;
//GET EXISTING AUTHORS FOR POST
while ($getauthorsrow=$getauthorssql->fetch()) {
$showauthor = $getauthorsrow['author'];
$authorid = $getauthorsrow['ID'];
echo "<input type='text' value='$showauthor' name='authorname[]'>
<input type='hidden' value='$authorid' name='authorid[]'><br><br>";
$y++;
}
$newy=$y-1;
?>
//SCRIPT TO ADD NEW FIELD ONLY TO THE POINT OF 10
<script language="javascript">
fields = <?php echo $newy; ?>;
function addInput<?php echo $i; ?>() {
if (fields != 10) {
//HERE I'M TELLING IT TO GET text + $i (which is post number) + fields variable
//So if it's the first post and the new field divs start a 5
//Then it should getElementByid('text05') and continue on.
document.getElementById('text<?php echo $i; ?>' + fields).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
document.getElementById('text<?php echo $i; ?>' + fields).innerHTML += "<br />Only 10 authors allowed.";
document.ajaxform<?php echo $i; ?>.add<?php echo $i; ?>.disabled=true;
}
}
</script>
//HERE I'M ADDING THE NEW DIVS FOR TEXT FIELDS AND STARTING
//THEM AT WHATEVER NUMBER POST $i IT IS AND WHATEVER THE $w is.
//SO IN THE EXAMPLE IN THE JAVASCRIPT IT'D SAY id='text05'
//THIS WORKS JUST FINE
<?php
$w=$newy;
while ($w<=10) {
echo "<div id='text".$i.$w."'></div>";
$w++;;
}
//ECHO THE ADD AUTHOR BUTTON
echo "
<input type='button' onclick='addInput$i()' name='add$i' value='Add Author'><br>
<input type='hidden' name='count' value='$newy'>
<input type='hidden' name='id' value='$fileid'>
<input type='submit'>
</form>
";
?>
$i is the post number starting from 0. The php to make the divs works fine. I'm just getting null for the getElementById in the javascript. What am I getting wrong here?
HTML Output Example:
<form id="ajaxform0">
<input type="text" value="Logan" name="authorname[]">
<input type="hidden" value="121" name="authorid[]"><br><br><input type="text" value="Matt" name="authorname[]">
<input type="hidden" value="122" name="authorid[]"><br><br><input type="text" value="Chad" name="authorname[]">
<input type="hidden" value="123" name="authorid[]"><br><br><input type="text" value="hey" name="authorname[]">
<input type="hidden" value="128" name="authorid[]"><br><br><input type="text" value="jordan" name="authorname[]">
<input type="hidden" value="129" name="authorid[]"><br><br>
<script language="javascript">
fields = 5;
function addInput0() {
if (fields != 10) {
var currentText = 'text0' + fields;
document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
document.getElementById(currentText).innerHTML += "<br />Only 10 authors allowed.";
document.ajaxform0.add0.disabled=true;
}
}
</script>
<div id="text05"></div><div id="text06"></div><div id="text07"></div><div id="text08"></div><div id="text09"></div><div id="text010"></div>
<input type="button" onclick="addInput0()" name="add0" value="Add Author"><br>
<input type="hidden" name="count" value="5">
<input type="hidden" name="id" value="45">
<input type="submit">
</form>

Try assigning that concatenated string to a JS variable first, then calling the function:
if (fields != 10) {
var currentText = 'text<?php echo $i; ?>' + fields;
document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
document.getElementById(currentText).innerHTML += "<br />Only 10 authors allowed.";
document.ajaxform<?php echo $i; ?>.add<?php echo $i; ?>.disabled=true;
}

I need to add the $i to the fields variable in the javascript. With multiple files it was doing multiples of the same variable...i works.

Hi I have modified your code for html and JavaScript.
<form id="ajaxform0">
<input type="text" value="Logan" name="authorname[]">
<input type="hidden" value="121" name="authorid[]"><br><br><input type="text" value="Matt" name="authorname[]">
<input type="hidden" value="122" name="authorid[]"><br><br><input type="text" value="Chad" name="authorname[]">
<input type="hidden" value="123" name="authorid[]"><br><br><input type="text" value="hey" name="authorname[]">
<input type="hidden" value="128" name="authorid[]"><br><br><input type="text" value="jordan" name="authorname[]">
<input type="hidden" value="129" name="authorid[]"><br><br>
<script language="javascript">
fields = 5;
function addInput0() {
if (fields != 10) {
var currentText = 'text0' + fields;
document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
var myout = "Only 10 authors allowed.";
document.getElementById("stat").innerHTML = myout;
}
}
</script>
<div id="text05"></div><div id="text06"></div><div id="text07"></div><div id="text08"></div><div id="text09"></div><div id="text010"></div><div id="stat"></div>
<input type="button" onclick="addInput0()" name="add0" value="Add Author"><br>
<input type="hidden" name="count" value="5">
<input type="hidden" name="id" value="45">
<input type="submit">
Check it and let me know, if it is solved.

select table, check and prompt when value match

I have my table named sup_mon:
genmat_id mat_name Stock_balance
1 bar 50
5 steel 10
20 bolt 5
HTML:
<?php
$resource2=mysql_query("SELECT * FROM genmaterial WHERE mat_name='$mat' AND size='$unit' ORDER BY genmat_id DESC limit 0,1",$con);
while($rows2=mysql_fetch_array($resource2))
{
?>
<form name="stockout" method="post" action="stock_out.php">
<label><b>Material</b></label>
<input maxlength="25" type="text" readonly name="material" id="material" required="required" style="height:20px" value="<?php echo $rows['mat_name']; ?>" >
<input type="number" name="stock_out"/>
<input type="submit" name="submit" value="submit"/>
</form>
<?php };?>
How can I check first stock_balance from the sup_mon table for the material in the material text box from the html? and prompt reorder message when stock_balance of that particular material is less than 10?

You would need to add a second query inside the loop to check if stock_balance is less than 10 like this:
<?php
$resource2=mysql_query("SELECT * FROM genmaterial WHERE mat_name='$mat' AND size='$unit' ORDER BY genmat_id DESC limit 0,1",$con);
while($rows2=mysql_fetch_array($resource2))
{
$resource3=mysql_query("SELECT * FROM sup_mon WHERE genmat_id = '" . $rows2['genmat_id'] . "'",$con);
$row3 = mysql_fetch_array($resource3);
if($row3['Stock_balance'] < 10)
{
echo "Stock balance is less then 10 please reorder";
header("refresh: 5; order.php");
}
?>
<form name="stockout" method="post" action="stock_out.php">
<label><b>Material</b></label>
<input maxlength="25" type="text" readonly name="material" id="material" required="required" style="height:20px" value="<?php echo $rows['mat_name']; ?>" >
<input type="number" name="stock_out"/>
<input type="submit" name="submit" value="submit"/>
</form>
<?php }; ?>