Compare input quantity value and database quantity value - javascript

I want to compare the input value of the user and the value in the database. If the input value of the user is higher than the database value , the alert window will inform the user that the quantity he want is not enough.
how can i do this?
here is my html and php code
<div class="text">Enter Product Name Here: </div> <br/>
<form action="addorder.php" method="post" name="abc">
BEER
Pizza
Egg Pie
Ice Tea
Combo
</div> <br/> <br/>
<?php
if (isset($_GET['id']))
{
$con = mysql_connect('localhost','root',"");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("inventory", $con);
$member_id = $_GET['id'];
$result = mysql_query("SELECT * FROM productlist WHERE id = $member_id");
$row = mysql_fetch_array($result);
$name=$row["pdesc"];
$qty_left=$row["pleft"];
$price=$row["pprice"];
$id=$row["id"];
$prcoede=$row["pcode"];
mysql_close($con);
}
?>
<div class="order">
<table>
<tr>
<td><label>Product Name</label></td>
<td><label>Product Price </label></td>
<td><label>Quantity Left </label></td>
</tr>
<tr>
<td><input name="PNAME" type="text" id="pname" value="<?php echo #$name ?>" size="20" readonly="readonly" /></td>
<td><input name="PPRICE" id="PPRICE" type="text" value="<?php echo #$price ?>" readonly="readonly" /></td>
<td><input name="AQTY" type="text" value="<?php echo #$qty_left ?>" size="20" readonly="readonly"/></td>
<td><input name="id" type="hidden" value="<?php echo $id; ?>" readonly="readonly" /></td>
<td><input name="procode" type="hidden" value="<?php echo $prcoede; ?>" readonly="readonly" /></td>
<td><input name="less" type="hidden"/></td>
</tr>
<tr><td></td></tr><tr><td></td></tr>
<tr><td></td></tr><tr><td></td></tr>
<tr class="space">
<td><label>Reciept Code</label></td>
<td><label>Quantity</label></td>
<td><label>Amount</label></td>
</tr>
<tr>
<td><input name="CODE" type="text" id="CODE" value="<?php echo $_SESSION['SESS_MEMBER_ID']; ?>" size="20" readonly="readonly"/></td>
-------> <td><input name="QTY" id="QTY" type="text" onkeyup="multiply()" onkeypress="return checkIt(event)" size="20" /></td>
<?php
$con = mysql_connect("localhost","root", "");
mysql_select_db("inventory");
$qty = $_POST['QTY'];
$a = "SELECT pleft from productlist WHERE pdesc = $qty ";
$results = mysql_query($a);
if ($qty > $a)
{
echo '<script type="text/javascript">';
echo 'alert("WARNING: Product not enough ");';
echo 'window.location.href = "auto.php";';
echo '</script>';
}
?>
<td><input name="TOTAL" id="TOTAL" type="text" size="20" readonly="readonly"/></td>
</tr>
<tr>
<td>
<div class="cart">
<input name="submit" type="submit" value="Add to Cart" id="xx" style="cursor:pointer; margin-left: 230px; margin-top: 20px;" />
</div>
</td>
</tr>
</table>
</div>
</form>
</form>

<form action="addorder.php?id=<?php echo $_GET['id'] ? $_GET['id'] : 0?>" method="post" name="abc">
BEER
Pizza
Egg Pie
Ice Tea
Combo
<td><input name="QTY" id="QTY" type="text" onkeyup="multiply()" onkeypress="return checkIt(event)" size="20" /></td>
<?php
if( !empty($_POST['QTY'])){
$con = mysql_connect("localhost","root", "");
mysql_select_db("inventory");
$qty = $_POST['QTY'];
$a = "SELECT pleft from productlist WHERE pdesc = $qty wherer productlist.id = ".$_GET['id'];
$results = mysql_query($a);
$row = mysql_fetch_assoc( $results);
if ($qty > $row[0]['pleft'])
{
echo '<script type="text/javascript">';
echo 'alert("WARNING: Product not enough ");';
echo 'window.location.reload()';
echo '</script>';
}else{
/**
Do what ever you want
*/
}
}
?>
check your productlist table has a column named id

Related

Submit form does not work once table is transposed

