PHP checkbox only showing first value - javascript

I am trying to iterate the row data of each message for each value in the database by a checkbox as when clicked you get the string value on this row
the Code:
<div id="Ticket" style="display:none;" class="tabcontent">
<table class="table">
<thead>
<tr>
<th>Ticket ID </th>
<th>username</th>
<th>Data published</th>
<th>Subject</th>
<th>problem</th>
<th>Statues</th>
<th>Solved?</th>
<th>More Details</th>
</tr>
</thead>
<tbody>
<?php
$query=" Select * FROM tickets where resolved=0";
$result_opened = mysqli_query($db, $query);
while($row = mysqli_fetch_array($result_opened)){ ?>
<tr>
<td data-label="id"><?php echo $row['id']?></td>
<td data-label="username"><?php echo $row['username']?></td>
<td data-label="publish"><?php echo $row['published']?></td>
<td data-label="subject"><?php echo $row['subject']?></td>
<td data-label="problem"><?php echo $row['problem']?></td>
<td data-label="">Open</td>
<td> </i> <br/><br/>
</td>
<td><input type="checkbox" id="toggle">
<label for="toggle">see more</label>
<dialog >
<h>Message</h><br><br>
<p>
//Here I am getting only the first value//
<?php echo $row['message'] ?>
</p>
<label for="toggle">close</label>
</dialog></td></tr>
<?php }?>
</tbody>
</table>
</div>
but I keep on getting only the last value in the specific row
image:
I tried many ways to fix it but the main problem is its only getting the first value in the while loop.

The problem arises because you are assigning same id to all checkbox component.
Instead use this -
input type="checkbox" id="toggle-<?=$row['id']?>">

Related

Create an array of text fields using data from a database and use the values from the fields to do calculate

I would like to fetch items and item prices from database and use it to create an array of input fields for quantity and amount. Then use Jquery to automatically fetch the values of quantity as I type and multiply it by the price to display the amount in the amounts field for each item.
At the same time, the totals value (which is sum of all amounts) should also be displayed.
This is restricted to only the items that have been checked (selected).
<table class="form" id='tab1e'>
<tr>
<th> </th>
<th style="text-align: left;">Material Name</th>
<th style="text-align: center;">Quantity</th>
<th style="text-align: center;">Unit Price</th>
<th style="text-align: center;">Amount</th>
<th style="text-align: center;">Currency</th>
</tr>
<?php
foreach($database_result as $value){
?>
<tr>
<td>
<input type="checkbox" name="checkboxes[]" value="<?php echo $row['price']."".$row['item_name'] ?>">
</td>
<td style="width: 150px">
<?php echo $row['item_name'] ?>
</td>
<td>
<input name="qnty[]" id="qnty">
</td>
<td>
<input name="price" class="form-control" value="<?php echo $row['price']) ?>" id="price">
</td>
<td>
<input name="total_amount[]" class="text form-control" readonly="readonly" id="total_amount">
</td>
</tr>
<?php } ?>
<tr>
<td>Total Amount</td>
<td style="text-align: right;" id="totalpop"></td>
<td></td>
</tr>
</table>
First thing is the inputs should have different ids.
Now, you can use onchange event to call a function when input value changes. You can use plain javascript for that. Here's an example:
<html>
<body>
<script>
function o(id) {
return document.getElementById(id);
}
function updatePrice(id) {
if (!o('qnty'+id).value.match(/^[0-9]+$/)) {
alert('Invalid quantity');
o('total'+id).value = '0';
return false;
}
// Similar check for price
o('total'+id).value = parseInt(o('qnty'+id).value) * parseFloat(o('price'+id).value);
}
</script>
<input name="qnty[]" onchange="updatePrice('1')" id="qnty1">
<input name="price" value="1" onchange="updatePrice('1')" id="price1">
<input name="total_amount[]" id="total1">
</body>
</html>
The 1 corresponds to row number, so you would need to change your PHP code so it has a row number (can be just a simple $i=1; before the loop and $i++; in the end of every loop iteration).

How to get the id of the last element?

