Develop Reference

How do I Store the Value of Table Data which is Being Passed Dynamically from PHP to JavaScript after a Button Click Event?

I've been Trying to List Users in a 1 to 1 Chat Application in HTML Tables & uniquely Define Each Table cell data by the Name ID dynamically in PHP. The problem is I am Unable to retrieve the Same Table Cell Value after a Button Click for that Particular Record even after Passing the Name value in PHP.
<?php
include("functions.php");
$token = $user_details[5];
// Get all Users except the Logged user
$users_list = get_users_list($user_details[2]);
?>
<table class="table">
<thead class="thead-style">
<tr>
<td class="text-center">Users List</td>
<td class="text-center">Login Status</td>
<td class="text-center"></td>
</tr>
</thead>
<tbody>
<?php
while($fetch = mysqli_fetch_assoc($users_list))
{
?>
<tr class="table-row-users">
<td class="text-center" id="<?php echo $fetch['user_name']; ?>" value="<?php echo $fetch['user_name']; ?>">
<?php echo $fetch['user_name']; ?></td>
<td class="text-center"><?php echo $fetch['user_login_status']; ?></td>
<td class="text-center"><button class="btn btn-outline-primary receiver_email='<?php echo base64_encode($fetch["user_email"]);?>'" id="single_chat" onclick='setReceiver("<?php echo $fetch['user_name']; ?>")'>Chat</button></td>
</tr>
<?php
}
?>
</tbody>
</table>
JavaScript Code
function setReceiver(receiver_name)
{
var to_user_name = document.getElementById(receiver_name).value;//Unable to Retrieve the Value here
console.log(to_user_name);
//$('.receiver').append(to_user_name);
}
I am Facing the Error on the JS Side. Also this is my 1st Question on Stack Overflow.

After the click does not appear in bold

I created an internal email system within the project. When I receive a new message the column with the subject name in my table is bolded to inform that the message has not yet been read.
code:
<?php
while($row = mysqli_fetch_array($result))
{
?>
<section id="s1">
<div class="div1" id="minhaDiv" style="float: left;">
<table class="table table-bordered">
<tr>
<th width="20%">De</th>
<th width="60%">Assunto</th>
<th width="10%">Prioridade</th>
<th width="10%">Recebido</th>
</tr>
<tr>
<th width="10%" colspan=4>Recebido: <?php echo $row["Data"]; ?></th>
</tr>
<tr>
<td><?php echo $row["De"]; ?></td>
<td class="td-info view_data" id="<?php echo $row["Id"]; ?>" data-toggle="modal" href="#dataModal" width="20%" style="font-weight:bold" onclick="this.style['font-weight'] ='normal'"><?php echo $row["Assunto"]; ?></td>
<td><?php echo $row["Prioridade"]; ?></td>
<td><?php echo $row["Hora"]; ?></td>
</tr>
<tr>
<?php
}
?>
</table>
</div>
</section>
In the image, which is surrounded by green already clicked to read, the red has not yet vliquei to read, so it is bold:
I use this code to put bold inside the td:
width="20%" style="font-weight:bold" onclick="this.style['font-weight'] ='normal'"
The problem is that if you refresh the page, even after reading the messages, they come back in bold and should not. After clicking once, they can not be left in bold

Solution to achieve the condition.
I created a Status field in the database table, where 1 is unread message and 0 message is read, now is to create the condition in td with if. In the javascript with which I open the modal I made the following change:
$('.td-info').click(function(){
var item_id = $(this).attr("id");
var status = $(this).attr("Status");
$.ajax({
url:"./fetchRAD",
method: "POST",
data:{item_id:item_id, status:status},
success:function(data){
}
});
});
In td I indicated the id of the record in the id of td:
id="<?php echo $row["Id"]; ?>"
file with php:
if(isset($_POST["item_id"]))
{
$query = "Update centrodb.Alertas SET Status = '0' WHERE Id = '".$_POST["item_id"]."'";
$result = mysqli_query($conn, $query);
}
Pata check in the td we put like this:
width="20%" <?php echo $row["Status"] == '1'?' style="font-weight:bold" ':' style="font-weight:normal" '?>
td complete:
<td class="td-info view_data" id="<?php echo $row["Id"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $row["Status"] == '1'?' style="font-weight:bold" ':' style="font-weight:normal" '?>><?php echo $row["Assunto"]; ?></td>

