I need to create a checkbox that hide the rows that contain MULTIPLE in CARS value from a CRUD.
This is the part where I need to implement the checkbox:
<body>
<?php while($row = $resultado->fetch_array(MYSQLI_ASSOC)) { ; ?>
<form name="form">
Hiden Multiple: <input type="checkbox" id="ck"
***onclick="hide if $row['Cars']= Multiple, if not show :D "***/>
</form>
<table id="tabla" border="1">
<tr>
<td><?php echo $row['ID']; ?></td>
</tr>
<tr>
<td><?php echo $row['Name']; ?></td>
</tr>
<tr>
<td><?php echo $row['Years']; ?></td>
</tr>
<tr>
<td><?php echo $row['Cars']; ?></td>
</tr>
</table>
</body>
I can point you in the direction, but you need to code it yourself.
PHP / HTML: you need one form, so place your outside your while-loop
PHP / HTML: add an css class to the table when condition "$row['Cars'] == 'Multiple'" is true eq:
Javascript: hide / show elements with class "has_multiple_cars" when checking/unchecking the checkbox.
Yes, only found this java and work but with de number of the line:
<script type="text/javascript">
function ocultarFila(numFila) {
var form = document.form;
fila = document.getElementById('tabla').getElementsByTagName('tr')[numFila];
if(form.ck.checked == true) {
fila.style.display = 'none';
} else {
fila.style.display = '';
}
}
</script>
</head>
<body>
<?php while($row = $resultado->fetch_array(MYSQLI_ASSOC)) { ;
?>
<form name="form">
Hiden Multiple: <input type="checkbox" id="ck" onclick="ocultarFila(1)"/>
</form>
Can make a condition for me? I'm starting to program and I do not find the right sentence, thanks!
Related
I'm trying to conditionally set the value of a form action attribute depending on whether a checkbox is ticked or not.
I have the following Javascript code:
function validate()
{
var f = document.getElementById("confirmForm");
f.setAttribute('method',"post");
if (document.getElementById('confirmOptionCompare').checked)
{
f.setAttribute('action',"comparison.php");
} else {
{
f.setAttribute('action',"bookConfirm.php");
}
}
}
return true;
}
I'm including the above in my HTML document as follows:
<script type="text/javascript" src="code/scripts.js"></script>
I'm trying to trigger it as follows, but it doesn't navigate to the page I need it to navigate to:
<form id="confirmForm" onsubmit="return validate()">
<p>Click confirm to go to the next step:</p>
<button type="submit" name="confirm">Confirm</button>
</form>
The checkbox that should trigger the if is worded as follows (in a table):
<tr>
<td><?php echo $bookingOutput['name']." ".$bookingOutput['surname'];?></td>
<td><?php echo $bookingOutput['email']; ?></td>
<td><?php echo $bookingOutput['checkIn']." -> ".$bookingOutput['checkOut'];?></td>
<td><?php echo $bookingOutput['daysStaying']; ?></td>
<td><?php echo $bookingOutput['hotel'];?></td>
<td><?php echo "R".$dailyRate ?></td>
<td><?php echo $confirmationObj->ratePerDay; ?></td>
<td><input type="checkbox" name="confirmOptionCompare" id="confirmOptionCompare"/> </td>
</tr>
The checkbox is the final option above.
I'm not sure what I'm doing incorrect here. Any assistance would be greatly appreciated.
Your code should work
In any case here is simpler version
document.getElementById("confirmForm").addEventListener("submit",function() {
this.method="post"
this.action = document.getElementById('confirmOptionCompare').checked ? "comparison.php": "bookConfirm.php";
})
<form id="confirmForm">
<p>Click confirm to go to the next step:</p>
<button type="submit" name="confirm">Confirm</button>
</form>
<input type="checkbox" name="confirmOptionCompare" id="confirmOptionCompare"/>
That said - you can submit and do a redirect simply by setting the header in the PHP
if (isset($_POST["confirmOptionCompare"])) header("location: comparison.php");
die();
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.
I have an admin panel that I am creating. I have a left panel section and then the right side which shows the div when the panel button is clicked. I created a fiddle to show what it looks like and to help me explain this...
https://jsfiddle.net/jq8c51c9/
In the Fiddle it works just like it should, but I took out all of my php. The problem is around the Announcements div, it shows the div for the League Dues under it. Also once you click on announcements and then click on another panel button, if I click on Announcements again the only thing that will show up is this..
Announcements Current Announcements
League Dues
Again this is NOT doing this in the Fiddle.
Here is the full code for the area that the issue resides in. I have been stuck on this forever and cannot figure out why I am having difficulties with only these two divs.
Does anyone see what it is that I am doing wrong?
Announcements
try {
//Prepare
$con = mysqli_connect("localhost", "", "", "");
if ($user_stmt = $con->prepare("SELECT `id` FROM users")) {
$user_stmt->execute();
$user_stmt->bind_result($user_id);
if (!$user_stmt) {
throw new Exception($con->error);
}
$user_stmt->store_result();
$user_result = array();
//while ($user_row = $user_stmt->fetch()) {
?>
<div class="announcement_success"></div>
<p>Add New Announcement</p>
<form action="" method="POST" id="insert_announcements">
<input type="hidden" value="<?php echo $userid; ?>" id="approved_id" name="user_id" />
<textarea rows="4" cols="50" id="announcement_message" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
<label for="contactButton">
<button type="button" class="contactButton" id="submit_announcement">Add Announcement</button>
</label>
</form>
<?php
if ($announcements_stmt = $con->prepare("SELECT * FROM announcements")) {
$announcements_stmt->execute();
$announcements_stmt->bind_result($announcements_id, $announcements_user_id, $announcements_messages, $announcements_date);
if (!$announcements_stmt) {
throw new Exception($con->error);
}
$announcements_stmt->store_result();
$announcements_result = array();
?>
Current Announcements
<table>
<tr>
<th>ID</th>
<th>Username</th>
<th>Message</th>
<th>Date</th>
</tr>
<?php
while ($row = $stmt->fetch()) {
?>
<tr>
<td><?php echo $announcements_id; ?></td>
<td><?php echo $announcements_username; ?></td>
<td><?php echo $announcements_messages; ?></td>
<td><?php echo $announcements_date; ?></td>
</tr>
</table>
<?php
}
}
}
}
catch (Exception $e)
{
echo "Error: " . $e->getMessage();
}
?>
</div>
<div id='dues'>League Dues</div>
</div>
You have an error when building the announcement-table.
The closing </table> tag is inside the while loop, so the html will be screwed up, making everything after the closed table disappear.
So change the while loop to:
....
<?php
while ($row = $stmt->fetch()) {
?>
<tr>
<td><?php echo $announcements_id; ?></td>
<td><?php echo $announcements_username; ?></td>
<td><?php echo $announcements_messages; ?></td>
<td><?php echo $announcements_date; ?></td>
</tr>
<?php
}
?>
</table>
<?php
....
Anyway, I recommend to build your html first in a variable and echo it out later alltogether. That makes cleaner code and reduces risk of inconsitency of html tags. When using with HEREDOC you even don't have to bother about quotes.
In your case that could for example look like that:
<?php
$table_head = <<<EOT
<tr>
<th>ID</th>
<th>Username</th>
<th>Message</th>
<th>Date</th>
</tr>
EOT;
$table_content = "";
while ($row = $stmt->fetch()) {
$table_content.= <<<EOT
<tr>
<td>$announcements_id</td>
<td>$announcements_username</td>
<td>$announcements_messages</td>
<td>$announcements_date</td>
</tr>
EOT;
}
$announcement_table = "<table>".$table_head.$table_content."</table>";
echo $announcement_table;
I have a jquery dataTable (this is link) in each row there are a checkbox! I whish that when the checkbox is checked the row color change!
I try in this way:
tableCode;
<table id="tabellaOrdinaFarmaci" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Codice Farmaco</th>
<th>Nome Farmaco</th>
<th>Quantità </th>
<th>Quantità di alert</th>
<th>Stato</th>
<th></th>
</tr>
</thead>
</thead>
<tbody>
<?php foreach ($query as $row): ?>
<tr>
<td><?php echo $row->aic; ?></td>
<td><?php echo $row->denominazione ?></td>
<td><?php echo $row->quantita; ?></td>
<td><?php echo $row->alert; ?></td>
<td><?php echo $row->stato; ?></td>
<td> <input type="checkbox" name="radiog_lite" id="<?php echo $row->aic; ?>" class="css-checkbox" />
<label for="<?php echo $row->aic; ?>" class="css-label"></label>
</td>
</tr>
<?php endforeach; ?>
</tbody>
jQuery code:
jQuery(document).ready(function() {
jQuery('input').click(function() {
jQuery(this).parents("tr").css('background-color', 'yellow');
});
});
This code color only the rows that have an index odd!If I inspect the element from the browser background-color: yellow is added to all rows! Help me thanks in advance!
I think that the problem is bootstrap dataTable.
if you want only that row to change color for which checkbox is checked then you have to use closest() and use change event for it:
jQuery('#tabellaOrdinaFarmaci input:checkbox').change(function() {
if(this.checked) // check if checkbox checked then change color of row
jQuery(this).closest("tr").css('background-color', 'yellow !important');
});
jQuery('#tabellaOrdinaFarmaci input:checkbox').change(function() {
if(this.checked) // check if checkbox checked then change color of row
jQuery(this).closest("tr").css('background-color', 'yellow !important');
});
convert angulerjs
Use closest() to find the parent <tr>
Your elements are getting appended later to the DOM, use event delegation,
jQuery(document).ready(function() {
jQuery(document).on('click','input',function() {
jQuery(this).closest("tr").css('background-color', 'yellow');
});
});
I have an HTML which displays data from a database table. There'a checkbox field, which stores id of the user. And when I click on a row, that ID has to be passed to another page using a JavaScript function. But I have encountered a few errors. I don't know where I went wrong.
This is my Javascript function. It is used to make the table rows clickable. SO when I click on a row, the corresponding ID is passed to editgroup.php page.
<script>
$('table.table tbody tr').click(function(event)
{
if(event.target.type === 'checkbox')
{
event.preventdefault()
}
else
{
window.location='edituser.php?val=<?php echo $id; ?>';
}
});
</script>
Below given is my table:
<table id="edituser" class="clickable"
<thead>
<th></th>
<th>UserID</th>
<th>Username</th>
</thead>
<tbody>
<?php
for($i=0; $i<$x; $i++)
{
$id= $val_array[$i]['id'];
$userName= $val_array[$i]['userName'];
?>
<tr>
<td class="text-center"><input type="checkbox" value="<?php echo $id; ?>"></td>
<td><?php echo $id; ?></td>
<td><?php echo $userName; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
you have to make some change
First in your tr add id like this
<?php
for($i=0; $i<$x; $i++)
{
$id= $val_array[$i]['id']; //data from database
$userName= $val_array[$i]['userName']; //data from database
?>
<tr id="<?php echo $id;?>"> <!-- add id here -->
<td ><input type="checkbox" value="<?php echo $id; ?>"></td>
<td><?php echo $id; ?></td>
<td><?php echo $userName; ?></td>
</tr>
<?php } ?>
now your JS
<script>
$('table.clickable tbody tr').click(function(event){
if(event.target.type === 'checkbox'){
event.preventdefault()
}else{
var val = $(this).attr('id');
window.location='edituser.php?val='+val;
}
}); </script>
Your Javascript will be
$('table.table tbody tr').click(function(event){
if(event.target.type === 'checkbox'){
event.preventdefault()
}else{
var value = (this).find("input[type='checkbox']").val(); /* Get value from clicked tr Checkbox */
window.location.replace('edituser.php?val='+value); /* Pass the value */
}
});
Create new function with dynamic id for your table row
<tr onclick="edit_user(<?php echo $id;?>)" >
....
</tr>
Then you can find your row of where you have to click
<script>
function edit_user(user_id) {
if(user_id != '') {
window.location='edituser.php?val='+user_id;
}
}
</script>
Or else
This is more even simple your code.
<input type="checkbox" value="<?php echo $id; ?>" onclick="document.location.href='edituser.php?val=<?php echo $id; ?>'">