I have the list of products ,using below code
<table id="product">
<thead>
<tr>
<th style="width:30%;">Item Name</th>
<th style="width:11%;">Price</th>
<th style="width:11%;">Qty</th>
</tr>
</thead>
<tbody id="cart_contents">
<?php $i=1;
foreach($cart as $line=>$item)
{
?>
<tr>
<td style="align:center;"><?php echo $item['name']; ?></td>
<td><input type="text" id="price_<?php echo $i;?>" value="<?php echo $item['price']; ?>" name="price"></td>
<td id="qnty"><input type="text" id="quantity_<?php echo $i;?>" value="<?php echo $item['quantity']; ?>" name="quantity"></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
I need to edit quantity and price fields of last added product.
<table width="297px" style="float:left" class="CSSTableGenerator">
<tr>
<td onclick="click_quantity();">Qty</td>
<td onclick="click_price();"> <a href="javascript:void(0);" >Price</a></td>
</tr>
</table>
function click_quantity(){
$("#table register").find("td qnty").each(function(){
var id = $(this).attr("id");
alert(id);
})
}
How to get the last quantity field's id, after clicking the Qty link?
I have tried some codes, but I am unable to get last element's id.
EX : id names are quantity_1, quantity_2, quantity_3, quantity_4.
How to get quantity_4 (last elment's id)?
HTML
<table id="product">
<thead>
<tr>
<th style="width:30%;">Item Name</th>
<th style="width:11%;">Price</th>
<th style="width:11%;">Qty</th>
</tr>
</thead>
<tbody id="cart_contents">
<?php $i=1;
foreach($cart as $line=>$item)
{
?>
<tr>
<td style="align:center;"><?php echo $item['name']; ?></td>
<td>
<input type="text" id="price_<?php echo $i;?>" value="<?php echo $item['price']; ?>" name="price"/>
</td>
<td class="qnty">
<input class="qnty_input" type="text" id="quantity_<?php echo $i;?>" value="<?php echo $item['quantity']; ?>" name="quantity"/>
</td>
</tr>
<?php
$i++;
} ?>
</tbody>
</table>
JS Code
function click_quantity(){
var id = $("#cart_contents tr:last-child .qnty_input").attr("id");
// rest of your logic
}
1) you are using same ID in loop, that is not valid;
2) I think your js is wrong, use : $("#register").find("#qnty"), but has to be find('.qnty')
Try this one.
var last_id = $( 'table tbody tr td:last-child').attr( 'id' );
To get the last row(td) in table you can use this,
$('table tbody tr td:last-child')
In order to get last child element you can make use of Try to use last property of jquery
$("#cart_contents td:last").find('input[type=text]').attr('id');
$("#cart_contents td:last")
using this you'll find last column in each row so you have to use
$("#cart_contents tr:last-child td.qnty")

Update MySQL data from HTML using Javascript