I need to transpose/rotate a table, in order to view it better, however as soon as I transpose the table the submit button will now work any more
I have a table setup as follows
<table id="tableID" width="200" border="1">
<tbody>
<tr>
<td>Date</td>
<td>Boxed;</td>
<td>Location</td>
<td>Quantity</td>
<td>Change;</td>
</tr>
<?php do { ?>
<tr><form action="<?php echo $editFormAction; ?>" method="POST" enctype="multipart/form-data" name="form1" id="form1">
<td><?php echo $row_get['Date']; ?></td>
<td><?php echo $row_get['Boxed']; ?></td>
<td><input name="Location" type="text" id="Location" value="<?php echo $row_get['Location']; ?>" size="7" /></td>
<td><input name="Quantity" type="text" id="Quantity" value="<?php echo $row_get['Quantity']; ?>" size="7" /></td>
<td><input name="Update" type="submit" value="submit" id="Update" />
<input name="id" type="hidden" id="id" value="<?php echo $row_get['id']; ?>" />
</p>
<input type="hidden" name="MM_update" value="form1" />
</form></td>
</tr> <?php } while ($row_get ->fetch()); ?>
</tbody>
</table>
in the transpose table script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$("#tableID").each(function() {
var $this = $(this);
var newTransposedRow = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td").each(function(){
i++;
if(newTransposedRow[i] === undefined) { newTransposedRow[i] = $("<tr></tr>"); }
newTransposedRow[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newTransposedRow, function(){
$this.append(this);
});
});
});
</script>
Update DB:
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "form1")) {
$updateSQL = "UPDATE Stock SET Location=?, Quantity=? WHERE id=?";
$Result1= $conn->prepare($updateSQL) or die(errorInfo());
$done = $Result1->execute([$_POST['Location'], $_POST['Quantity'], $_POST['Trade_price'], $_POST['id']]);
if ($done){
header('Location: mypage.php
exit();
}
}
This all works fine until I use/insert the transposition script any idea what is stopping the update?
Any help welcome

How to update a text box in an HTML form when another text box is filled in?

I have created a form that has several fields. Among those fields are several weight fields. I have a ScaleInWeight, ScaleOutWeight, BOLWeight, ScaleWeight, and ScaleDiff. The first three are weights that are either entered or captured from the scale. The ScaleWeight is the difference between the ScaleInWeight and ScaleOutWeight, and the ScaleDiff is the difference between the BOLWeight and ScaleWeight. There are several other fields as well, but they don't matter for this, here is my form:
<form action="ScaleTimes.php" method="POST" enctype="multipart/form-data">
<table id="getApt" class="center">
<tr>
<td><input type="submit" class="OrderButton" name="findApt" value="Find"></td>
<td>Appointment Number<br><input type="text" name="AptNo" value="<?php if(isset($_POST['AptNo'])){ echo $_POST['AptNo'];} ?>" required autofocus="true"></td>
<td>Appointment Date<br><input type="date" name="AptDate" value="<?php if(isset($_POST['AptDate'])){ echo $_POST['AptDate'];} ?>"></td>
<td>Appointment Period<br>
<select name="AptPeriod">
<option value="">Select. . .</option>
<option value="3">6-8</option>
<option value="4">8-10</option>
<option value="5">10-12</option>
<option value="6">12-14</option>
<option value="7">14-16</option>
<option value="9">Open</option>
</select>
</td>
</tr>
<tr>
<td>Scale In Weight<br><input type="number" name="ScaleInWeight" value="<?php if(isset($_POST['ScaleInWeight'])){ echo $_POST['ScaleInWeight'];} ?>"></td>
<td>Scale In Date/Time<br><input type="datetime" name="ScaleInDateTime" value="<?php if(isset($_POST['ScaleInDateTime'])){ echo $_POST['ScaleInDateTime'];} ?>"></td>
<td>Scale In Weight<br><input type="number" name="ScaleOutWeight" value="<?php if(isset($_POST['ScaleOutWeight'])){ echo $_POST['ScaleOutWeight'];} ?>"></td>
<td>Scale Out Date/Time<br><input type="datetime" name="ScaleOutDateTime" value="<?php if(isset($_POST['ScaleOutDateTime'])){ echo $_POST['ScaleOutDateTime'];} ?>"></td>
</tr>
<tr>
<td>Customer<br><input type="text" name="Customer" value="<?php if(isset($_POST['Customer'])){ echo $_POST['Customer'];} ?>" autocomplete="on"></td>
<td>Carrier<br><input type="text" name="Carrier" value="<?php if(isset($_POST['Carrier'])){ echo $_POST['Carrier'];} ?>"></td>
<td>Driver<br><input type="text" name="Driver" value="<?php if(isset($_POST['Driver'])){ echo $_POST['Driver'];} ?>"></td>
<td>Weighed By<br>
<select name="WeighedBy">
<option value="">Select Name...</option>
<option value="Tia Rian">Tia Rian</option>
<option value="Bruce Tippy">Bruce Tippy</option>
</select>
</td>
</tr>
<tr>
<td>BOL Weight<br><input type="text" name="BOLWeight" value="<?php if(isset($_POST['BOLWeight'])){ echo $_POST['BOLWeight'];} ?>"></td>
<td>Scale Weight<br><input type="text" name="ScaleWeight" value="<?php if(isset($_POST['ScaleWeight'])){ echo $_POST['ScaleWeight'];} ?>" disabled></td>
<td>Scale Difference<br><input type="text" name="ScaleWeight" value="<?php if(isset($_POST['ScaleDiff'])){ echo $_POST['ScaleDiff'];} ?>" disabled></td>
</tr>
<tr>
<td>Truck Number<br><input type="text" name="TruckNo" value="<?php if(isset($_POST['TruckNo'])){ echo $_POST['TruckNo'];} ?>"></td>
<td>Trailer Number<br><input type="text" name="TrailerNo" value="<?php if(isset($_POST['TrailerNo'])){ echo $_POST['TrailerNo'];} ?>"></td>
<td>BOL Number<br><input type="text" name="BOLNo" value="<?php if(isset($_POST['BOLNo'])){ echo $_POST['BOLNo'];} ?>"></td>
<td>AX Purchase Order<br><input type="text" name="AxPurchaseOrder" value="<?php if(isset($_POST['AxPurchaseOrder'])){ echo $_POST['AxPurchaseOrder'];} ?>"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" class="OrderButton" name="submit" value="Submit"></td>
<td><input type="submit" class="OrderButton" name="reset" value="Reset"></td>
<td>Dashboard</td>
</tr>
</table>
</form>
What I am trying to figure out is how to update the ScaleWeight and ScaleDiff as the other weights are entered.
For example, when the ScaleInWeight is captured nothing happens.
When the ScaleOutWeight is then also captured then there should be a calculation that will give me the ScaleWeight (absolute value only)
Then when the BOLWeight is added to the form the ScaleDeff should also be calculated (absolute value only).
So if the ScaleInWeight is captured as 31920 and the ScaleOutWeight is captured as 74660 then the ScaleWeight should calculate to 42740.
When the BOLWeight is entered as 42731, then the ScaleDeff should calculate to 9.
EDIT
I have made a change to the form to add a function called UpdateInfo like so:
<form action="ScaleTimes.php" method="POST" enctype="multipart/form-data" name="ScaleTime">
<table id="getApt" class="center">
<tr>
<td><input type="submit" class="OrderButton" name="findApt" value="Find"></td>
<td>Appointment Number<br><input type="text" name="AptNo" value="<?php if(isset($_POST['AptNo'])){ echo $_POST['AptNo'];} ?>" required autofocus="true"></td>
<td>Appointment Date<br><input type="date" name="AptDate" value="<?php if(isset($_POST['AptDate'])){ echo $_POST['AptDate'];} ?>"></td>
<td>Appointment Period<br>
<select name="AptPeriod">
<option value="">Select. . .</option>
<option value="3">6-8</option>
<option value="4">8-10</option>
<option value="5">10-12</option>
<option value="6">12-14</option>
<option value="7">14-16</option>
<option value="9">Open</option>
</select>
</td>
</tr>
<tr>
<td>Scale In Weight<br><input type="number" name="ScaleInWeight" value="<?php if(isset($_POST['ScaleInWeight'])){ echo $_POST['ScaleInWeight'];} ?>" onchange="UpdateInfo()"></td>
<td>Scale In Date/Time<br><input type="datetime" name="ScaleInDateTime" value="<?php if(isset($_POST['ScaleInDateTime'])){ echo $_POST['ScaleInDateTime'];} ?>"></td>
<td>Scale In Weight<br><input type="number" name="ScaleOutWeight" value="<?php if(isset($_POST['ScaleOutWeight'])){ echo $_POST['ScaleOutWeight'];} ?>" onchange="UpdateInfo()"></td>
<td>Scale Out Date/Time<br><input type="datetime" name="ScaleOutDateTime" value="<?php if(isset($_POST['ScaleOutDateTime'])){ echo $_POST['ScaleOutDateTime'];} ?>"></td>
</tr>
<tr>
<td>Customer<br><input type="text" name="Customer" value="<?php if(isset($_POST['Customer'])){ echo $_POST['Customer'];} ?>" autocomplete="on"></td>
<td>Carrier<br><input type="text" name="Carrier" value="<?php if(isset($_POST['Carrier'])){ echo $_POST['Carrier'];} ?>"></td>
<td>Driver<br><input type="text" name="Driver" value="<?php if(isset($_POST['Driver'])){ echo $_POST['Driver'];} ?>"></td>
<td>Weighed By<br>
<select name="WeighedBy">
<option value="">Select Name...</option>
<option value="Tia Rian">Tia Rian</option>
<option value="Bruce Tippy">Bruce Tippy</option>
</select>
</td>
</tr>
<tr>
<td>BOL Weight<br><input type="text" name="BOLWeight" value="<?php if(isset($_POST['BOLWeight'])){ echo $_POST['BOLWeight'];} ?>" onchange="UpdateInfo()"></td>
<td>Scale Weight<br><input type="text" name="ScaleWeight" value="<?php if(isset($_POST['ScaleWeight'])){ echo $_POST['ScaleWeight'];} ?>" disabled onchange="UpdateInfo()"></td>
<td>Scale Difference<br><input type="text" name="ScaleWeight" value="<?php if(isset($_POST['ScaleDiff'])){ echo $_POST['ScaleDiff'];} ?>" disabled></td>
</tr>
<tr>
<td>Truck Number<br><input type="text" name="TruckNo" value="<?php if(isset($_POST['TruckNo'])){ echo $_POST['TruckNo'];} ?>"></td>
<td>Trailer Number<br><input type="text" name="TrailerNo" value="<?php if(isset($_POST['TrailerNo'])){ echo $_POST['TrailerNo'];} ?>"></td>
<td>BOL Number<br><input type="text" name="BOLNo" value="<?php if(isset($_POST['BOLNo'])){ echo $_POST['BOLNo'];} ?>"></td>
<td>AX Purchase Order<br><input type="text" name="AxPurchaseOrder" value="<?php if(isset($_POST['AxPurchaseOrder'])){ echo $_POST['AxPurchaseOrder'];} ?>"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" class="OrderButton" name="submit" value="Submit"></td>
<td><input type="submit" class="OrderButton" name="reset" value="Reset"></td>
<td>Dashboard</td>
</tr>
</table>
</form>
And then added the function like this:
<script type="text/javascript">
$(document).ready(function () {
$('#ScaleWeight').change(UpdateInfo);
$('#ScaleDiff').change(UpdateInfo);
});
function UpdateInfo() {
var ScaleInWeight = $('#ScaleInWeight').val();
var ScaleOutWeight = $('#ScaleOutWeight').val();
var BOLWeight = $('#BOLWeight').val();
var calScaleWeight = ScaleInWeight - ScaleOutWeight;
var calScaleDiff = BOLWeight - calScaleWeight;
$('#ScaleWeight').val(calScaleWeight);
$('#ScaleDiff').val(calScaleDiff);
}
</script>
When I test this out though nothing happens. What am I missing? Also, how would I make that so I get the absolute value so it is alway spositive?
With #ADyson 's help, I was able to get this figured out. Here is what I did:
The form (yes this could be better with a css class instead of several change events declared, but I haven't done that yet):
<form action="ScaleTimes.php" method="POST" enctype="multipart/form-data" name="ScaleTime">
<table id="getApt" class="center">
<tr>
<td><input type="submit" class="OrderButton" name="findApt" value="Find"></td>
<td>Appointment Number<br><input type="text" name="AptNo" value="<?php if(isset($_POST['AptNo'])){ echo $_POST['AptNo'];} ?>" required autofocus="true"></td>
<td>Appointment Date<br><input type="date" name="AptDate" value="<?php if(isset($_POST['AptDate'])){ echo $_POST['AptDate'];} ?>"></td>
<td>Appointment Period<br>
<select name="AptPeriod">
<option value="">Select. . .</option>
<option value="3">6-8</option>
<option value="4">8-10</option>
<option value="5">10-12</option>
<option value="6">12-14</option>
<option value="7">14-16</option>
<option value="9">Open</option>
</select>
</td>
</tr>
<tr>
<td>Scale In Weight<br><input type="number" id="ScaleInWeight" name="ScaleInWeight" value="<?php if(isset($_POST['ScaleInWeight'])){ echo $_POST['ScaleInWeight'];} ?>" onchange="UpdateInfo()"></td>
<td>Scale In Date/Time<br><input type="datetime" name="ScaleInDateTime" value="<?php if(isset($_POST['ScaleInDateTime'])){ echo $_POST['ScaleInDateTime'];} ?>"></td>
<td>Scale In Weight<br><input type="number" id="ScaleOutWeight" name="ScaleOutWeight" value="<?php if(isset($_POST['ScaleOutWeight'])){ echo $_POST['ScaleOutWeight'];} ?>" onchange="UpdateInfo()"></td>
<td>Scale Out Date/Time<br><input type="datetime" name="ScaleOutDateTime" value="<?php if(isset($_POST['ScaleOutDateTime'])){ echo $_POST['ScaleOutDateTime'];} ?>"></td>
</tr>
<tr>
<td>Customer<br><input type="text" name="Customer" value="<?php if(isset($_POST['Customer'])){ echo $_POST['Customer'];} ?>" autocomplete="on"></td>
<td>Carrier<br><input type="text" name="Carrier" value="<?php if(isset($_POST['Carrier'])){ echo $_POST['Carrier'];} ?>"></td>
<td>Driver<br><input type="text" name="Driver" value="<?php if(isset($_POST['Driver'])){ echo $_POST['Driver'];} ?>"></td>
<td>Weighed By<br>
<select name="WeighedBy">
<option value="">Select Name...</option>
<option value="Tia Rian">Tia Rian</option>
<option value="Bruce Tippy">Bruce Tippy</option>
</select>
</td>
</tr>
<tr>
<td>BOL Weight<br><input type="text" id="BOLWeight" name="BOLWeight" value="<?php if(isset($_POST['BOLWeight'])){ echo $_POST['BOLWeight'];} ?>" onchange="UpdateInfo()"></td>
<td>Scale Weight<br><input type="text" id="ScaleWeight" name="ScaleWeight" value="<?php if(isset($_POST['ScaleWeight'])){ echo $_POST['ScaleWeight'];} ?>" disabled onchange="UpdateInfo()"></td>
<td>Scale Difference<br><input type="text" id="ScaleDiff" name="ScaleDiff" value="<?php if(isset($_POST['ScaleDiff'])){ echo $_POST['ScaleDiff'];} ?>" disabled></td>
</tr>
<tr>
<td>Truck Number<br><input type="text" name="TruckNo" value="<?php if(isset($_POST['TruckNo'])){ echo $_POST['TruckNo'];} ?>"></td>
<td>Trailer Number<br><input type="text" name="TrailerNo" value="<?php if(isset($_POST['TrailerNo'])){ echo $_POST['TrailerNo'];} ?>"></td>
<td>BOL Number<br><input type="text" name="BOLNo" value="<?php if(isset($_POST['BOLNo'])){ echo $_POST['BOLNo'];} ?>"></td>
<td>AX Purchase Order<br><input type="text" name="AxPurchaseOrder" value="<?php if(isset($_POST['AxPurchaseOrder'])){ echo $_POST['AxPurchaseOrder'];} ?>"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" class="OrderButton" name="submit" value="Submit"></td>
<td><input type="submit" class="OrderButton" name="reset" value="Reset"></td>
<td>Dashboard</td>
</tr>
</table>
</form>
Then there is the JavaScript:
<script type="text/javascript">
$(document).ready(function () {
$('#ScaleWeight').change(UpdateInfo);
$('#ScaleDiff').change(UpdateInfo);
});
function UpdateInfo() {
var ScaleInWeight = $('#ScaleInWeight').val();
var ScaleOutWeight = $('#ScaleOutWeight').val();
var BOLWeight = $('#BOLWeight').val();
var calScaleWeight = ScaleInWeight - ScaleOutWeight;
var calScaleDiff = BOLWeight - Math.abs(calScaleWeight);
$('#ScaleWeight').val(Math.abs(calScaleWeight));
$('#ScaleDiff').val(Math.abs(calScaleDiff));
}
</script>
Because I only need the differences and I don't care if they are negative I am using the absolute value in my calculations.

Only the top most tr/td getting affected

I am having a table, where in the data is getting fetched dynamically from the database. The issue I am facing is no matter which row I try to check, the result occurs only in the first tr/td. I will post the code for the table and the JS below:
<?php
foreach( $paid_products as $product)
{
$price = empty($product->sales_price)?$product->price:$product->sales_price;
$ingredients = empty($product->ingredients)?$product->ingredients:$product->ingredients;
$quantity = empty($product->quantity)?0:$product->quantity;
$discount = empty($product->discount)?0:($product->discount);
$discount_amount = empty($product->discount_amount)?0:($product->discount_amount);
$discounted_amount = empty($product->discounted_amount)?0:($product->discounted_amount);
$total_quantity = empty($product->product_quantity)?0:($product->product_quantity);
$product_ordered = empty($product->product_ordered)?0:($product->product_ordered);
$quantity_available = $total_quantity - $product_ordered;
$subtotal = $price*$quantity; ?>
<tr class="calc">
<td title="Ingredients: <?php echo $product->ingredients; ?>"><?php echo $product->name; ?></td>
<td title="Reason for price change:" <?php echo !empty($product->product_message)?' '.$product->product_message.'"':''; ?>>
<input style="width:100%; text-align:right; padding-right:5px;" type="text" name="paid_product_price[]" class="price paidShowMessage" value="<?php echo $price; ?>">
<input type="text" class="paid_product_message" name="paid_product_message[]" value="<?php echo $product->product_message; ?>">
</td>
<td title="Reason for discount:" <?php echo !empty($product->product_dmessage)?' '.$product->product_dmessage.'"':''; ?>>
<input style="width:100%; text-align:right; padding-right:5px;" type="text" name="paid_product_dscnt[]" class="dscnt spidEdit paidShowDMessage" value="<?php echo $discount; ?>">
<!--<input type="text" name="paid_product_dscnt[]" class="dscnt spidEdit" value="<?php //echo $discount; ?>" data-min="0" data-max="<?php //echo $product->max; ?> ">-->
<input type="text" class="paid_product_dmessage" name="paid_product_dmessage[]" value="<?php echo $product->product_dmessage; ?>">
</td>
<td>
<input type="text" name="paid_product_dscnt_amt[]" class="dscnt_amt spidEdit" value="<?php echo $discount_amount; ?>" data-min="0" data-max="<?php echo $product->max; ?> ">
</td>
<td>
<input type="hidden" name="paid_product_id[]" value="<?php echo $product->product_id; ?>">
<input type="hidden" value="<?php echo $quantity_available; ?>" class="qa">
<input type="text" name="paid_product_qty[]" onkeyup="backOrder()" class="qty spinEdit" value="<?php echo $quantity; ?>" data-min="0" data-max="<?php echo $product->max; ?>" >
</td>
<!--data-min="0"-->
<td>
<input type="text" class="bo spidEdit" id="quav" value="<?php echo $quantity_available;?>">
</td>
<td title="Back Order Quantity:">
<input style="width:100%; text-align:right; padding-right:5px;" id="qupe" type="text" name="paid_product_bo[]" class="boShowMessage" value="">
</td>
<td style="text-align:right; padding-right:5px;">
<input type="text" class="total" name="paid_product_dscnted_amt[]" value="<?php echo $discounted_amount; ?>" readonly>
</td>
</tr>
<?php
} ?>
function backOrder() {
var quav = document.getElementById("quav");
var qupe = document.getElementById("qupe");
qupe.value = -1 * (quav.value);
}
You can't have multiple elements with the same ID. You have to use class attribute, and in JavaScript select the elements using document.getElementsByClassName() and iterate over them.
id values must be unique in the document. If you have to use something to idenitfy multiple elements, don't use an id. Other things you could use are class or any data-* attribute.
If using class, you'd use querySelectorAll(".the-class") or getElementsByClassName("the-class") and loop over the resulting collection. If using a data-* attribute, you'd use querySelectorAll('[data-attr-name="attr-value"]') and, again, loop over the resulting collection.
For example, your rows have class calc, and so we can use that and look within each row for the qupe and quav:
function backOrder() {
Array.prototype.forEach.call(document.querySelectorAll(".calc"), function(row) {
var quav = row.querySelector(".quav");
var qupe = row.querySelector(".qupe");
qupe.value = -1 * quav.value;
});
}
backOrder();
<table>
<tbody>
<tr class="calc">
<td>
<label>
Quav 1
<input type="text" class="quav" value="1">
</label>
</td>
<td>
<label>
Qupe 1
<input type="text" class="qupe" value="1">
</label>
</td>
</tr>
<tr class="calc">
<td>
<label>
Quav 2
<input type="text" class="quav" value="2">
</label>
</td>
<td>
<label>
Qupe 2
<input type="text" class="qupe" value="2">
</label>
</td>
</tr>
<tr class="calc">
<td>
<label>
Quav 3
<input type="text" class="quav" value="3">
</label>
</td>
<td>
<label>
Qupe 3
<input type="text" class="qupe" value="3">
</label>
</td>
</tr>
</tbody>
</table>
Normally, though, when dealing with pairs of elements like that, it's best to identify a container they have in common.
<?php
$count = 0;
foreach( $paid_products as $product){
$price = empty($product->sales_price)?$product->price:$product->sales_price;
$ingredients = empty($product->ingredients)?$product->ingredients:$product->ingredients;
$quantity = empty($product->quantity)?0:$product->quantity;
$discount = empty($product->discount)?0:($product->discount);
$discount_amount = empty($product->discount_amount)?0:($product->discount_amount);
$discounted_amount = empty($product->discounted_amount)?0:($product->discounted_amount);
$total_quantity = empty($product->product_quantity)?0:($product->product_quantity);
$product_ordered = empty($product->product_ordered)?0:($product->product_ordered);
$quantity_available = $total_quantity - $product_ordered;
$subtotal = $price*$quantity;
$count++;
?>
<tr class="calc">
<td title="Ingredients: <?php echo $product->ingredients; ?>"><?php echo $product->name; ?></td>
<td title="Reason for price change:" <?php echo !empty($product->product_message)?' '.$product->product_message.'"':''; ?>>
<input style="width:100%; text-align:right; padding-right:5px;" type="text" name="paid_product_price[]" class="price paidShowMessage" value="<?php echo $price; ?>">
<input type="text" class="paid_product_message" name="paid_product_message[]" value="<?php echo $product->product_message; ?>">
</td>
<td title="Reason for discount:" <?php echo !empty($product->product_dmessage)?' '.$product->product_dmessage.'"':''; ?>>
<input style="width:100%; text-align:right; padding-right:5px;" type="text" name="paid_product_dscnt[]" class="dscnt spidEdit paidShowDMessage" value="<?php echo $discount; ?>">
<!--<input type="text" name="paid_product_dscnt[]" class="dscnt spidEdit" value="<?php //echo $discount; ?>" data-min="0" data-max="<?php //echo $product->max; ?> ">-->
<input type="text" class="paid_product_dmessage" name="paid_product_dmessage[]" value="<?php echo $product->product_dmessage; ?>">
</td>
<td><input type="text" name="paid_product_dscnt_amt[]" class="dscnt_amt spidEdit" value="<?php echo $discount_amount; ?>" data-min="0" data-max="<?php echo $product->max; ?> "></td>
<td ><input type="hidden" name="paid_product_id[]" value="<?php echo $product->product_id; ?>"><input type="hidden" value="<?php echo $quantity_available; ?>" class="qa">
<input type="text" name="paid_product_qty[]" onkeyup="backOrder(<?php echo $count; ?>)" class="qty spinEdit" value="<?php echo $quantity; ?>" data-min="0" data-max="<?php echo $product->max; ?>" ></td><!--data-min="0"-->
<td><input type="text" class="bo spidEdit" id="quav_<?php echo $count; ?>" value="<?php echo $quantity_available;?>"></td>
<td title="Back Order Quantity:">
<input style="width:100%; text-align:right; padding-right:5px;" id="qupe_<?php echo $count; ?>" type="text" name="paid_product_bo[]" class="boShowMessage" value=""></td>
<td style="text-align:right; padding-right:5px;"><input type="text" class="total" name="paid_product_dscnted_amt[]" value="<?php echo $discounted_amount; ?>" readonly></td>
</tr>
<?php } ?>
<script>
function backOrder(id)
{
var quav = document.getElementById("quav_" + id);
var qupe = document.getElementById("qupe_" + id);
qupe.value = -1 * (quav.value);
}
</script>

How to remove form field entrys

I have a form that is filled with an database output. Before processing it the user can change the values when required.
How can I remove all entries with on click from column 'Aantal'
<tr>
<td><img border="0" align="center" src="<?php echo $config['prod_image'].$image_fld[$i].'/'.$image_name[$i].$config['prod_image_type']; ?>" /></td>
<td><input type="text" name="aantal[]" size="2" value="<?php echo $aantal[$i]; ?>" <?php if($error_aantal[$i] == 'ja'){ $error_omschr = $error_omschr_aantal[$i]; include('includes/errors/input_error.php'); } ?></td>
<td><input type="text" name="productnaam[]" size="35" value="<?php echo $productnaam[$i]; ?>" style="background-color: #e7e7e9" readonly="readonly" /></td>
<td><input type="text" name="afmeting[]" size="15" value="<?php echo $afmeting[$i]; ?>" style="background-color: #e7e7e9" readonly="readonly" /></td>
<td><input type="text" name="kwaliteit[]" size="15" value="<?php echo $kwaliteit[$i]; ?>" style="background-color: #e7e7e9" readonly="readonly" /></td>
<td align="center">
<input type="radio" name="garantie[<?php echo $i ?>]" <?php if ("nee" == $garantie[$i]) { echo 'checked="checked"'; } ?> value="nee">
<input type="radio" name="garantie[<?php echo $i ?>]" <?php if("ja" == $garantie[$i]) { echo 'checked="checked"'; } ?> value="ja">
<?php if($error_garantie[$i] == 'ja'){
$error_omschr = $error_omschr_garantie[$i]; include('includes/errors/input_error.php');
} ?>
</td>
</tr>
I hope I understood you correctly:
In your php file, that handles the form, make sure you're adding a class attribute to that column.
Also you should add a button or an element that clicking on it will trigger the hiding action.
For instance:
<td><input type="text" class="aantal" name="aantal[]" size="2" value="<?php echo $aantal[$i]; ?>" <?php if($error_aantal[$i] == 'ja'){ $error_omschr = $error_omschr_aantal[$i]; include('includes/errors/input_error.php'); } ?></td>
Later on:
<button id="myHidingButton">Click to hide aantal inputs.</button>
Then, using JS you can write:
var button = document.getElementById("myHidingButton"); //The button.
button.addEventListener("click",function(e){ //The onClick event.
//Get the element with the `aantal` class name and define the `i` variable.
var colToHide = document.getElementsByClassName('aantal'), i;
//Loop through all the aantal elements and hide them.
for (var i = 0; i < colToHide.length; i ++) {
colToHide[i].style.display = 'none';
}
},false);
To remove all aantal entries when pressing a button:
// Using jQuery
$("#reset_btn").click(function() {
$("input[name='aantal[]']").val("0");
});
// pure javascript
document.getElementById("reset_btn").addEventListener("click", function() {
Array.prototype.forEach.call(document.querySelectorAll("input[name='aantal[]']"), function(node) {
node.value = "0";
});
}, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="aantal[]" size="2" value="1" />
<input type="text" name="aantal[]" size="2" value="2" />
<input type="text" name="aantal[]" size="2" value="3" />
<button id="reset_btn">Reset</button>
<script type="text/javascript"</script>
function reset_aantal()
{
var i, totaal = 0;
var elems = document.getElementsByName('aantal[]');
var l = elems.length;
for(i=0; i<l; i++)
{
document.getElementsByName('aantal[]')[i].value = '';
}
}
</script>

javascript keypress event and php

HTML code :
<td><input type="text" name="flat[]" class="" value="<?php echo $row_pdetails["flat"]; ?>" /></td>
<td><input type="text" name="new_price[]" class="" value="<?php echo $row_pdetails["price"]; ?>" /></td>
<td><input type="text" name="org_price[]" class="" value="<?php echo $row_pdetails["org_price"]; ?>" readonly/></td>
<td><input type="submit" name="save" value="save"/></td>
PHP code :
<?php
if(isset($_POST["save"]))
{
for($i=0;$i<count($_POST["org_price"]); $i++)
{
$org_price=$_POST["org_price"][$i];
$new_price=$_POST["new_price"][$i];
mysql_query("update tb_party_rate_entry set price='$new_price' where (party_id='$p_id' && org_price='$org_price')");
}
}
Here in this code I'm fetching the value of new_price[] and org_price[] from the database using a while loop, and for updating these values in the database I've used a for loop as in my PHP code.
Now what I want is that whenever I enter any value in flat[] textbox, that same value should simultaneously be entered in new_price[] textbox using keypress event. When I enter value in 1st row's flat price it should be entered in first row's new_price[], when I enter value in 2nd row's flat price it should be entered in second row's new_price[], and in keypress event.
Please help.
You should use onchange event on flat[] and set the value of new_price[] consequently.
Something like
$('input[name="flat[]"]').on('keyup',function(e) {
$( this ).siblings('input[name="new_price[]"]:first').val ( $(this).val() );
});
Note:
I used siblings because i assume you will have different rows with the same input name, in this way you only update the right element
Test Here: http://jsfiddle.net/qsDn5/3/
Html
<div>
<tr>
<td>flat1:<input type="text" name="flat[]" class="flat" value=""/></td>
<td>price1:<input type="text" name="new_price[]" class="new_price" value=""/></td>
<td><input type="text" name="org_price[]" class="" value=""</td>
</tr>
</div>
<div>
<tr>
<td>flat2:<input type="text" name="flat[]" class="flat" value=""/></td>
<td>price2:<input type="text" name="new_price[]" class="new_price" value=""/></td>
<td><input type="text" name="org_price[]" class="" value=""</td>
</tr>
</div>
<p><input type="submit" name="save" value="save"/></p>
Jquery
$(document).ready(function(){
$('.flat').on('keyup',function(e) {
$( this ).siblings(".new_price").eq(0).val ( $(this).val() );
});
});
FIDDLE (see demo)
Try this:
note that i add rel attribute in html and created unique id for textbox.means every textbox have a unique id.
<?php
$i = "1";
while(//$row=...){
?>
<td><input type="text" name="flat[]" id="flat<?php echo $i;?>" rel="<?php echo $i;?>" class="flat" value="<?php echo $row_pdetails["flat"]; ?>" /></td>
<td><input type="text" name="new_price[]" id="newprice<?php echo $i;?>" rel="<?php echo $i;?>" class="new_price" value="<?php echo $row_pdetails["price"]; ?>" /></td>
<td><input type="text" name="org_price[]" id="orgprice<?php echo $i;?>" rel="<?php echo $i;?>" class="org_price" value="<?php echo $row_pdetails["org_price"]; ?>" readonly/></td>
<?php $i++;} ?>
<td><input type="submit" name="save" value="save"/></td>
JQuery:
when user try to enter some thing in flat textbox, we get it's rel and it's value.using the rel's value we found related newprice textbox.
$(document).on('keyup','.flat',function(){
var rel = $(this).attr('rel');
var flatvalue = $(this).val();
$("#newprice"+rel).val(flatvalue);
});

Categories

Resources