outlook mail window with pre populated to sender box not working

errors i get
I have a table that contains details one of this being emails. When i click a link i have outlook mail opening but i want to take the email of that row in the table and put it into the 'to' part of the email. Below i have code for what i am currently doing.
the code below displays the data from my database in a table format
<table class="table table-striped custab">
<thead>
<tr>
<th> </th>
<th>Booking ID</th>
<th> Name</th>
<th>Email</th>
<th>Date</th>
<th>time</th>
<th>No. of guests</th>
<th>Booking Reason</th>
<th>Comments</th>
<th width="110" class="ac">Approved?</th>
</tr>
<thead>
<!-- php function to only select the bookings that have not yet been approved/rejected -->
<?php
include 'config.php';
$select = "SELECT * FROM `booking` WHERE `status`IS NULL ";
$result = $conn->query($select);
while($row = $result->fetch_assoc()){
?>
<tr>
<td><input type="checkbox" class="checkbox" /></td>
<td><?php echo $row['customer_ID'] ?></td>
<td><?php echo $row['Name'] ?></td>
<td><?php echo $row['Email'] ?></td>
<td><?php echo $row['booking_date'] ?></td>
<td><?php echo $row['booking_time'] ?></td>
<td><?php echo $row['attendee_no'] ?></td>
<td><?php echo $row['booking_reason'] ?></td>
<td><?php echo $row['comments'] ?></td>
<td>
Email this Codesnippet</a>
</td>
</tr>
<?php
}
?>
</table>
The function below gets the pop up to display for outlook mail
<script type="text/javascript"> TriggerOutlook(Email)
{
var $to = 'Email';
var body = "your booking has been approved";
<!-- var body = escape(window.document.title + String.fromCharCode(13)+ window.location.href); --->
var subject = "Your booking request";
window.location.href = "mailto:?body="+body+"&to="+$to+"&subject="+subject;
}
</script>
if i put in an email manually into the var $to = the outlook pop up works however if i try to take the email from the table it doesnt, can anyone help me out to identity where i am going wrong? Thanks!

