Develop Reference

Trying to get value from table on click

I have a table like this:
<table class="table" id = "posts_table">
<caption><h2>cars</h2></caption>
<tr class="success">
<th style="text-align:center"> post_id
<th style="text-align:center"> autor
<th style="text-align:center"> title
</tr>
<?php
$cursor = $MySQLdb->prepare("SELECT * FROM posts WHERE topic_id=:topic_id");
$cursor->execute( array(":topic_id"=>"1") ); //לשנות
foreach ($cursor->fetchAll() as $obj): ?>
<tr>
<td style="text-align:center"><? echo $obj['post_id'] ?></td>
<td style="text-align:center"><? echo $obj['full_name']?></td>
<td style="text-align:center"><? echo $obj['post_title']?></td>
</tr>
<? endforeach; ?>
</table
I want to create function that when u click on the title im getting the post_id for this raw. What should I do to make it happen?

So i try to do this code and it works:
<table class="table" id = "posts_table">
<caption><h2>cars</h2></caption>
<tr class="success">
<th style="text-align:center"> post_id </th>
<th style="text-align:center"> autor </th>
<th style="text-align:center"> title </th>
</tr>
<?php
$cursor = $MySQLdb->prepare("SELECT * FROM posts WHERE topic_id=:topic_id");
$cursor->execute( array(":topic_id"=>"1") ); //לשנות
foreach ($cursor->fetchAll() as $obj): ?>
<tr>
<td class="post_id_c" style="text-align:center"><? echo $obj['post_id'] ?></td>
<td style="text-align:center"><? echo $obj['full_name']?></td>
<td style="text-align:center"><a class="click_title"><? echo $obj['post_title']?></a></td>
</tr>
<? endforeach; ?>
</table>
<script>
$(".click_title").click(function() {
var $item = $(this).closest("tr") // Finds the closest row <tr>
.find(".post_id_c") // Gets a descendent with class="nr"
.text();
console.log($item);
});
</script>

creating datatable for php codes with bootstrap 4

hello i created a datatabe to to load my datas sort them and using the search functionality but it dose not work i tried it been 5 days and i am stuck here i do not know what i am missing or what i done wrong this is my codes if any one can help me i would be thankful
<div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">
<thead style="color:black;" >
<th>id</th>
<th>Product</th>
<th>Price</th>
<th>Weight</th>
<th>Image</th>
<th>Type</th>
<th>Type 2</th>
</thead>
<?php
$get = mysqli_query($conn,"SELECT * FROM products;");
?>
<tbody>
<?php
while ($row=mysqli_fetch_array($get)) {
$id=$row['product_id'];
$name=$row['product_name'];
$type2=$row['product_type'];
$weight=$row['weight'];
$price=$row['product_price'];
$type=$row['type'];
$img=$row['img'];
$get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<td><?php echo $id;?></td>
<td><?php echo $name;?></td>
<td>$<?php echo $newprice;?></td>
<td><?php echo $weight;?> g</td>
<td>
<img src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
</td>
<td><?php echo $type;?></td>
<td><?php echo $type2;?></td>
</tbody>
<?php
endwhile;
}
?>
</div>
</table>
these are my bootstrap and scripts that i use
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
also this is my data table code
<script type="text/javascript">
$(document).ready(function() {
$('#datas').dataTable( { "ordering": true } );
} );
</script>
the datatable is created but it does not work like the search or the sorting this is picture of what it likes
i am using bootstrap 4

You are missing <tr> both on your <thead> and <tbody>
<thead style="color:black;">
<th>Product</th>
</thead>
should be:
<thead style="color:black;">
<tr>
<th>Product</th>
<tr>
</thead>
and inside you tbody while:
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<tr>
<td>...</td>
</tr>
<?php endwhile; ?>
You're also closing your </tbody> on every while loop:
</tbody>
<?php
endwhile;
?>
</div> //where are you opening this div? Seems it should not be here
</table>
change to:
<?php endwhile; ?>
</tbody>
</table>
This changes should make your DataTable work as expected.

