Submit form does not work once table is transposed - javascript

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

Related

unable to submit form data using ajax?

i am very new to php and have no idea of javascript, have done all js work using tutorials.Also tried to use existing solutions from stackoverflow, but no success !
What i am trying to do is trying to update database values using 'submit' button on the basis of values called from 'select option'.
Problem is that no data is getting updated in DB after i click on submit button (on viewtest.php), I have also tried to add the 'update.php' to form action.
Here's the screenshot of viewtest.php
here's my code:
viewtest.php
<form method="POST" action="">
<table border="1px"><tr> <td>
<select required name="tstname" id="test" onChange="fetch_ques()">
<option> Select Test Name</option>
<?php
$res=mysqli_query($connection,"select * from test_detail");
while($row=mysqli_fetch_array($res))
{
?>
<option value="<?php echo $row["test_name"]; ?>">
<?php echo
$row["test_name"]; echo' - - ['. $row['test_category'].']'; ?> </option>
<?php
}
?>
</select>
</div>
<td>
<div id="qnos"><select></select></div></td></tr>
<tr><td colspan="2" align="center">
<input type="submit" name="btnSubmit" id="vform" value="Update Question"> </td></tr>
</form>
</table>
<div id="ques"></div>
<script type="text/javascript">
function fetch_ques()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","getq.php?
tstnm="+document.getElementById("test").value,false); // function id
xmlhttp.send(null);
document.getElementById("qnos").innerHTML=xmlhttp.responseText; // div id
}
function display_ques()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","displayq.php?
qnos="+document.getElementById("quesdd").value,false);
xmlhttp.send(null);
document.getElementById("ques").innerHTML=xmlhttp.responseText;
}
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#vform").submit(); (function()
// document.getElementById("vform").submit();(function()
{
location.href='update.php?
qno='+$("#quesno").val()+'&qn='+$("#ques").val()+'&c1='+$("#a1").val()+'&c2='+$
("#a2").val()+'&c3'+$("#a3").val()+'&c4='+$("#a4").val()+'&cr='+$("#cr").val();
});
});
</script>
<?php
if(isset($_GET['st']) && $_GET['st'] !== "")
{
echo"updated";
}
else echo "Error: ".mysqli_errno();
?>
displayq.php //Used to fetch data in select menu
<?php
include '../connect.php';
$quesno=$_GET["qnos"];
if($quesno!="")
{
$qry=mysqli_query($connection,"select * from quesadd where quesid='$quesno'");
echo "<table name='ques'>";
while($ftc=mysqli_fetch_array($qry))
{
?>
<form method="POST" action="">
<table name="ques">
<tr><td align="center" colspan="2"> <!-- // Comment <input type="submit" name="submit" id="upq" value="Update Question">--></td> </tr>
<tr> <td align="center"> <b> Question : <input type="text" id="quesno" value="<?php echo $ftc["quesid"];?>" disabled></b></td>
<td> <textarea name="ques" id="ques" cols="100" rows="3" placeholder="Please Input The Question Here !"> <?php echo $ftc['ques'];?></textarea> </td> </tr>
<tr> <td width="25%" align="center" colspan="2"> <br> <b>Choices</b> </td> </tr>
<tr> <td align="center" colspan="2"><b>1.</b> <input type="text" id="a1" name="a1" value="<?php echo $ftc['c1'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>2.</b> <input type="text" id="a2" size="20px" name="a2" value="<?php echo $ftc['c2'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>3.</b> <input type="text" id="a3" size="20px" name="a3" value="<?php echo $ftc['c3'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>4.</b> <input type="text" id="a4" size="20px" name="a4" value="<?php echo $ftc['c4'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b><font color="maroon">Correct Answer</font></b> <input type="text" size="20px" id="cr" name="correct" value="<?php echo $ftc['answer'];?>"> </td> </tr>
</table>
</form>
<?php
}
echo "</table>";
}
?>
</tr> </td>
</table>
</form>
update.php //Used to update question by getting values from 'viewtest.php'
<?php
include '../connect.php';
$qn=$_GET['qno'];
$qname=$GET['qn'];
$a1=$GET['c1'];
$a2=$GET['c2'];
$a3=$GET['c3'];
$a4=$GET['c4'];
$acr=$GET['cr'];
$update=mysqli_query($connection,"update quesadd SET ques='$qname',
c1='$a1',c2='$a2',c3='$a3',c4='$a4',answer='$acr' where quesid='$qn' ");
if($update==true)
{
header('location:viewtest.php?st=true');
}
?>
I can see multiple problems, don't know if all the problems will go away but it will help.
$("#vform").submit(); (function()
The line above says if a <form> with the id="vform" has been submitted, execute this function. Your form does not have an id so it will never trigger. One other problem is that the function is not part of the trigger. It should be something like
$("#vform").submit(function()
The complete code could look like:
<script type="text/javascript">
$(document).ready(function(){
$("#vform").submit(function(e){
e.preventDefault();
location.href='update.php?qno='+$("#quesno").val()+'&qn='+$("#ques").val()+'&c1='+$("#a1").val()+'&c2='+$("#a2").val()+'&c3'+$("#a3").val()+'&c4='+$("#a4").val()+'&cr='+$("#cr").val();
return false;
});
});
</script>
Use AJAX to submit your form and refresh/redirect the page with javascript.
viewtest.php
<?php
include '../connect.php';
?>
<form method="POST" action="">
<table border="1px">
<tr>
<td>
<select required name="tstname" onchange="display_ques()" id="test">
<option> Select Test Name</option>
<?php
$res = mysqli_query($connection, "select * from test_detail");
while ($row = mysqli_fetch_array($res)) {
?>
<option value="<?php echo $row["test_id"]; ?>">
<?php echo
$row["test_name"];
echo ' - - [' . $row['test_category'] . ']'; ?> </option>
<?php
}
?>
</select>
</td>
<td>
<div id="qnos">
<select>
<!-- put code here for showing question id/number -->
</select></div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="btnSubmit" id="vform" value="Update Question"></td>
</tr>
</table>
</form>
<div id="ques"></div>
<h1 id="status"></h1>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function display_ques() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("ques").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "displayq.php?qnos=" + document.getElementById("test").value, true);
xmlhttp.send(null);
}
function fetch_ques() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "getq.php?tstnm = " + document.getElementById("test").value, false); // function id
xmlhttp.send(null);
document.getElementById("qnos").innerHTML = xmlhttp.responseText; // div id
}
$(document).ready(function () {
$('#vform').on('click', function (e) {
e.preventDefault();
var data = $('form#update').serialize();
$.post('update.php', data, function (response) {
// response is the data returned from php echo json_encode(['results' => true/false]), from update.php
var res = JSON.parse(response);
if (res.results == true) {
$('#status').html('Data was updated');
} else {
$('#status').html('Error occured while trying to update data.');
console.log(response);
}
});
});
});
</script>
I have given your form and id to be able to serialize it using jQuery and I have also added a hidden input to hold the id of the current question.
displayq.php
<?php
include '../connect.php';
$quesno = $_GET["qnos"];
if($quesno != "") : ?>
<form id="update" method="POST" action=""> <!-- added an id to the form -->
<table name="ques">
<?php
$qry = mysqli_query($connection,"select * from quesadd where quesid='$quesno'");
while($ftc = mysqli_fetch_array($qry)) : ?>
<tr><td align="center" colspan="2"> <!-- // Comment <input type="submit" name="submit" id="upq" value="Update Question">--></td> </tr>
<tr> <td align="center"> <b> Question : <input type="text" id="quesno" value="<?php echo $ftc["quesid"];?>" disabled></b></td>
<td> <textarea name="ques" id="ques" cols="100" rows="3" placeholder="Please Input The Question Here !"> <?php echo $ftc['ques'];?></textarea> </td> </tr>
<!-- added this hidden input to hold the question number -->
<input type="text" id="quesno" name="quesno" value="<?php echo $ftc["quesid"];?>" hidden>
<tr> <td width="25%" align="center" colspan="2"> <br> <b>Choices</b> </td> </tr>
<tr> <td align="center" colspan="2"><b>1.</b> <input type="text" id="a1" name="a1" value="<?php echo $ftc['c1'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>2.</b> <input type="text" id="a2" size="20px" name="a2" value="<?php echo $ftc['c2'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>3.</b> <input type="text" id="a3" size="20px" name="a3" value="<?php echo $ftc['c3'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>4.</b> <input type="text" id="a4" size="20px" name="a4" value="<?php echo $ftc['c4'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b><font color="maroon">Correct Answer</font></b> <input type="text" size="20px" id="cr" name="correct" value="<?php echo $ftc['answer'];?>"> </td> </tr>
<?php endwhile; ?>
</table>
</form>
<?php endif; ?>
Then in your update.php you can access the values using $_POST
<?php
include '../connect.php';
$qn = trim($_POST['quesno']);
$qname = trim($_POST['ques']);
$a1 = trim($_POST['a1']);
$a2 = trim($_POST['a2']);
$a3 = trim($_POST['a3']);
$a4 = trim($_POST['a4']);
$acr = trim($_POST['correct']);
$sql = "update quesadd SET ques='$qname', c1='$a1',c2='$a2',c3='$a3',c4='$a4',answer='$acr' where quesid='$qn'";
if (mysqli_query($connection, $sql)) {
// returning data to jQuery, as response
// jQuery will parse this as json {results: true}
echo json_encode(['results' => true]);
} else {
// returning data to jQuery, as response
// jQuery will parse this as json {results: false}
echo json_encode(['results' => false]);
}

jQuery function run just in first row

I already fetched all values from database into table
foreach ( $result as $print ) {
?>
<form method="post">
<tr>
<td>Edit</td>
</tr>
<tr>
<div class="edit-box1">
<input id="idd" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
<input type="submit" value="GO" name="edit-go">
</div>
</tr>
</form>
}
And this is the jQuery code:
jQuery(document).ready(
function() {
jQuery("#edit-btn").click(function() {
jQuery("#idd").prop("readonly", false);
});
});
The problem is that I got 20 rows and my edit button just run on my first row.
How can I make my jQuery run on all rows ?
This will be your HTML
$cnt=0;
foreach ( $result as $print ) {
?>
<form method="post">
<tr>
<td><a href="#" class="edit-button" id='<?php echo $cnt;?>'>Edit</a></td>
</tr>
<tr>
<div class="edit-box1">
<input id="idd<?php echo $cnt;?>" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
<input type="submit" value="GO" name="edit-go">
<?php $cnt++; ?>
</div>
</tr>
</form>
}
This will be your jquery code
<script>
jQuery(document).ready(
function() {
jQuery(".edit-button").click(function() {
jQuery("#idd"+$(this).attr("id")).prop("readonly", false);
});
});
</script>
Hope this will work surely.
Id cannot be used more than once, use class instead, try this code:
<?php foreach($result as $print): ?>
<form method="post" class="form">
<tr>
<td>Edit</td>
</tr>
<tr>
<div class="edit-box1">
<input class="idd" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
<input type="submit" value="GO" name="edit-go">
</div>
</tr>
</form>
<?php endforeach; ?>
<script>
jQuery(document).on('click','.edit-btn',function(){
jQuery(this).closest('.form').find('.idd').prop('readonly',false);
});
</script>
1 ) all id convert class
2) Use method removeAttr("readonly")
<tr>
<td>Edit</td>
</tr>
<input class="idd" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
And you can use $(".idd").removeAttr("readonly")
$(document).ready(function(){
$(".edit-btn").click(function(){
$(".idd").removeAttr("readonly");
$(".idd:first").focus();
})
})
Example :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<tr>
<td>Edit</td>
</tr>
<input type="text" class="idd" readonly>
<input type="text" class="idd" readonly>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".edit-btn").click(function(){
$(".idd").removeAttr("readonly");
$(".idd:first").focus();
})
})
</script>
</body>
</html>

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>

Compare input quantity value and database quantity value

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

Categories

Resources