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>
Related
Screenshot:
I want to add the same value to a table row input field, but JavaScript working for first row only. Please help me with this .
My table is
<tr align="center">
<td align="center"><input type="checkbox" name="prodid[]" value="<?php echo $row["name"]; ?>"></td>
<td align="center"><?php echo $row["name"]; ?>
<input type="hidden" name="prodname[]" value="<?php echo $row["name"]; ?>">
</td>
<td align="center"><input align="center" type="number" name="prod_price[]" value="<?php echo $row["price"]; ?>" class="form-control"><input type="hidden" class="iprice" value="<?php echo $row["price"]; ?>"></td>
<td align="center"><input type="number" class="form-control iquantity" onchange="Subtotal()" type="number" name="prod_qty[]" class="form-control"></td>
<td align="center"><input type="number" class="eachnumber" id="eachnumber" name="prodsname[]" ></td>
<td class="itotal" align="center">0</td>
</tr>
passes the value from
<input type="number" id="number" class="form-control form-control-solid ps-12" placeholder="number"/>
javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha512-jGR1T3dQerLCSm/IGEGbndPwzszJBlKQ5Br9vuB0Pw2iyxOy+7AK+lJcCC8eaXyz/9du+bkCy4HXxByhxkHf+w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js" integrity="sha512-1icA56H/QfnWMmygJLor4dORvI+7Kurg9CfXSDeJmyMJQL98LfPRk/UwCmi7NoZwbUwxMoI0tc2gJqG/Uu+ecA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$('#number').change(function() {
for (i = 0; i < eachnumber.length; i++) {
$('#eachnumber').val($(this).val());
}
});
</script>
If you want to add that value in eachnumber of all the rows then you can simply do this.
$('#number').change(function() {
$('.eachnumber').val($(this).val());
});
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
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>
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
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);
});