Javascript Add New Input Field in Increasing Order - javascript

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.

Related

Script calculation Vs. multiple rows in sql results

I am using below Script to calculate the sub-price in the below form inside the sql result, but it works only in the first row result.
How can make all multiple row results can be automatic calculate by the Script respectively??
<script>
var x = 0;
var y = 0;
var z = 0;
function calc(obj) {
var e = obj.id.toString();
if (e == 'quantity') {
x = Number(obj.value);
y = Number(document.getElementById('unit_price').value);
} else {
x = Number(document.getElementById('quantity').value);
y = Number(obj.value);
}
z = x * y ;
document.getElementById('sub_price').value = z;
document.getElementById('update').innerHTML = z;
}
</script>
<form name="frmInvoice_details" method="post" action="" accept-charset="UTF-8">
<input type="hidden" name="tbid[]" class="txtField" value="<?php echo $row['tbid']; ?>">
<input required="required" type="number" id="quantity" name="quantity[]" onkeyup="calc(this)" class="txtField" value="<?php echo $row['quantity']; ?>">
<input type="number" id="unit_price" onkeyup="calc(this)" name="unit_price[]" step="any" value="<?php echo $row['unit_price']; ?>" required="required" />
<input type="number" id="sub_price" onkeyup="calc(this)" name="sub_price[]" step="any" value="<?php echo $row['sub_price']; ?>" readonly required="required" />
<input type="submit" name="submit" value="Submit" class="btnSubmit">
</form>
Thank you for your fully support !

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

How to calculate from each row data textbox value in array?

I want to show total sum of values for each row data array. I have 5 rows of data, I want to get the results of each of data. Can anyone help me to figure it out?
function subtotal(konversi){
var hitung = (document.getElementById('quantity').value * document.getElementById('packing_value').value);
document.forms.demoform.quantity_konversi.value = hitung;
}
<form id='demoform'>
<?php
$jumlah=5;
for($i=0; $i<$jumlah; $i++){
$nomor = $i + 1;
echo"$nomor";
?>
<input type='text' name='quantity[]' id='quantity' onchange="subtotal(this.value,getElementById('packing_value').value);">
X
<input type='text' id="packing_value" value='10' readonly='yes'>
<input type='text' name='quantity_konversi[]' id='quantity_konversi' placeholder='result ???'><br/>
<?php } $nomor++ ?>
</form>
Your problem is that all the input fields have the same id. In HTML every element/html tag should have a unique id. So if you reference with the id JavaScript will find the first occurence of your id and use this element. All other elements are ignored even though they have the same id.
So remember ids are unique, classes can be used on several elements.
To solve your problem I added an unique ID at the end of the regular quantity id with the PHP variable $nomor:
<input type='text' name='quantity[]' id='quantity<?php echo"$nomor"; ?>' onkeyup="subtotal();">
The PHP server will make the following out of it:
<input type='text' name='quantity[]' id='quantity1' onkeyup="subtotal();">
<input type='text' name='quantity[]' id='quantity2' onkeyup="subtotal();">
...
<input type='text' name='quantity[]' id='quantity5' onkeyup="subtotal();">
You know have a unique id that can be referenced by JavaScript with the help of a running index inside of a for loop:
document.getElementById('quantity'+i).value
The same goes for document.getElementById('packing_value'+i).value
Finally the calculated value is saved in the correct field:
document.getElementById('quantity_konversi'+i).value = hitung;
FULL CODE (runnable at http://phpfiddle.org/):
<script>
function subtotal(konversi){
console.log('subtotal function');
for(var i = 1; i < 5+1; i++){
//console.log('quantity'+i, document.getElementById('quantity'+i).value);
//console.log('packing_value'+i, document.getElementById('packing_value'+i).value);
var hitung = (document.getElementById('quantity'+i).value * document.getElementById('packing_value'+i).value);
//document.forms.demoform.quantity_konversi.value = hitung;
document.getElementById('quantity_konversi'+i).value = hitung;
console.log(i, hitung);
}
}
</script>
<form id='demoform'>
<?php
$jumlah=5;
for($i=0; $i<$jumlah; $i++){
$nomor = $i + 1;
echo"$nomor";
?>
<input type='text' name='quantity[]' id='quantity<?php echo"$nomor"; ?>' onkeyup="subtotal();">
X
<input type='text' id="packing_value<?php echo"$nomor"; ?>" value='10' onkeyup="subtotal();">
<input type='text' name='quantity_konversi[]' id='quantity_konversi<?php echo"$nomor"; ?>' placeholder='result ???'><br/>
<?php
} //for end
$nomor++
?>
</form>

Get all input fields and retain values inside text fields even after button submit using javascript and php

I have multiple input fields and random input names, what I want to achieve is get the data entered in the text fields but then on clicking on the submit button, the data entered will remain.
Sample code:
for($i=0;$i<$count1;$i++) {
echo '<input type="text" name="'.$random1.'" value=""/>';
}
for($j=0;$j<$count2;$j++) {
echo '<input type="text" name="'.$random2.'" value=""/>';
}
for($k=0;$k<$count3;$k++) {
echo '<input type="text" name="'.$random3.'" value=""/>';
}
echo '<input type="submit" name="submit" value="submit"/>'
The problem here is that I don't know what are the 'input names'. I want the values entered by user into this text fields remain. How would I do that? If you don't know what the 'input names' are?
Can you use hidden inputs to keep tracks of the names? Like this:
for($i=0;$i<$count1;$i++) {
$value=getValueFor("section1-$i");
echo '<input type="text" name="'.$random1.'" value="'.$value.'"/>';
echo '<input type="hidden" name="section1-'.$i.'" value="'.$random1.'"/>';
}
for($j=0;$j<$count2;$j++) {
$value=getValueFor("section2-$j");
echo '<input type="text" name="'.$random2.'" value="'.$value.'"/>';
echo '<input type="hidden" name="section2-'.$j.'" value="'.$random2.'"/>';
}
for($k=0;$k<$count3;$k++) {
$value=getValueFor("section3-$k");
echo '<input type="text" name="'.$random3.'" value="'.$value.'"/>';
echo '<input type="hidden" name="section3-'.$k.'" value="'.$random3.'"/>';
}
where getValueFor should be a function which checks what you got from GET or POST. For example:
function getValueFor($x){
$res = "";
if (isset($_REQUEST[$x])){
$name=$_REQUEST[$x];
$res = $_REQUEST[$name];
}
return res;
}
That should work :
if (isset($_POST['random'])) {
foreach ($_POST['random'] as $key => $randomName) {
${"random" . $key . "value"} = $randomName;
}
}
for($i=0;$i<$count1;$i++) {
echo '<input type="text" name="'.$random1.'" value="'.$random1value.'"/>';
echo '<input type="hidden" name="random[]" value="'.$random1.'"/>';
}
for($j=0;$j<$count2;$j++) {
echo '<input type="text" name="'.$random2.'" value="'.$random2value.'"/>';
echo '<input type="hidden" name="random[]" value="'.$random2.'"/>';
}
for($k=0;$k<$count3;$k++) {
echo '<input type="text" name="'.$random3.'" value="'·$random3value.'"/>';
echo '<input type="hidden" name="random[]" value="'.$random3.'"/>';
}
echo '<input type="submit" name="submit" value="submit"/>'`enter code here`;
}

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 }; ?>

Categories