1 You don't need the PHP $ declaration for variables, thus:
var $to = 'Email';
should be:
var to = 'Email';
more descriptive variables could make future updates easier:
var toAddr = 'Email';
2 Your JavaScript function should be preceded with the function tag
<script type="text/javascript"> TriggerOutlook(Email)
{
changes to:
<script type="text/javascript">
function TriggerOutlook(Email){
3 Use a button rather than link
Replace
Email this Codesnippet</a>
With
<button
onclick="TriggerOutlook(<?php echo $row['Email'];?>)"
value="submit"
>Email this Codesnippet</button>

Changing value in html table dynamically

I have an html table where i retrieve data from a database using PHP. The table is quite simple, i have three fields: Name, Quantity and Price. At the end of the table i have an additional field, Subtot, that shows the final cost (SumOfAllItems(Quantity*Price)).
I need to be able to change the "Quantity" value in each row and the "Subtot" should update accordingly. I also need to be able to set min/max value the user can use to update the cell.
I was thinking to add something like a button or any kind of list/input by the "Quantity" value in each row.
I think i need to use javascript but i am not sure, any suggestion is welcome.
Following my code.
Thanks
<table>
<tbody>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price<th>
</tr>
<?php
while($row2 = $result->fetch_assoc())
{?>
<tr>
<td><?php echo $row2["Name"] ?></td>
<td><?php echo $row2["Quantity"] ?></td>
<td><?php echo $row2["Price"]?></td>
</tr>
<?php
$subtot = $subtot + ($row2["Price"] * $row2["Quantity"])
} ?>
<td></td>
<td><b>Subtot.</b></td>
<td><b><?php echo $subtot2 ." Euro"; $tot = $subtot1 + $subtot2;?> </b></td>
</tbody>
</table>

The following should work, however i do not recommend this method (any method btw) without any validation on server side.
You need this on top of your php file:
<?php
$total = 0;
Then your table like:
<table>
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price<th>
</tr>
</thead>
<tbody>
<?php while($row2 = $result->fetch_assoc()) { ?>
<tr>
<td><?php echo $row2['name'] ?></td>
<td><input class="row" min="0" onchange="myFunction()" data-price="<?php echo $row2['price'] ?>" type="number" value="<?php echo $row2['quantity'] ?>"/></td>
<td><?php echo $row2['price'] ?></td>
</tr>
<?php
$total += $row2['price'] * $row2['quantity'];
}
?>
<td></td>
<td>
<b>Subtot.</b>
</td>
<td>
<b id="total"><?php echo $total; ?></b>
</td>
</tbody>
</table>
And you need the following script tag:
<script>
function myFunction(){
var total = 0;
var elements = document.getElementsByClassName("row");
for(var i = 0; i < elements.length; i++) {
total += elements[i].value * elements[i].dataset.price;
}
var totalEl = document.getElementById("total");
totalEl.innerHTML = total;
}
</script>
Again.. this is a very simple solution, but it should work.

colspan does not work in jquery toggle or show hide

I am assuming that toggle() show() and hide turns a element into a block element therefore disabling the capabilities to use colspan. When I am not hiding the TR, colspan works perfectly. as soon as a toggle or do the show hide, it no longer works.
Is there a jquery method out there that will successfully show and hide a table row while mainting the table cell row.
I somewhat found the solution considering the following.
HTML
<h3 class="tac"><?php echo 'Communications';?></h3>
<br/><br/>
<table class="projects-table-style deposit-table communication" cellpadding="0" cellspacing="0">
<tr>
<th>Date</th>
<th>Consultant</th>
<th>Country</th>
<th>Rating</th>
<th>Communications</th>
<th>Last Bid</th>
<th>Memorandum</th>
</tr>
<?php
$i = 0;
foreach ($comments as $comment):
$class = null;
if ($i++ % 2 == 0) {
$class = ' class="altrow"';
}
?>
<tr<?php echo $class;?>>
<td>Date</td>
<td>
<?php echo $comment['User']['username']; ?>
</td>
<td><?php echo $comment['User']['Country']['name']; ?></td>
<td>Rating</td>
<td>
x communcations
Reply
</td>
<td>Last Bid</td>
<td>Memorandum</td>
</tr>
<tr style="display:none" class="reply-box">
<td style=" background: #fff" colspan="7">
<table width="100%">
<?php foreach($comment['Comment'] as $com): ?>
<tr>
<td width="20%">
<?php echo $com['From']['username']; ?>
</td>
<td>
<?php echo $com['comment']; ?>
</td>
<td width="15%">
<?php echo $com['created']; ?>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php echo $this->Form->create('Project');?>
<?php echo $this->Form->input('message',array('type'=>'textarea','cols'=>'77','style'=>'margin-right:0px;padding:0px;'));?>
<?php echo $this->Form->end(__('Submit', true,array('attribute'=>'value')));?>
</td>
</tr>
<?php endforeach; ?>
</table>
JS
$(document).ready(function() {
$('.reply-to').click(function(){
$(this).parent().parent().next().toggle('slow');
return false;
});
});
So long as I toggle .reply-box which is appended to the TR. the TD element nested within will maintain its table-cell structure and will still keep the colspan attribute. just wanting to know if anyone else knows a better solution.

The jQuery API for .show() says this:
This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
However, I'm not sure how it will function if the element is originally hidden (using display: none in either a CSS declaration or inline style); though I couldn't get it to break in a jsFiddle so I think it should function correctly.