Get HTML data from table row click into javascript alert - javascript

My end goal is to click a row on the table and for that to populate in the form next to it for an update. This code here is simply just "attempting" to click a row and for it to display in a Javascript alert with the row data, before I code the population of the form.
Here I have populated the table using PHP. The TR class have "updatetbl" which is later used with the javascript. I used the code example from this question: Get the table row data with a click
if ($patients->num_rows > 0){
while($row = $patients-> fetch_assoc()) {
echo '<tr class="updatetbl">';
echo '<td class="updatetbl">' . $row['ID'] . '</td>';
echo '<td class="updatetbl">' . $row['Forename'] . '</td>';
echo '<td class="updatetbl">' . $row['Surname'] . '</td>';
echo '<td class="updatetbl">' . $row['DOB'] . '</td>';
echo '<td class="updatetbl">' . $row['Address'] . '</td>';
echo '<td class="updatetbl">' . $row['Postcode'] . '</td>';
echo '<td class="updatetbl">' . $row['Telephone'] . '</td>';
echo '<td class="updatetbl">' . $row['Email'] . '</td>';
echo '<tr>';
}
}else{
echo "0 results";
}
I am trying to get the data, firstly, into an alert with Javascript (I just want to see that I have the data before putting into the form)
To populate the alert, and register the click I have the following javascript.
<script>
$("tr.updatetbl").click(function(){
var tableData = $(this).children("td").map(function(){
return $(this).text();
}).get();
alert("Data = "+ $trim(tableData[0]) + " , " + $trim(tableData[1]) + " , "
+ $trim(tableData[2]) + " , " + $trim(tableData[3]) + " , "));
});
</script>
To my knowledge the tr.updatetbl concentrates on a click here? And then gathers the table data..
Any ideas?
Update: I do have etc.
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Forename</th>
<th>Surname</th>
<th>D.O.B</th>
<th>Address</th>
<th>Postcode</th>
<th>Tel</th>
<th>Email</th>
</tr>
</thead>
<?php
$servername = removed
$dbname = removed
$username = removed
$password = removed
$connection = new mysqli($servername, $username, $password, $dbname);
if ($connection->connect_error) {
die('Could not connect: ' . $connection->connect_error);
}
$sql = "SELECT ID, Forename, Surname, DOB, Telephone, Email, Address, Postcode FROM people";
$people= $connection->query($sql);
if ($patients->num_rows > 0){
while($row = $patients-> fetch_assoc()) {
echo '<tr class="updatetbl">';
echo '<td>' . $row['ID'] . '</td>';
echo '<td>' . $row['Forename'] . '</td>';
echo '<td>' . $row['Surname'] . '</td>';
echo '<td>' . $row['DOB'] . '</td>';
echo '<td>' . $row['Address'] . '</td>';
echo '<td>' . $row['Postcode'] . '</td>';
echo '<td>' . $row['Telephone'] . '</td>';
echo '<td>' . $row['Email'] . '</td>';
echo '</tr>';
}
}
else
{
echo "0 results";
}
$connection->close();
?>
</table>
Solved:
I have it figured out - I put the compiled code into a new jFiddle with the javascript and it still didn't work. I couldn't figure why, so I looked at yours and I noticed at the side you had the library as jQuery! Mine was standard JS. So I realised that I hadn't included the <script src="jquery-1.11.3.min.js"></script>
I voted the below answer because I was helped effortlessly although I am sure after all of this other answers will work.


