javascript keypress event and php - javascript

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

Related

How to get the value in Textbox from database depends on dropdown list without submit button

I want to get the text box value from database depends upon the dropdownlist values without using submit button .Now I have three dropdown list on my code.how can i write the javascript for three dropdown
<div align="center">
<table>
<thead>
<th>Product</th>
<th>Quantity</th>
<th>Rate</th>
<th>Amount</th>
</thead>
<tbody>
<tr id="addrow">
<td>
<?php
$selectproduct=mysql_query("select productname from items");
$itemname=mysql_fetch_array($selectproduct);
?>
<select name="item[]" id="item">
<?php
$i=0;
while($itemname=mysql_fetch_array($selectproduct))
{
?>
<option value="<?php echo $itemname['productname'];?>"><?php echo $itemname['productname'];?></option>
<?php
$i++;
}
?>
</td>
<?php
// $amount=mysql_query("select Amount from items where Productname='$productname' ");
// $totalamount=mysql_fetch_array($amount);
?>
<td><input class="qty" type="text" name="qty[]"></td>
<td><input class="price" type="text" name="price[]"></td>
<td><input type="text" class="output" name="output[]"></td>
</tr>
<tr >
<td>
<?php
$selectproduct=mysql_query("select productname from items");
$itemname=mysql_fetch_array($selectproduct);
?>
<select name="item[]" id="item">
<?php
$i=0;
while($itemname=mysql_fetch_array($selectproduct))
{
?>
<option value="<?php echo $itemname['productname'];?>"><?php echo $itemname['productname'];?></option>
<?php
$i++;
}
?>
</td>
<td><input class="qty" type="text" name="qty[]"></td>
<td><input class="price" type="text" name="price[]"></td>
<td><input type="text" class="output" name="output[]"></td>
</tr>
<tr>
<td>
<?php
$selectproduct=mysql_query("select productname from items");
$itemname=mysql_fetch_array($selectproduct);
?>
<select name="item[]" id="item">
<?php
$i=0;
while($itemname=mysql_fetch_array($selectproduct))
{
?>
<option value="<?php echo $itemname['productname'];?>"><?php echo $itemname['productname'];?></option>
<?php
$i++;
}
?>
</td>
<td><input class="qty" type="text" name="qty[]"></td>
<td><input class="price" type="text" name="price[]"></td>
<td><input type="text" class="output" name="output[]"></td>
</tr>
</table>
<div id="grand">
Total Amount:<input type="text" name="gran" id="gran">
</div>
</tr>
<tr >
<td colspan="4">
<center><input type="submit" name="submit"></center>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
<script type="text/javascript">
$(document).ready(function() {
$(".price").keyup(function() {
var grandTotal = 0;
$("input[name='qty[]']").each(function (index) {
var qty = $("input[name='qty[]']").eq(index).val();
var price = $("input[name='price[]']").eq(index).val();
var output = parseInt(qty) * parseInt(price);
if (!isNaN(output)) {
$("input[name='output[]']").eq(index).val(output);
grandTotal = parseInt(grandTotal) + parseInt(output);
$('#gran').val(grandTotal);
}
});
});
});
</script>
I recommand you to use jQuery for start. It is easier to manipulate the DOM.
Follow a tutorial and then, attach a callback on the change event on your dropdown menus, then in the callback get the values for your menu in an ajax call, then generate the html (the option tags) and update your select.
The Ajax call and the html update can be done with jQuery, but you can do it by yourself in pure Javascript as well.
You'll need to use AJAX calls from JS. AJAX has to send and receive data from php script. Simple AJAX tutorial: https://www.w3schools.com/js/js_ajax_php.asp

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

I have to validate my form for radio buttons using javascript for my code given below