I'm a beginner in HTML, PHP, JavaScript and MySQL. I've written a HTML code to enter data into a simple table containing columns "Name" and "Email" in MySQL by employing a seperate PHP file. Then I tried fetching the table contents using PHP. But now I need a little help in updating the data. My code is as follows:
enter code here<!DOCTYPE html>
<html>
<script language="javascript" src="update.js"></script>
<?php
$a=mysqli_connect("localhost","root","","test4");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($a,"select * FROM test");
?>
<table border="1" cellspacing="1" cellpadding"1">
<tr>
<th>pkid</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<?php
for ($i=0; $i<mysqli_num_rows($result); $i++)
{
$row = mysqli_fetch_array($result)
?>
<tr>
<td id="pkid"><?php echo $row['pkid'] ?></td>
<td id="name"><?php echo $row['name'] ?></td>
<td id="email"><?php echo $row['email'] ?></td>
<td><input type=submit onclick="myfunc()" value="View"/></td>
</tr>
<?php
}
?>
</table>
<form action="insert.php" method="post">
<table border="2">
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>
<input type="submit" value="Add">
</tr>
</table>
</form>
</html>
<?php
mysqli_close($a);
?>
Here is the Code for Update Data to MYSQL :
Html File :
<title>Listing Details for Update</title>
<?php
include ('config.php');
$tbl_name="user"; // Table name
$sql="SELECT * FROM $tbl_name";
$result=mysql_query($sql);
?>
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>
<table width="400" border="1" cellspacing="0" cellpadding="3">
<tr>
<td colspan="4"><strong>List data from mysql </strong> </td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center"><strong>pkid</strong></td>
<td align="center"><strong>Name</strong></td>
<td align="center"><strong>Email-Id</strong></td>
<td align="center"><strong>Action</strong></td>
</tr>
<?php
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><? echo $rows['pkid']; ?></td>
<td><? echo $rows['name']; ?></td>
<td><? echo $rows['email']; ?></td>
<td align="center">update</td>
</tr>
<?php
}
?>
</table>
</td>
</tr>
</table>
<?php
mysql_close();
?>
Here you can find the way for Update Single Field, Multiple Field Etc.,
http://php.sysaxiom.com/update_data.php
http://php.sysaxiom.com/update_multiple_data.php
If you need to change the contents of the table to have different rows/row data, (and you want to do it live) you will need to use AJAX. jQuery has fairly straightforward ajax usage, so for actual implementation, I would look to that. You'll also need another PHP file that just returns the raw HTML required to fill in the table. Pseudocode (jquery) below:
$.post("url","dataToPost",function(data){$("#table id where I want to put new data).innerHTML=data});
Basically, the $.post() posts the dataToPost to the url and sets the innerHTML of whatever you select to the resultant data.

How to enable/disable rows of textbox that enable rows are textbox which I selected with checkbox

I have a table of list student, I want to insert value of students into database. But this table have multiple checkbox, if I choose the checkbox of the table, the checkbox must be enable. I want to insert the value of student which the checkbox are enable. I used codeigniter to build this web.
this is my source
<?php $this->load->view("asisten/v_header");?>
<?php $this->load->view("asisten/v_top_menu");?>
<?php $this->load->view("asisten/v_sidebar");?>
<div class="content">
<div class="header">
<h1 class="page-title">Form Input Nilai Praktikum</h1>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>No</th>
<th>Nim</th>
<th>Nama Praktikan</th>
<th>Nilai 1</th>
<th>Nilai 2</th>
<th>Nilai 3</th>
<th>Nilai 4</th>
</tr>
</thead>
<tbody>
<?php if($list_praktikan->num_rows()>0)
{
$no=$off+1;
foreach($list_praktikan->result()as $data):
?>
<tr>
<td><input type="checkbox"/></td>
<td><?php echo $no;?></td>
<td><?php echo $data->nim;?></td>
<td><?php echo $data->nama;?></td>
<td><input type="text" class="input-mini" name="id_nilai1"/></td>
<td><input type="text" class="input-mini" name="id_nilai2"/></td>
<td><input type="text" class="input-mini" name="id_nilai3"/></td>
<td><input type="text" class="input-mini" name="id_nilai4"/></td>
</tr>
<?php
$no++;
endforeach;
}?>
</tbody>
</table>
</div>
<?php $this->load->view("asisten/v_footer");?>
I think
<input type="checkbox" id="name<?php $i;?>" onclick="encChbox(<?php echo $i;?>)" value="">
$i means increment a variable for identify the checkbox. with the help of the function parameter we can get the value of that checkbox.
encChbox is a function. we can write the process in this function. insert or other process . This is one idea with the help of the idea you can....

PHP - UPDATE a row in a dynamic HTML table

I have a dynamic table that I created in HTML:
<table id="rounded-corner" width="51%" border="1" align="center" cellpadding="2" cellspacing="0">
<tr>
<th width="19%">Job Type</th>
<th width="24%">Job Description</th>
<th width="19%">Type of Piping</th>
<th width="19%">Scheduled Start Time</th>
<th width="19%">Scheduled End Time</th>
</tr>
<?php do { ?>
<tr>
<td nowrap><?php echo $row_selectJobs['JobType']; ?></td>
<td><?php echo $row_selectJobs['JobDesc']; ?></td>
<td><?php echo $row_selectJobs['PipeType']; ?></td>
<td align="center"><?php echo substr($row_selectJobs['TimeStart'],0,-3); ?></td>
<td align="center"><?php echo substr($row_selectJobs['TimeEnd'],0,-3); ?></td>
</tr>
<?php } while ($row_selectJobs = mysql_fetch_assoc($selectJobs)); ?>
</table>
I was wondering if there is a way to add a button to each row so that you can modify the contents of that row. Remember, it's a dynamic table. I'm new to PHP and I really just stole this code from Dreamweaver and modified it for my own needs.
jQuery would be pretty simple to do this for. In your do loop just add another TD and use echo to output something like
<input type='button' class='changeRow' value='Edit' />
For each of the other TD's you will first want to output the values inside a span with a classname something like
<span class="labelValue">..What your PHP actually outputs..</span>
Then a hidden textbox, or something like that depending on how you want to actually do the editing. Each with a className relating to that row. so
<input type='text' class='editInput' value='' style='display: none;'/> etc...
Then using jQuery you can link it all together to make it editable like
$(document).ready(function(){
$('.changeRow').click(function(){
var tb = $(this).parents('tr').find('input.editInput');
var label = $(this).parents('tr').find('span.labelValue');
if($(this).val() == 'Edit'){
tb.val(label.html());
label.hide();
tb.show();
$(this).val('Save');
}
else{
label.html(tb.val());
tb.hide();
label.show();
$(this).val('Edit');
}
});
});
So when your HTML is output, it would look something like this
<td> <!-- The extra td for your edit button -->
<input type="button" class="changeRow" value="Edit">Some Job Type</span>
</td>
<td nowrap>
<span class="labelValue">Some Job Type</span>
<input type="text" class="editInput" value="" style="display: none;" />
</td>

Categories

Resources