Hi i'm making a project using php i just wonder how i can add checkbox on a table that indicate being selected. As I didn't find any question asked before, on how to toggle checkbox on click of a table row, so I'd like to share my approach to this.
here are my codes:
$list_equipments = array();
$con = new data_abstraction("resource_booking", "it_equipment_type");
if ($result = $con - > make_query() - > result) {
while ($data = $result - > fetch_assoc()) {
$list_equipments[] = $data;
}
} else {
die("SQL Error:".$con - > error);
}
$html - > draw_container_div_start();
$html - > draw_fieldset_header('');
$html - > draw_fieldset_body_start();
echo "<table width='600px' style='border-width:1px; border-style:solid;'>";
$counter = 0;
$no_columns = 2; //initialize 3 columns
$column_width = 110 / $no_columns; +
foreach($list_equipments as $key => $equipment) {
if ($counter % $no_columns == 0)
echo "<tr>";
echo "<td width='".$column_width.
"%' style='border-width:1px; border-style:solid'>";
draw_equipment($equipment);
echo "</td>";
if ($counter % $no_columns == $no_columns - 1)
echo "</tr>";
$counter++;
}
echo "</table>";
$html - > draw_fieldset_body_end();
$html - > draw_fieldset_footer_start();
$html - > draw_submit_cancel(true, '2', 'btn_submit', 'RESERVE');
$html - > draw_fieldset_footer_end();
$html - > draw_container_div_end();
$html - > draw_footer();
function draw_equipment($equipment) {
$equipment_name = $equipment['img_link'];
echo "<div style='text-align:left;width:120%'>";
echo "<img src='img/$equipment_name' alt='$equipment_name' width='155px'/><br/>";
echo $equipment['equip_type'];
}
echo "</form>";
return ob_get_clean();
While creating table you can add a td in which you can add a checkbox for each row like below
<td><input type= "checkbox" class="toggleCheckbox"></td>
And then using jquery you can handle click event on this like below
$("table tr").click(function(){
($(this).children(":last").trigger("click");
})
finally i have a solution on my question
<?php
$list_equipments = array();
$con = new data_abstraction("resource_booking", "it_equipment_type");
if ($result = $con->make_query()->result) {
while ($data = $result->fetch_assoc()) {
$list_equipments[] = $data;
}
} else {
die("SQL Error:" . $con->error);
}
$html->draw_container_div_start();
$html->draw_fieldset_header('');
$html->draw_fieldset_body_start();
echo "<table width='600px' style='border-width:1px; border-style:solid;'>";
$counter = 0;
$no_columns = 2; //initialize 3 columns
$column_width = 110 / $no_columns;
foreach ($list_equipments as $key => $equipment) {
if ($counter % $no_columns == 0)
echo "<tr>";
echo "<td width='" . $column_width . "%' style='border-width:1px; border-style:solid'>";
draw_equipment($equipment);
echo "</td>";
if ($counter % $no_columns == $no_columns - 1)
echo "</tr>";
$counter++;
}
echo "</table>";
$html->draw_fieldset_body_end();
$html->draw_fieldset_footer_start();
$html->draw_submit_cancel(true, '2', 'btn_submit', 'RESERVE');
$html->draw_fieldset_footer_end();
$html->draw_container_div_end();
$html->draw_footer();
function draw_equipment($equipment)
{
$equipment_name = $equipment['img_link'];
echo "<div style='text-align:left;width:120%'>";
echo "<input type='checkbox' class='toggleCheckbox'>";
echo "<img src='img/$equipment_name' alt='$equipment_name' width='120px'/><br/>";
echo $equipment['equip_type'];
}
echo "</form>";
return ob_get_clean();
Related
I have a form that i'm working on that will dynamically hide any selections in an optgroup, everything works fine except that the onchange() only fires the initial time when initial selection is made. I'm trying to make it so that the onchange() even fires every time that a user selects a new option. The unhiding of the div and initial selection work like I said.
Help please!
<script>
function toggleandhide() {
var cont = document.getElementById('cont');
if (cont.style.display == 'inline-block') {
cont.style.display = 'none';
}
else {
cont.style.display = 'inline-block';
}
var e = document.getElementById("vendor_id");
var str = e.options[e.selectedIndex].text;
var groups = document.getElementsByTagName('optgroup');
for (var i = 0; i < groups.length; i++) {
if (groups[i].label != str) {
var options = groups[i].childNodes;
for (var j = 0; j < options.length; j++)
options[j].style.display = 'none';
}
}
}
</script>
echo "<div class=\"table\">";
echo "<div class=\"table-row\">";
echo "<div class=\"table-cell\">";
echo "Cruise Line:";
echo "</div>";
echo "<div class=\"table-cell\">";
echo "<div class=\"selectWrapper\">";
echo "<select class=\"selectBox\" name=\"vendor_id\" id=\"vendor_id\" onchange=\"toggleandhide()\">";
echo "<option value=\"\"></option>";
foreach($vendors as $key2 => $val2 ){
echo "<option value=\"".$key2."\">".$val2."</option>";
}
echo "</select>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class=\"table\">";
echo "<div id=\"cont\" style=\"display: none;\" class=\"table-row\">";
echo "<div class=\"table-cell\">";
echo "Cruise Ship :";
echo "</div>";
echo "<div class=\"table-cell\" style=\"padding-left: 114px\">";
echo "<div class=\"selectWrapper\">";
echo "<select class=\"selectBox\" name=\"ship_id\">";
echo "<option value=\"\"></option>";
foreach($vendors as $r3 => $d3){
foreach( $true_list as $k => $r ){
if($d3==$vendor_name[$k]){
if(!empty($vendor_name[$k])){
echo "<optgroup label=\"".$vendor_name[$k]."\">";
asort($r);
foreach($r as $r2 => $d2){
echo "<option value=\"".$r2."\">".$d2."</option>";
}
echo "</optgroup>";
}
}
}
}
echo "</select>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
I have a php website that makes a table using data fetched from a database. In the table I have a input so that the user can select how many of each item they want to buy. I have successfully made the ids of each input different by concatenating the ids.
Here is the php that makes the table:
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['Article'] . "</td>";
echo "<td>" . $row['Prix'] . "</td>";
echo "<td>" . $row['PrixRetour'] . "</td>";
echo "<td>" . $row['QuantiteeMaximale'] . "</td>";
echo "<td>" . $row['Projet'] . "</td>";
echo "<td id=\"quantity" . $row['id'] . "\"><input type=\"number\" name=\"quantity\" id=\"quantity\"></td>";
echo "</tr>";
}
} else {
echo "0 results";
}
$conn->close();
?>
I need to write the total amount at the end of my table, but i don't know how to make a for loop in javascript so that the number in the input field is multiplied by the price. Is there an easy part of code that i could use to calculate the grand total price?
You don't need to do this in Javascript. You could just do it in your PHP code:
<?php
if ($result->num_rows > 0) {
$grandTotal = 0;
// output data of each row
while($row = $result->fetch_assoc()) {
$grandTotal += $row['Prix'] * $row['QuantiteeMaximale'];
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['Article'] . "</td>";
echo "<td>" . $row['Prix'] . "</td>";
echo "<td>" . $row['PrixRetour'] . "</td>";
echo "<td>" . $row['QuantiteeMaximale'] . "</td>";
echo "<td>" . $row['Projet'] . "</td>";
echo "<td id=\"quantity" . $row['id'] . "\"><input type=\"number\" name=\"quantity\" id=\"quantity\"></td>";
echo "</tr>";
}
echo "Grand Total: {$grandTotal}"; // you might want to end your table before this. I'll leave formatting up to you.
} else {
echo "0 results";
}
$conn->close();
?>
Also, here's a cleaner way to output your HTML:
<?php
if ($result->num_rows > 0) {
$grandTotal = 0;
// output data of each row
while($row = $result->fetch_assoc()) {
$grandTotal += $row['Prix'] * $row['QuantiteeMaximale'];
?>
<tr>
<td><?= htmlentities($row['id']); ?></td>
<td><?= htmlentities($row['Article']); ?></td>
<td><?= htmlentities($row['Prix']); ?></td>
<td><?= htmlentities($row['PrixRetour']); ?></td>
<td><?= htmlentities($row['QuantiteeMaximale']); ?></td>
<td><?= htmlentities($row['Projet']); ?></td>";
<td id="quantity<?= $row['id']; ?>"><input type="number" name="quantity"></td>
</tr>
<?php
}
echo "Grand Total: {$grandTotal}"; // you might want to end your table before this. I'll leave formatting up to you.
} else {
echo "0 results";
}
$conn->close();
?>
If you want to use the quantity field in the table itself, you could do something like this. It's a pretty quick solution. You'd probably want to refine it. But it's at least something to work with.
<?php
if ($result->num_rows > 0) {
echo "<table id='items'>";
// output data of each row
while($row = $result->fetch_assoc()) {
$grandTotal += $row['Prix'] * $row['QuantiteeMaximale'];
?>
<tr>
<td><?= htmlentities($row['id']); ?></td>
<td><?= htmlentities($row['Article']); ?></td>
<td><?= htmlentities($row['Prix']); ?></td>
<td><?= htmlentities($row['PrixRetour']); ?></td>
<td><?= htmlentities($row['QuantiteeMaximale']); ?></td>
<td><?= htmlentities($row['Projet']); ?></td>";
<td><input data-price='<?= floatval($row['Prix']); ?>' data-max-quantity='<?= intval($row['QuantiteeMaximale']); ?>' type="number" name="quantity"></td>
</tr>
<?php
}
?>
</table>
<p>Grand Total: $<span id='grandTotal'></span></p>
<script>
(() => {
const updateGrandTotal = (grandTotalEl, inputEls) => {
grandTotalEl.innerText = inputEls.reduce((total, inputEl) => {
const maxQuantity = parseInt(inputEl.dataset.maxQuantity)
if(parseInt(inputEl.value) > maxQuantity) inputEl.value = maxQuantity
if(parseInt(inputEl.value) < 0) inputEl.value = 0
const price = parseFloat(inputEl.dataset.price)
const quantity = parseInt(inputEl.value)
if(isNaN(quantity)) return total
return total + (price * quantity)
}, 0)
}
const tableEl = document.getElementById('items')
const grandTotalEl = document.getElementById('grandTotal')
const quantityInputEls = tableEl.querySelectorAll('input[name=quantity]')
quantityInputEls.forEach(el => el.addEventListener('keyup', () => updateGrandTotal(grandTotalEl, inputEls)))
})()
</script>
<?php
} else {
echo "0 results";
}
$conn->close();
?>
I have a program that displays authors book code and book title using php and
AJAX technology, but for some reason the data is not appearing in the table. I know my SQL code is correct as our instructor gave us the code for that, but something is preventing the data from appearing in the table. Any tips or suggestions would be appreciated!
<body>
<?php
$authorid = 0;
$authorid = (int) $_GET['authorid'];
if ($authorid > 0) {
require_once('dbtest.php');
$query = "SELECT * FROM author";
$r = mysqli_query($dbc, $query);
if (mysqli_num_rows($r) > 0) {
$row = mysqli_fetch_array($r);
} else {
echo "Title Not Returned<br>";
}
echo "<table border='1'><caption>Titles for </caption>";
echo "<tr>";
echo "<th>Book Code</th>";
echo "<th>Book Title</th>";
echo "</tr>";
$q2 ="SELECT wrote.author_number As ANo, wrote.book_code As BookCd, book.book_title As Title ";
$q2 .= " FROM wrote, book ";
$q2 .= " WHERE wrote.book_code=book.book_code ";
$q2 .= " AND wrote.author_number = ' ' ";
$q2 .= " ORDER BY book.book_title";
$r2 = mysqli_query($dbc, $q2);
$row = mysqli_fetch_array($r2);
while ($row) {
echo "<tr>";
echo "<td>" .$row['BookCd']. "</td>";
echo "<td>" .$row['Title']. "</td>";
echo "</tr>";
$row = mysqli_fetch_array($r2);
}
echo "</table>";
} else {
echo "<p>No Author ID from prior page</p>";
}
?>
</form>
</body>
The suspicious line is: AND wrote.author_number = ' '
Why is it empty?
Put a check after the second query:
$r2 = mysqli_query($dbc, $q2);
if (mysqli_num_rows($r2) > 0) {
echo "rows are Returned<br>";
} else {
echo "rows are Not Returned<br>";
}
$row = mysqli_fetch_array($r2);
i have a ajax function that is returning a set of values from php page.
i need to get the values to that is only required. how can i do this
ajax.js
function MakeRequest()
{
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", "ajax.php", true);
xmlHttp.send(null);
}
ajax.php
<?php
require_once('config.php');
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
$sql = 'SELECT * FROM thr';
mysql_select_db($dbname);
$retval = mysql_query( $sql, $conn );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
echo "<table border='1'>";
while($row = mysql_fetch_assoc($retval))
{
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['ther_name'] . "</td>";
echo "<td>" . $row['region'] . "</td>";
echo "<td>" . $row['phone_no'] . "</td>";
echo "<td>" . $row['address'] . "</td>";
echo "<td id='lat'>" . $row['corrd_lattitude'] . "</td>";
echo "<td id='lon'>" . $row['corrd_longitude'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($conn);
?>
i need only values of
$row['corrd_lattitude']
$row['corrd_longitude']
how to get the values of this
first you can fetch only required values from table..if i understood correctly you can use following query.
$sql = 'SELECT corrd_lattitude,corrd_longitude FROM thr';
it will return only tw0 column value from table.
$json = json_encode(array($row['corrd_lattitude'], $row['corrd_longitude']));
echo $json;
You could specify parameters with your request.
In GET method:
ajax.php?corrd_lattitude=true&corrd_longitude=true
and in php file you can check this in $_GET array ie:
<?php
[...]
echo "<table border='1'>";
while($row = mysql_fetch_assoc($retval))
{
echo "<tr>";
if ($_GET['id'] == true) {
echo "<td>" . $row['id'] . "</td>";
}
if ($_GET['ther_name'] == true) {
echo "<td>" . $row['ther_name'] . "</td>";
}
if ($_GET['region'] == true) {
echo "<td>" . $row['region'] . "</td>";
}
if ($_GET['phone_no'] == true) {
echo "<td>" . $row['phone_no'] . "</td>";
}
if ($_GET['address'] == true) {
echo "<td>" . $row['address'] . "</td>";
}
if ($_GET['corrd_lattitude'] == true) {
echo "<td id='lat'>" . $row['corrd_lattitude'] . "</td>";
}
if ($_GET['corrd_longitude'] == true) {
echo "<td id='lon'>" . $row['corrd_longitude'] . "</td>";
}
echo "</tr>";
}
echo "</table>";
mysql_close($conn);
?>
Better is use json (or plain values) instead of html - your js should pack values into html. It's better for server, client side should build html. Sry for my english.
use json:-----------
=========================================
$sql = "SELECT * FROM thr";
$rs = mysql_query($sql);
$res = mysql_fetch_assoc($rs);
if(mysql_num_rows($rs)>0){
echo json_encode(array('lats'=>$res['corrd_lattitude'],'lngs'=>$res['corrd_longitude']));
}else{
echo json_encode(array('lats'=>'','lngs'=''));
}
here lats and lngs are simply varaiable name to store values inside them and get the value on other page from lats and lngs varaibale.
enter image description here
The above image due value 19948 and the input value are not greater than the due value 19948. How to validate this in javascript or jquery or php?
<?php
$i = 0;
$sql = "select * from invoice where `cid`='5'";
$res = mysql_query($sql);
$numrows = mysql_num_rows($res);
while ($row = mysql_fetch_array($res)) {
$i = $i + 1;
echo "<tr>";
echo "<td>" . $row['customername'] . "</td>";
echo "<td>" . $row['totalamount'] . "</td>";
echo "<td>" . $row['paidamount'] . "</td>";
echo "<td>" . $row['dueamount'] . "</td>";
?>
<?php
echo "<td><input type='text' name='ichange$i' value='0' onkeyup='ivalue()' />
<input type='hidden' name='idue$i' value='$due' /></td>";
echo "</td>";
echo "</tr>";
}
echo "<input type='hidden' name='nrows' value='$numrows' />";
?>
<script>
function ivalue()
{
nrows=document.getElementsByName("nrows").item(0).value;
for(i=1;i<=nrows;i++)
{
ichange="ichange" + i;
idue="idue" + i;
if(document.getElementsByName(ichange).item(0).value>document.getElementsByName(idue).item(0).value)
{
alert("Value not greater than due value")
}
}
}
</script>
I suppose you want to alert the user if he enters a greater value than the due in the same row.
I would use jQuery here since you tagged it :
$('input[type="text"]').on('keyup',function(){
if($(this).val() > $(this).next().val()){
alert("Value not greater than due value")
}
})
You could add some classes to your html for an easier and more precise select.