EDIT: add an identifier to a dynamically generated row - javascript

I'm pulling down two tables from the db. There's a Javascript function that adds a row from Table2 into the Table1. What i've been trying to do is get the data from Table1 on the confirm_trade.php page so I can put it into the db but can't figure out how to pull that row(item_id). I thought putting the table in a form would allow me to access them through the $_POST but that's not working. How to add an identifier to the jquery row so I can grab on the confirm page?
The appended rows coming from the jQuery function are the rows I need the item_id from.
function addto(obj)
{
var $row = $(obj).parents("tr");
var $table = $("#tradee");
var item_id = $row.find(".item-id").text();
var item_name = $row.find(".item-name").text();
var item_desc = $row.find(".item-desc").text();
var newTR = $("<tr><td>"+item_id+"</td><td>"+item_name+
"</td><td>"+item_desc+"</td></tr>");
$table.append(newTR);
}
Table2:
<div id='fixedDiv'>
<form action="confirm.php" method="post">
<table align="center" id="Table2">
<tr><td>Other Item</td></tr>
<?php while($rowi =$item->fetch_assoc())
{?>
<tr>
<td>
<?php echo $rowi['item_id']; ?>
</td>
<td>
<?php echo $rowi['item_name']; ?>
</td>
<td><?php echo $rowi['item_description'];?></td>
</tr>
<?php } ?>
<tr>
<td><input type="submit" name="submit" value="Continue"/></td>
</tr>
</table>
</form>
</div>
<br>
Table 1:
<table align="center" id="Table1">
<tr><th>item_id</th>
<th>Cat_id</th>
<th>Name</th>
<th>Description</th>
</tr>
<?php while($row =$item_results->fetch_assoc())
{?>
<tr></tr>
<tr>
<td class="item-id"> <?php echo $row['item_id']; ?> </td>
<td><?php echo $cat_id = $row['cat_id']; ?> </td>
<td class="item-name"><?php echo $item_id = $row['item_name'];?></td>
<td class="item-desc"><?php echo $item_descrip = $row['item_description'];?>
</td>
<td><input type="button" class="added" onclick="addto(this)"
value="Add" />
<td><input type="button" class="removed" onclick="remove()"
value="Remove" >
</td>
</tr>
<?php } ?>
</table>

Judging by your code, you can use <input type="hidden" name="some_hidden_data" value="field-value">. be sure that you also wrap your table with <form method="post"></form>
the hidden field will be then included as $_POST['hidden_field_name'];

Related

How to calculate the rest of the inputs

I have a table and I am calculating the difference of hours but only first row of the table calculates me. and I have a method where created a new table is if the date is different
$(document).ready(function() {
getHrs();
});
function getHrs()
{
hstart=$('#horaInicio').val();
hend=$('#horaTermino').val();
hr1 = (hstart).split(":");
hr2 = (hend).split(":");
hrstart=(hr1[0]);
minstart=(hr1[1]);
hrend=(hr2[0]);
minend=(hr2[1]);
totalstart=parseInt((hrstart*60)) + parseInt(minstart);
totalend=parseInt(hrend*60) + parseInt(minend);
rsthr=(totalstart - totalend);
total=(rsthr / 60).toFixed(2);
$('#resultado').val(total);
}
here my table, I create a table for each different day.
<?php if ($seguimientos): ?>
<?php $fechas = array();
foreach ($seguimientos as $seguimiento) {
$fechas[$seguimiento-> fecha][] = $seguimiento;
}
?>
<?php foreach ($fechas as $fecha): ?>
<table class="table table-hover">
<thead>
<tr>
<th>Fecha</th>
<th>Orden</th>
</tr>
</thead>
<?php foreach ($fecha as $seguimiento): ?>
<tr>
<td>
<?php echo $seguimiento-> fecha; ?>
</td>
<td>
<?php echo $seguimiento-> horaInicio; ?>
<input type="hidden" id="horaInicio" value=" echo $seguimiento-> horaInicio;">
</td>
<td>
<?php echo $seguimiento-> horaFin; ?>
<input type="hidden" id="horaInicio" value=" echo $seguimiento-> horaFin;">
</td>
<td>
<input type="text" id="resultado" value="" readonly>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php endforeach; ?>
<?php endif; ?>
could be the problem the ID must be unique
Yes, that is the problem, try not to use id's but rather data attributes, or classes.
like this: <input type="hidden" data-start="horaInicio" value=" echo $seguimiento-> horaInicio;">
Then your selector becomes: hstart=$('[data-start]').val(); And the same for the other input.

trying to allow an empty row to the bottom of a input table using JavaScript