Malformed html, loops wrong, missing tr tag, etc. Should be something like this.
<div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">
<thead style="color:black;" >
<th>id</th>
<th>Product</th>
<th>Price</th>
<th>Weight</th>
<th>Image</th>
<th>Type</th>
<th>Type 2</th>
</thead>
<?php
$get = mysqli_query($conn,"SELECT * FROM products;");
?>
<tbody>
<?php
while ($row=mysqli_fetch_array($get)) {
$id=$row['product_id'];
$name=$row['product_name'];
$type2=$row['product_type'];
$weight=$row['weight'];
$price=$row['product_price'];
$type=$row['type'];
$img=$row['img'];
$get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<tr>
<td><?php echo $id;?></td>
<td><?php echo $name;?></td>
<td>$<?php echo $newprice;?></td>
<td><?php echo $weight;?> g</td>
<td>
<img src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
</td>
<td><?php echo $type;?></td>
<td><?php echo $type2;?></td>
</tr>
?>
<?php endwhile; ?>
<?php } ?>
</tbody>
</table>
</div>

Adding new select form with options from database

I have been trying to dynamically add a new dropdown list form using javascript. I have no idea how I should proceed with it. What I have rightnow is a html form page with a javascript that allows me to add a new row of text input form. html Form
Here is my current code for this page.
<?php
include('session.php');
?>
<?php
$ItemID = "ItemID";
$ItemName = "ItemName";
$UnitPrice = "UnitPrice";
$sql = "SELECT ItemID,ItemName,UnitPrice FROM Item";
$result = $db->query($sql);
$sql2 ="SELECT BranchID,BranchLocation FROM Branch";
$result2 = $db->query($sql2);
$sql4 ="SELECT MemberID FROM Membership";
$result4 = $db->query($sql4);
?>
<html>
<head>
<title>Add Sales</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-center">
<h1>Add new Sales Record</h1>
</div>
<div class="container">
<button class="w3-button w3-black w3-round-large">Back</button>
</div>
<div class="container" align="right">
<table class="table-sm">
<tbody>
<tr class="table-primar">
<th scope="col" style="padding-right: 50px;">ItemID</th>
<th scope="col" style="padding-right: 50px">ItemName</th>
<th scope="col">UnitPrice</th>
</tr>
<?php
while($rows = $result->fetch_assoc()) {
?>
<tr class="contents">
<td><?php echo $rows[$ItemID]; ?></td>
<td><?php echo $rows[$ItemName]; ?></td>
<td><?php echo $rows[$UnitPrice]; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<hr>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form action="addsales.php" method="post">
<table class="">
<table class="table table-bordered table-hover">
<thead>
<tr >
<th class="text-center">
Branch ID
</th>
<th class="text-center">
MemberID
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="branchid">
<option selected></option>
<?php
while($rows2 = $result2->fetch_assoc()){
?>
<option value="<?php echo $rows2["BranchID"];?>"><?php echo $rows2["BranchLocation"];?></option>
<?php
}
?>
</select>
</td>
<input type="hidden" value="<?php echo $login_session; ?>" name='employeeid' class="form-control"/>
<td>
<select name="memberid">
<option selected></option>
<?php
while($rows4 = $result4->fetch_assoc()){
?>
<option value="<?php echo $rows4["MemberID"];?>"><?php echo $rows4["MemberID"];?></option>
<?php
}
?>
</select>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
ItemID
</th>
<th class="text-center">
Amount
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<input type="text" maxlength ="10" name='item[0][itemid]' placeholder='ItemID' class="form-control"/>
</td>
<td>
<input type="number" name='item[0][amount]' placeholder='Amount' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
<input class="w3-button w3-black w3-round-large" type="submit" name='submit' value="Submit"/>
</form>
<button id="add_row" class="w3-button w3-black w3-round-large" style="position: absolute; right: 20px;">New row</button>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr' + i).html("<td><input name='item["+i+"][itemid]' placeholder='ItemID' maxlength='10' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][amount]' placeholder='Amount' class='form-control input-md'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
</script>
</body>
</html>
I want to change the javascript code so that instead of adding a new text input form, it will add a select form with options from the database. Something similar to this.
<td>
<select name="memberid">
<option selected></option>
<?php
while($rows4 = $result4->fetch_assoc()){
?>
<option value="<?php echo $rows4["MemberID"];?>"><?php echo $rows4["MemberID"];?></option>
<?php
}
?>
</select>
</td>
I am really new to all this php and javascript, so my code may look a bit off. Thank you for your help in advance.

JQuery Datatable is only working with empty (no data) tables

When the table is empty, Datatables works and shows no data available ( with pages and search etc..) But when a single row is inserted, Datatables breaks.
I am getting the data to the table using PHP and has used this method in the past and worked fine.
I am assuming that since it works with empty tables, the problem is not with the linking of scripts etc.
Any help would be great, thank you.
I have tried to see if there is a problem within the HTML by correcting tags etc but I cant seem to identify the problem.
<div class="tab-pane active" id="queries">
<hr>
<table id="table1" class="table table-striped ">
<thead>
<tr class="sticky" >
<th>Date of Complaint</th>
<th>Reference</th>
<th>Name</th>
<th>Surname</th>
<th>Subject</th>
<th> </th>
</tr>
</thead>
<?php
//process $result
echo "<tbody>";
while ($row = mysqli_fetch_assoc($queriesresult2)) {
;
echo "<tr>";
echo "<td>".$row['Data1']."</td>";
echo "<td>".$row['Data2']."</td>";
echo "<td>".$row['Data3']."</td>";
echo "<td>".$row['Data4']."</td>";
echo "<td>".$row['Data5']."</td>";
echo "<td><a class=\"btn btn-danger\" href=\"editQUERY?id=".$row['id']."\">Edit</a></td>";
echo "</tr>";
}
echo "</tbody>";
?>
</table>
<hr>
</div>

I see you use bootstrap dataTables. Try this code, it should work and you will have your search bars:
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<div class="tab-pane active" id="queries">
<hr>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_assoc($queriesresult2)) { ?>
<tr>
<td><?= $row['data1'] ?></td>
<td><?= $row['data2'] ?></td>
<td><?= $row['data3'] ?></td>
<td><?= $row['data4'] ?></td>
<td><?= $row['data5'] ?></td>
<td><a class="btn btn-danger" href="editQUERY?id="<?= $row['id'] ?>">Edit</a></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('#example').DataTable( {} );
} );
</script>
</body>
</html>

Stripe checkout pull value from html

I am going to be placing a value in a custom data type. I am using stripe checkout and am trying to have it so a span text content, so that I can turn that value/text into a variable.
HTML:
<!--Totals-->
<div class="col-xs-12 col-sm-6 pull-right">
<p class="lead">Amount Due <?php echo '$date'; ?> + <?php echo '$paymentdatesetting'?></p>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th style="width:50%">Subtotal:</th>
<td id='subtotal'>$subtotal</td>
</tr>
<tr>
<th>Tax ($tax-country)</th>
<td><?php echo '$total-tax'; ?></td>
</tr>
<tr>
<th>Shipping:</th>
<td><?php echo '$shipping'; ?></td>
</tr>
<tr>
<th>Total:</th>
<td>$<span id='total'>100</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!--/Totals-->
Ignore the php code that is mostly sudo code that is to remind me of things.
JS and stripe checkout code:
<script type="text/javascript">
var totalvalue = document.getElementById("#total").textContent="newtext";
</script>
<form action="/your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js"
class="stripe-button"
data-key="pk_test_HwlcQ0e8VwlFkQJu46vynuPT"
data-amount= totalvalue
data-name="SeaitManageit"
data-description="Inovice"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-currency= invoicecurency>
</script>
</form>