i have retrieve questions and answers from the sql table and represented them using this code. now, i have a problem that how to take the radio button name in javascript.
for every question there must be a one option checked. i have to do this for all questions.
<form action="answer.php?title=<?php echo $_GET['title'];?>" method="post">
<table id="myques">
<?php
$i=0;
while($row=mysql_fetch_array($result)){
?>
<tr>
<td><?php echo ++$i.')'; ?></td>
<td>&nbsp&nbsp&nbsp<?php echo $row['question']; ?></td>
</tr>
<tr>
<td></td>
<td><input type="radio" name="<?php echo $row['question'];?>" id="ques" value="<?php echo $row['opt1'];?>"><?php echo $row['opt1']; ?></td>
</tr>
<tr>
<td></td>
<td><input type="radio" name="<?php echo $row['question'];?>" id="ques" value="<?php echo $row['opt2'];?>"><?php echo $row['opt2']; ?></td>
</tr>
<tr>
<td></td>
<td><input type="radio" name="<?php echo $row['question'];?>" id="ques" value="<?php echo $row['opt3'];?>"><?php echo $row['opt3']; ?></td>
</tr>
<tr>
<td></td>
<td><input type="radio" name="<?php echo $row['question'];?>" id="ques" value="<?php echo $row['opt4'];?>"><?php echo $row['opt4']; ?></td>
</tr>
<?php } ?>
<tr><td colspan="4"><input type="submit" name="add" onClick="return validate()" /></td></tr>
</table>
Try this:
<input type="radio" name="question" id="ques" value="1">
<input type="radio" name="question2" id="ques2" value="2">
<input type="radio" name="question3" id="ques3" value="3">
Or you decide on names make sure they are different..
And for JS:
var projectObj = document.form1.project
var len = projectObj.length
var chosen = null;
for (i = 0; i <len; i++) {
if (projectObj[i].checked) {
chosen = projectObj[i].value
}
}
if (chosen == null) {
alert("No Radio Button Chosen")
}
SOURCE CREDIT GIVEN TO : How to check if one of radio buttons was selected?
There is no easy way to do this. Or you can use default checked option in your HTML. I think it will be conflict with your business.
In your JS:
// store your question names in JS array
// check them group by group. and it will give detail information for which question is not check.
OR
In your JS:
// I think there will be four option answers in one question.
// count the total number of questions. and make the radion id as "radion1","radion2"...
// for all radios, if the checked number is equals with the question, the form submit is valid.
<td><input type="radio" name="<?php echo $row['question'];?>" id="ques<?=$i?>" value="<?php echo $row['opt1'];?>" checked="true"><?php echo $row['opt1']; ?></td>
is this that what you want ?just add checked="true" to the first option ,then you will make it.

Get data from <td> on the same table row specified by row id and perform computation

I have an html table populated by data coming from a mysql database. This is the structure:
<table>
<?php
foreach($prods as $key=>$p){
?>
<tr class="row1" id="tr<?php echo $p['ProductID']?>">
<td id="pid<?php echo $p['ProductID']?>"><?php echo $p['ProductID']?></td>
<td id="pname<?php echo $p['ProductID']?>"><?php echo $p['ProductName'];?></td>
<td id="pdesc<?php echo $p['ProductID']?>"><?php echo $p['ProductDesc'];?></td>
<td id="pprice<?php echo $p['ProductID']?>"><?php echo $p['UnitPrice'];?></td>
<td><input type="checkbox" id="chk<?php echo $p['ProductID']?>" checked></td>
<td><input type="text" style="width:50px;" onkeyup="getall(this);" id="<?php echo $p['ProductID']?>"></td>
<td><input type="text" style="width:50px;" id="total<?php echo $p['ProductID']?>"> </td>
<span id="ttl" name="ttl"> 0.00</span>
</tr>
<?php
}
?>
</table>
I don't have issues populating the table, however I need to update the <span id="ttl"> value, every time the user changes the value of the <input type="text" style="width:50px;" onkeyup="getall(this);" id="<?php echo $p['ProductID']?>"></td>. I made a Javascript function but I fail doing what I want.
The value of the span should be the product of <td id="pprice<?php echo $p['ProductID']?>"><?php echo $p['UnitPrice'];?></td> and the quantity entered by the user at the textbox.
I will soon save these data back into the database once all fields are filled.
Not sure if this is used correctly. Just try something like:
<input type="text" style="width:50px;" onkeyup="getall('<?php echo $p['ProductID']?>');" id="<?php echo $p['ProductID']?>"></td>
And in your javascript function:
function getall(strId)
{
var tmpObj = document.getElementById(strId);
alert("reported id for testing: " + tmpObj.getAttribute("id"));
}
Try that.

Categories

Resources