You have one ")" at the end this line which is not needed, thats why it doesnt work :
`alert("Data = "+ $trim(tableData[0]) + " , " + $trim(tableData[1]) + " , "
+ $trim(tableData[2]) + " , " + $trim(tableData[3]) + " , ")); which isnt needed.
Moreover, just add the class updatetbl on row.
HTML
<table>
<tbody>
<tr class="updatetbl">
<td >ID</td>
<td >Forename</td>
<td >Surname</td>
<td >DOB</td>
<td >Address</td>
<td >Postcode</td>
<td >Telephone</td>
<td >Email</td>
</tr>
<tbody>
</table>
JS :
$(".updatetbl").click(function(){
var tableData = $(this).children("td").map(function(){
return $(this).text();
}).get();
alert("Data = "+ tableData[0] + " , " + tableData[1] + " , "
+ tableData[2] + " , " + tableData[3] + " , ");
});


How about;
$("tr.updatetbl").click(function(){
var data = [];
$("tr.updatetbl td").each(function(i, td){
data.push(td.text());
});
console.log(data);
});


Please find the below code for this
$( "table tr.updatetbl" ).on( 'click', function( e ) {
e.preventDefault();
var data = [];
$( this ).find( "td" ).each( function(){ data.push( $.trim( $( this ).text() ) ) } );
console.log( data );
});
fiddle link : https://jsfiddle.net/4tk4w0ua/1/

Related

I couldnt get datas from each html table which returns with PHP

I am trying to build small projects to improve my skills. And im stuck at a poing. if someone can help me i will be glad. (I know there is SQL injection , its just practice)
Here is My Js function that is trying to get value from PHP side.
function selectUser(element){
var customerid = $("td[data-form-id]", element).data("form-id");
var customername = $("td[data-customer-name]", element).data("customer-name");
var customertel = $("td[data-customer-tel]", element).data("customer-tel");
var devicemodel = $("td[data-device-model]", element).data("device-model");
var acceptdate = $("td[data-accept-date]", element).data("accept-date");
console.log(customerid);
console.log(customername);
console.log(customertel);
console.log(devicemodel);
console.log(acceptdate);
}
Here is my PHP Code and this is working fine like.
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($result)) {
$formId = $row['form_id'];
$customerName = $row['customer_name'];
$customerTel = $row['customer_tel'];
$deviceModel = $row['device_modal'];
$acceptDate = $row['accept_date'];
/*Here i give each row as id thats is shown customer's id. And when i click a row i can see in the console.*/
echo "<tr onclick='selectUser(this);' data-id='" . $formId . "'>";
echo "<td data-form-id='" . $formId . "'>" . $formId . "</td>";
echo "<td data-customer-name='" . $customerName . "'>" . $customerName . "</td>";
echo "<td data-customer-tel='" . $customerTel . "'>" . $customerTel . "</td>";
echo "<td data-device-model='" . $deviceModel . "'>" . $deviceModel . "</td>";
echo "<td data-accept-date='" . $acceptDate . "'>" . $acceptDate . "</td>";
echo "<td><a>Detail</a></td>";
echo "</tr>";
}
But What i am trying to do is to read values when click on "Detail" part click not the row.
And i taking my function to Like this and it returns in console "undefined values":
<td onclick='selectUser(this);' data-id='" . $formId . "'><a>Detail</a></td>
And here is the how it looks like all codes:
echo "<tr>";
echo "<td data-form-id='" . $formId . "'>" . $formId . "</td>";
echo "<td data-customer-name='" . $customerName . "'>" . $customerName . "</td>";
echo "<td data-customer-tel='" . $customerTel . "'>" . $customerTel . "</td>";
echo "<td data-device-model='" . $deviceModel . "'>" . $deviceModel . "</td>";
echo "<td data-accept-date='" . $acceptDate . "'>" . $acceptDate . "</td>";
echo "<td onclick='selectUser(this);' data-id='" . $formId . "'><a>Detail</a></td>";
echo "</tr>";

Try this, this is using Jquery. also include the cdn jquery link.
echo "<tr onclick='selectUser(this);' data-id='" . $formId . "'>";
echo "<td class='form_id_class' data-form-id='" . $formId . "'>" . $formId . "</td>";
echo "<td class='customer_name_class' data-customer-name='" . $customerName . "'>" . $customerName . "</td>";
echo "<td class='customer_tel_class' data-customer-tel='" . $customerTel . "'>" . $customerTel . "</td>";
echo "<td class='device_model_class' data-device-model='" . $deviceModel . "'>" . $deviceModel . "</td>";
echo "<td class='data_acc_date_class' data-accept-date='" . $acceptDate . "'>" . $acceptDate . "</td>";
echo "<td class='detail_btn'><a>Detail</a></td>";
echo "</tr>";
$('.detail_btn').onClick(function(){
var form_id = $(this).closest('tr').find('.form_id_class').val();
console.log(form_id);
});

Sum of Column in HTML and PHP

I am needing to get the total of a row from a MySQL data base that is listed in an HTML table.
I have tried using separate sql select statements with the as statement for the new row (i.e. SELECT SUM(product_price) AS order_total FROM orderplace WHERE orderplace_number = '$item') as well as using it in the original select statement.
Here is my original code without the total added up. I would like the total in a different row spanning across all columns. Thanks in advance!
<table width="100%">
<tr>
<th>Product ID</th>
<th>Item Name</th>
<th>Description</th>
<th>Price</th>
<th>Actions</th>
</tr>
<?php
$cart = $_COOKIE['crochetdamour'];
if ($cart) {
$i = 1;
include('includes/dbc.php');
$items = explode(',', $cart);
foreach ($items AS $item) {
$sql = "SELECT * FROM orderplace WHERE orderplace_number = '$item'";
$result = mysqli_query($con, $sql);
if ($result == false) {
$mysql_error = mysqli_error($con);
echo "There was a query error: $mysql_error";
} else {
while ($row = mysqli_fetch_assoc($result)) {
echo '<tr><td align="left" id="prodid" name="prodid">' . $row['product_id'] . '</td>';
echo '<td align="left" id="prodname" name="prodname">' . $row['product_name'] . '</td>';
echo '<td align="left" class="desctd" id="proddesc" name="proddesc">' . $row['product_size'] . ', ' . $row['product_gender'] . ', ' . $row['product_theme'] . ', ' . $row['product_specs'] . '</td>';
echo '<td align="left" id="prodprice" name="prodprice">' . $row['product_price'] . '</td>';
echo '<td align="left">Remove From Cart</td></tr>';
} //end while
$i++;
} //end else
} //end foreach
} //end if
?>
</table>

You have to this:
foreach ($items AS $item) {
$sum = 0; //<-------------
$sql = "SELECT * FROM orderplace WHERE orderplace_number = '$item'";
$result = mysqli_query($con, $sql);
if ($result == false) {
$mysql_error = mysqli_error($con);
echo "There was a query error: $mysql_error";
} else {
while ($row = mysqli_fetch_assoc($result)) {
echo '<tr><td align="left" id="prodid" name="prodid">' . $row['product_id'] . '</td>';
echo '<td align="left" id="prodname" name="prodname">' . $row['product_name'] . '</td>';
echo '<td align="left" class="desctd" id="proddesc" name="proddesc">' . $row['product_size'] . ', ' . $row['product_gender'] . ', ' . $row['product_theme'] . ', ' . $row['product_specs'] . '</td>';
echo '<td align="left" id="prodprice" name="prodprice">' . $row['product_price'] . '</td>';
echo '<td align="left">Remove From Cart</td></tr>';
$sum += $row['product_price']; //<--------------
} //end while
$i++;
} //end else
echo $sum; //<----------------
} //end foreach
Hope it will helps

Href link is not working along with data-revel-modal inside anchor tag

In php href of anchor tag is not working with onclick event where as onclick is working fine
<script type="text/javascript">
function setData(user_num,user_name,user_query,subject,user_email,user_phone,status,status_change_date,query_date)
{
$("#user_num").val(user_num);
$("#user_name").val(user_name);
$("#user_query").val(user_query);
$("#subject").val(subject);
$("#user_email").val(user_email);
$("#user_phone").val(user_phone);
$("#status").val(status);
$("#query_date").val(query_date);
$("#status_change_date").val(status_change_date);
var date = query_date.split('-');
var mon = parseInt(date[1]) - 1;
//alert(mon);
$("#dob_Month_ID").val(mon).change();
$("#dob_Day_ID").val(date[2]).change();
$("#dob_Year_ID").val(date[0]).keyup();
}
</script>
i have fetched all the values and added it to $data and transferring it as parameter to javascript function
$query = "select user_num,user_name,user_query,subject,user_email,user_phone,status,query_date,status_change_date from userqueries";
$result = mysql_query($query,$con);
if($result && mysql_num_rows($result)>0)
{
while($row = mysql_fetch_array($result))
{
list($user_num,$user_name,$user_query,$subject,$user_email,$user_phone,$status,$query_date,$status_change_date ) = $row;
$data ="'$user_num','$user_name','$user_query','$subject','$user_email','$user_phone','$status','$status_change_date','$query_date'";
echo '<tr>';
echo '<td>' . $row["user_num"] . '</td>';
echo '<td>' . $row["user_name"] . '</td>';
echo '<td>' . $row["user_email"] . '</td>';
echo '<td>' . $row["user_phone"] . '</td>';
echo '<td>' . $row["subject"] . '</td>';
echo '<td>' . $row["user_query"] . '</td>';
echo '<td>' . $row["status"] . '</td>';
echo '<td>' . date('l M d y',strtotime($row["query_date"])) . '</td>';
echo '<td>' . date('l M d y',strtotime($row["status_change_date"])) . '</td>';
//echo '<td><a href="viewtitle.php?title_id=' . $row["user_num"]. '" data-reveal-id="myModal" onclick="setData(' . $data . '); " >Edit Record</a></td>';
echo '<td>Edit This Record</td>';
echo '<td>Reply user</td>';
echo '<td>Edit This Record</td>';
in href i have added url of same page where it is, when i click on Edit this Record i am able to see mymodal popup screen but not getting the query string in url.
Have used this revel modal
http://foundation.zurb.com/sites/docs/v/5.5.3/components/reveal.html
Please help!!

JQUERY to change text of div based on time different between SQL timestamp field and NOW()

I have a script below to pull some data from sql:
<?php
require 'admin-db.php';
// Define and perform the SQL query
$sql = "SELECT `id`, `first_name`, `last_name`, `status_time` "
. "FROM `staffs` ORDER BY `id` DESC";
$result = $DB_CON->query($sql);
// If the SQL query is succesfully performed ($result not false)
if($result !== false) {
$data_row = '<table class="table table-striped tablesorter">'
. '<thead>'
. '<tr>'
. '<th>ID</th>'
. '<th>Fist Name</th>'
. '<th>Last Name</th>'
. '<th>Status Time</th>'
. '</tr>'
. '<tbody>';
foreach($result as $row) {
$data_row .= '<tr>'
. '<td scope="row" class="text-center">'.$row['id'].'</td>'
. '<td>' .$row['first_name'].'</td>'
. '<td>' .$row['last_name'].'</td>'
. '<td><div class="status">' .$row['status_time']. '</div><span class="fa fa-times-circle"></span></td>';
}
}
$data_row .= '</tbody>'
. '</table>';
echo $data_row;
How would I change my script (see below) to compare between the $row['status_time'] and NOW() to indicate if the time different is more than 30 seconds it return 0 and if less than 30 seconds it return a 1 as text in the div class="status"?
<script>
$('.status:contains(">30 seconds") = $this.text(0) else $this.text(1);
</script>

This can be what are you looking for.
// foreach tr row
$.each($('tr .status'), function(i, v) {
// get seconds from date
var seconds = (Date.now() - Date.parse($(v).text()))/1000;
if(seconds) {
(seconds < 30) ? $(this).text('1') : $(this).text('0');
}
});
JSFIDDLE DEMO

how to pass the edited value to database

i am making the html table with an inline edit using http://www.iwebux.com/inline-edit-using-ajax-in-jquery/ i try to pass the edited value to database but its not passing,i want to pass the id and the edited value to database below is my code.Please anyone guide me i am new to programming thanks.
ajax
$(document).ready(function () {
$('td.edit').click(function () {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
$(this).addClass('ajax');
$(this).html('<input id="editbox" size="' + $(this).text().length + '" type="text" value="' + $(this).text() + '">');
$('#editbox').focus();
}
);
$('td.edit').keydown(function (event) {
arr = $(this).attr('class').split(" ");
if (event.which == 13) {
$.ajax({
type: "POST",
url: "config.php",
data: "value=" + $('.ajax input').val() + "&rowid=" + arr[1] + "&region=" + arr[2],
success: function (data) {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
}
});
}
}
);
$('#editbox').live('blur', function () {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
});
});
Html
<body>
<table cellpadding="15">
<tr class="heading" bgcolor="#ccc">
<th>region</th>
<th>country</th>
<th style="width:285px;">networkname</th>
<th>mcc</th>
<th>mnc</th>
<th>mnp</th>
</tr>
<?php
$dbHost = 'localhost'; // usually localhost
$dbUsername = 'fms';
$dbPassword = 'xxxxxxxxx';
$dbDatabase = 'fms';
$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");
$sql = mysql_query("SELECT * FROM supplierprice");
while($row=mysql_fetch_array($sql))
{
echo '<tr '.$row['id'].' >';
echo "<td class='edit' >" . $row['region'] . "</td>";
echo "<td class='edit' >" . $row['country'] . "</td>";
echo "<td class='edit' >" . $row['networkname'] . "</td>";
echo "<td class='edit' >" . $row['mcc'] . "</td>";
echo "<td class='edit' >" . $row['mnc'] . "</td>";
echo "<td class='edit'>" . $row['mnp'] . "</td>";
echo "</tr>";
}
?>
</table>
</body>
config.php
<?php
$dbHost = 'localhost'; // usually localhost
$dbUsername = 'fms';
$dbPassword = 'xxxxxxxx';
$dbDatabase = 'fms';
$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");
print $_POST['rowid'];
if($_POST['rowid'])
{
$id=mysql_escape_String($_POST['id']);
$region=mysql_escape_String($_POST['region']);
$country=mysql_escape_String($_POST['country']);
$networkname=mysql_escape_String($_POST['networkname']);
$mcc=mysql_escape_String($_POST['mcc']);
$mnc=mysql_escape_String($_POST['mnc']);
$mnp=mysql_escape_String($_POST['mnp']);
$sql = "update supplierprice set region='$region',country='$country',networkname='$networkname',mcc='$mcc',mnc='$mnc',mnp='$mnp' where id='$id'";
mysql_query($sql);
print " $sql";
}
?>

Categories