I am trying to create a form where the user can click on a button that will create a blank row at the bottom of the table. They can click this button for as many rows as they want to add. For some reason, when I click on the button I created, it goes back to my index.php page instead of just adding the row to the current page. Here is some of the code. Please let me know if there is more information that I should be adding here.
Thank you
JavaScript:
function new_line() {
var t = document.getElementById("desc_table");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
var x = rows[1].cloneNode(true);
x.style.display = "";
r.parentNode.insertBefore(x, r);
}
<?php include 'connect.php'; ?>
<!DOCTYPE xhtml>
<html>
<head>
<style type="text/css"><?php //include'css\file.css';?></style>
<script type="text/javascript" src="js/new_line.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<body>
<button id="home" onclick="home_btn()">Home</button>
<title>New Estimate</title>
<h1>New Estimate</h1>
<?php
$sql = $conn->prepare('SELECT * FROM entire_info');
$sql -> execute();
$result = $sql ->get_result();
if ($result->num_rows!=0) {
$entire_info=$result->fetch_assoc();
}
else{
echo'Cannot find company information<br>';
}
?>
<form>
<table id="estimate_table">
<tr>
<td>
<?php
echo '<h1>'.$entire_info['name'].'</h1><br>'.
$entire_info['str_address'].'<br>'.
$entire_info['city'].', '.$entire_info['province'].' '.$entire_info['postal']
.'<br>Phone:'.$entire_info['phone'].'<br>Fax:'.$entire_info['fax'].'<br>'.$entire_info['email'].'<br>';
?>
<br>
</td>
<td colspan="3" style="text-align: right;"><?php echo '<h1>Estimate</h1>'; ?></td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="vertical-align: top;">
For:<br>
<select name="estimate_for">
<?php
$sql = $conn->prepare('SELECT * FROM company');
$sql -> execute();
$result = $sql ->get_result();
if ($result->num_rows>0) {
while ($row=$result->fetch_assoc()) {
$company_name = $row['company'];
echo '<option value="'.$company_name.'">'.$company_name.'</option>';
}
}
else{
echo'Cannot find company information<br>';
}
?>
</select>
</td>
<td>
Job:<br> <textarea name="job_name" style="width: 200px ! important;" style="height: 30px ! important;"></textarea>
</td>
</tr>
</table>
</td>
<td colspan="3" style="text-align: right;">
Invoice#: <br>
Date: <input type="text" name="estimate_date" value="<?php echo date('M d, Y'); ?>">
</td>
</tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<table id="desc_table">
<tr>
<td><font><br><h3>Description</h3></font></td>
<td><font><h3>Hours</h3></font></td>
<td><font><h3>Rate</h3></font></td>
<td><font><h3>Amount</h3></font></td>
</tr>
<tr>
<td ><textarea name="description" style="width: 400px" style="height: 100px ! important;"></textarea></td>
<td> <input type="text" name="hours"></td>
<td> <input type="text" name="rate"></td>
<td><input type="text" name="amount"></td>
<td>
<button onclick="new_line();">+</button>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: right;"><h3>Subtotal</h3></td>
<td><input type="text" name="subtotal"></td>
</tr>
<tr>
<td colspan="3" style="text-align: right;"><h3>GST (#87221 2410)
</h3></td>
<td><input type="text" name="gst"></td>
</tr>
<tr>
<td colspan="3" style="text-align: right;"><h3>Total</h3></td>
<td><input type="text" name="subtotal"></td>
</tr>
</table>
</form>
</head>
</body>
</html>
Your button is inside a <form> so by default it will behave like a submit button.
You have to set its type to a normal button by adding the type attribute:
<button onclick="new_line();" type="button">+</button>

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 get the id of the last element?

I have the list of products ,using below code
<table id="product">
<thead>
<tr>
<th style="width:30%;">Item Name</th>
<th style="width:11%;">Price</th>
<th style="width:11%;">Qty</th>
</tr>
</thead>
<tbody id="cart_contents">
<?php $i=1;
foreach($cart as $line=>$item)
{
?>
<tr>
<td style="align:center;"><?php echo $item['name']; ?></td>
<td><input type="text" id="price_<?php echo $i;?>" value="<?php echo $item['price']; ?>" name="price"></td>
<td id="qnty"><input type="text" id="quantity_<?php echo $i;?>" value="<?php echo $item['quantity']; ?>" name="quantity"></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
I need to edit quantity and price fields of last added product.
<table width="297px" style="float:left" class="CSSTableGenerator">
<tr>
<td onclick="click_quantity();">Qty</td>
<td onclick="click_price();"> <a href="javascript:void(0);" >Price</a></td>
</tr>
</table>
function click_quantity(){
$("#table register").find("td qnty").each(function(){
var id = $(this).attr("id");
alert(id);
})
}
How to get the last quantity field's id, after clicking the Qty link?
I have tried some codes, but I am unable to get last element's id.
EX : id names are quantity_1, quantity_2, quantity_3, quantity_4.
How to get quantity_4 (last elment's id)?
HTML
<table id="product">
<thead>
<tr>
<th style="width:30%;">Item Name</th>
<th style="width:11%;">Price</th>
<th style="width:11%;">Qty</th>
</tr>
</thead>
<tbody id="cart_contents">
<?php $i=1;
foreach($cart as $line=>$item)
{
?>
<tr>
<td style="align:center;"><?php echo $item['name']; ?></td>
<td>
<input type="text" id="price_<?php echo $i;?>" value="<?php echo $item['price']; ?>" name="price"/>
</td>
<td class="qnty">
<input class="qnty_input" type="text" id="quantity_<?php echo $i;?>" value="<?php echo $item['quantity']; ?>" name="quantity"/>
</td>
</tr>
<?php
$i++;
} ?>
</tbody>
</table>
JS Code
function click_quantity(){
var id = $("#cart_contents tr:last-child .qnty_input").attr("id");
// rest of your logic
}
1) you are using same ID in loop, that is not valid;
2) I think your js is wrong, use : $("#register").find("#qnty"), but has to be find('.qnty')
Try this one.
var last_id = $( 'table tbody tr td:last-child').attr( 'id' );
To get the last row(td) in table you can use this,
$('table tbody tr td:last-child')
In order to get last child element you can make use of Try to use last property of jquery
$("#cart_contents td:last").find('input[type=text]').attr('id');
$("#cart_contents td:last")
using this you'll find last column in each row so you have to use
$("#cart_contents tr:last-child td.qnty")

Update MySQL data from HTML using Javascript

I'm a beginner in HTML, PHP, JavaScript and MySQL. I've written a HTML code to enter data into a simple table containing columns "Name" and "Email" in MySQL by employing a seperate PHP file. Then I tried fetching the table contents using PHP. But now I need a little help in updating the data. My code is as follows:
enter code here<!DOCTYPE html>
<html>
<script language="javascript" src="update.js"></script>
<?php
$a=mysqli_connect("localhost","root","","test4");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($a,"select * FROM test");
?>
<table border="1" cellspacing="1" cellpadding"1">
<tr>
<th>pkid</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<?php
for ($i=0; $i<mysqli_num_rows($result); $i++)
{
$row = mysqli_fetch_array($result)
?>
<tr>
<td id="pkid"><?php echo $row['pkid'] ?></td>
<td id="name"><?php echo $row['name'] ?></td>
<td id="email"><?php echo $row['email'] ?></td>
<td><input type=submit onclick="myfunc()" value="View"/></td>
</tr>
<?php
}
?>
</table>
<form action="insert.php" method="post">
<table border="2">
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>
<input type="submit" value="Add">
</tr>
</table>
</form>
</html>
<?php
mysqli_close($a);
?>
Here is the Code for Update Data to MYSQL :
Html File :
<title>Listing Details for Update</title>
<?php
include ('config.php');
$tbl_name="user"; // Table name
$sql="SELECT * FROM $tbl_name";
$result=mysql_query($sql);
?>
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>
<table width="400" border="1" cellspacing="0" cellpadding="3">
<tr>
<td colspan="4"><strong>List data from mysql </strong> </td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center"><strong>pkid</strong></td>
<td align="center"><strong>Name</strong></td>
<td align="center"><strong>Email-Id</strong></td>
<td align="center"><strong>Action</strong></td>
</tr>
<?php
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><? echo $rows['pkid']; ?></td>
<td><? echo $rows['name']; ?></td>
<td><? echo $rows['email']; ?></td>
<td align="center">update</td>
</tr>
<?php
}
?>
</table>
</td>
</tr>
</table>
<?php
mysql_close();
?>
Here you can find the way for Update Single Field, Multiple Field Etc.,
http://php.sysaxiom.com/update_data.php
http://php.sysaxiom.com/update_multiple_data.php
If you need to change the contents of the table to have different rows/row data, (and you want to do it live) you will need to use AJAX. jQuery has fairly straightforward ajax usage, so for actual implementation, I would look to that. You'll also need another PHP file that just returns the raw HTML required to fill in the table. Pseudocode (jquery) below:
$.post("url","dataToPost",function(data){$("#table id where I want to put new data).innerHTML=data});
Basically, the $.post() posts the dataToPost to the url and sets the innerHTML of whatever you select to the resultant data.

Categories

Resources