Get value of a table data on button click - php

I am building a online exam application, here paper name and no. of papers are retrieved from database. Now I want to get the paper code of that paper for which I clicked the start button. Code for the table is here:
<form method="post" action="exam_page.php" >
<table >
<tr style="background-color: #7F859E;color:white; height:50px;">
<th style="padding-left:140px; width:550px;">Paper</th>
<th style="padding-left:40px;">Time</th>
<th style="padding-left:40px;">Duration</th>
<th style="padding-left:40px; width:250px;"></th>
</tr>
<?php
$i=1;
while($row=mysql_fetch_array($rs)){?>
<tr style="height:80px; background-color: #CCCCCC;">
<td style="padding-left:40px;">
<input type="text" value="<?=$row['paper_code']?>" name="paper_code<?=$i?>" readonly><?=$row['paper_name']?>
</td>
<td style="padding-left:40px;">
<input type="text" value="<?=$row['time']?>" readonly style="width:90px;">
</td>
<td style="padding-left:40px;">
<input type="text" value="<?=$row['duration']?> Min" readonly style="width:90px;">
</td>
<td style="padding-left:40px;"><button style="width:100px;">Start</button></td>
</tr>
<?php $i++; } $_SESSION['exam']=$i; ?>
</table>
</form>

Name your submit button, (also make it a submit type) and assign the paper code to its value attribute.
<button type="submit" style="width:100px;" name="clicked" value="<?=$row['paper_code']?>">
Start
</button>
Now, in exam_page.php you can get the value of the clicked button from $_POST['clicked']. (Or whatever you decide to name it.)
To get the values from the other inputs associated with the button you clicked, you can add the paper code to their names instead of using $i.
<input type="text" value="<?=$row['time']?>" name="time[<?=$row['paper_code']?>]">
and in exam_page.php you can get the value from $_POST['time'][$_POST['clicked']], etc.
If they aren't intended to be editable in your form, though, I would recommend using something else to display them and just loading them from the database in exam_page.php instead. Otherwise, your users will be able to override the readonly attribute and submit different values.

Try using javascript onclick functions:
<script>
function getPaperCode(paperCode)
{
alert(paperCode);
}
</script>
Then edit your input add onclick event:
<input type="text" value="<?php echo $row['paper_code']; ?>" onclick="getPaperCode('<?php echo $row["paper_code"]; ?>');" name="paper_code<?php echo $i; ?>" readonly><?=$row['paper_name']?>
Once you click. it will alert the value of the button

passed your unique id value or examcode via hidden field like this
<input type="hidden" name="id" value="<?=$row['eid']?>">
and on button click perform query like
$id=$_POST['id'];
select * from table_name where id='$id';

Related

pass a dynamically created table on submit

I am building a simple application that will allow the users to add rows to a table and generate that table so the user can type in data into the rows and columns.
So far I have managed to create the rows dynamically jsfiddle
Now what I need to do is when the user hits generate (I am using PHP for this), the table must be shown in a html text area.
I did try the below code but didn't work
<form action="1.php" method="post">
<?php
echo $table = '<table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" >
<tr><td colspan=3>sdsdsdsds</td></tr>
<tr><td colspan=1>fsdfsf</td><td colspan=2>sdffsdfsf</td></tr>
</table>';?>
<textarea name="thetable" style="display:none"><?php echo $table ?></textarea>
<input type="button" name="add" value="Add 1 Column" id="addrows1" style="color:#3300FF; font-size:16px; " />
<input type="submit" name="gen" value="Generate Table" style="color:#3300FF; font-size:16px; " />
</form>
<?php
if(isset($_POST['gen']))
{
var_dump($_POST['thetable']);
}
?>
Any help on how i can fix this?
From yous jsfiddel, I've add <input> in your code.
$('#maintable tr:last').after('<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td></tr>');
Why didn't try to add <input>? Hope this help you
You can enable the contenteditable when generating your rows to make them editable instantly. You won't be needing to hit the generate button anymore but if you really want it to clicked first, then please feel free to edit this in any way you want. Here's an example:
HTML - It's still the same. I did nothing in here.
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" >
<tr>
<th align="center"> Roll No </th>
<th align="center"> First Name </th>
<th align="center"> Last Name </th>
</tr>
<tbody>
<tr><td>1</td><td>John</td><td>Sample</td></tr>
</tbody>
</table>
<input type="button" name="add" value="+Add" id="addrows" style="color:#3300FF; font-size:16px; " />
<input type="button" name="add" value="Generate table to edit" id="" style="color:#3300FF; font-size:16px; " />
SCRIPT - Put the additional code in every <td>. Put id too so you can get their values and save them into your database.
var counter = 1;
$("#addrows").click(function(){
$('#maintable tr:last').after('<tr><td id="col1'+counter+'" contenteditable="true">...</td><td id="col2'+counter+'" contenteditable="true">...</td><tdid="col3'+counter+'" contenteditable="true">...</td></tr>');
});
NOTE - If you want the generate table button to be clicked, you need to use jQuery ajax and a database (if you want to save the values you're going to create). I gave you some links that could help you. Hope I gave you a good start about your concern.
About contenteditable
About jQuery.ajax()
About serialize()
Tutorial on how to use contenteditable with PHP, MySQL, and jQuery
Ajax

Codeigniter Delete From Database Based on Class of HTML Element

I am using Codeigniter. I generate a view that contains a table within a form with <tr>s like this:
<tr>
<td><input name="set[2][order]" value="3">
<input type="hidden" name="set[2][ex_id]" value="1"></td>
<td><input name="set[2][weight]" value="60.00"></td>
<td><input name="set[2][reps]" value="5"></td>
<td><img class="deleteRowButton" src="/assets/images/icons/png/delete-3x.png" border="0" alt="Delete Set" title="Toggle Delete Set"/></td>
</tr>
I have a little jQuery script that toggles the class of the <tr> when the img 'delete-3x.png' is clicked:
<script>
$('.deleteRowButton').click (function() {
$(this).parents("tr").toggleClass( "deleteSet" );
});
</script>
so it looks like this:
<tr class="deleteSet">
All this does so far is change the opacity of the <tr> so I make it looks greyed out, just to signify that it has been selected for deleting.
What i want to achieve when the user submits the form and am not sure how to handle in CI, is somewhere along the line, in plain English code, saying:
if tr class = "deleteSet", then delete from db
At the moment all inputs are just written to database. so I need a way of recognising that the user want to remove an entry.
write one function in controller which delete item by id
Html :
<table>
<tr>
<td><input name="set[2][order]" value="3">
<input type="hidden" name="set[2][ex_id]" value="1"></td>
<td><input name="set[2][weight]" value="60.00"></td>
<td><input name="set[2][reps]" value="5"></td>
<td><img class="deleteRowButton" url="/your-controller-name/method-name/item-id" src="/assets/images/icons/png/delete-3x.png" border="0" alt="Delete Set" title="Toggle Delete Set"/></td>
</tr>
</table>
Js:
$('.deleteRowButton').off('click').on('click',function(){
var _this = $(this);
var url = $(_this).attr('url');
$.post(url,function(data){
$(_this).parents('tr').remove();
});
});
You need different logic, your backend will never know HTML class. It can only know POST/GET params.
What I recommend is:
User clicks on DeleteSet button on current line item.
Javascript adds that line item ID to somewhere (in memory or as HTML hidden property)
When you press "save" button it will send list of ID's that you want to delete.
Psudo Example
HTML
<tr>
<td><input name="set[2][order]" value="3"> <input class="set-id" type="hidden" name="set[2][ex_id]" value="1"></td>
<td><input name="set[2][weight]" value="60.00"></td>
<td><input name="set[2][reps]" value="5"></td>
<td><img class="deleteRowButton" src="/assets/images/icons/png/delete-3x.png" border="0" alt="Delete Set" title="Toggle Delete Set"/></td>
</tr>
JS
$('.deleteRowButton').click (function() {
$(this).disable(); // Don't want to duplicate ids
var id = $('.set-id', $(this).closest('tr')).val();
$('.submit-form').append('<input type="hidden" name="delete[]" value="' + id + '" />');
// Now when form will be submitted it will be populated with item ids you want to delete
});

PHP POST value from a looped table

Please help me out of this.....
I am designing a table which is inside a form.
the table is generated based on while loop.
In each row there is a download button.
when i click download the POST value should get the same row information.
But my POST variable is giving me the last row information only.
I tried using input-type as hidden... But it did not work
Here is the code for your reference
enter code here
<form name="simpleform" method="post" action="insert.php">
<?php
$data = "environment";
$user_name = $_SESSION['username'];
$serch = mysql_query("SELECT * FROM data WHERE (data_category = '" . $data . "') ");
while ($record=mysql_fetch_assoc($serch))
{?>
<tr class="warning">
<td >
<input type="text" value=<?php echo $record['data_ID'];?> readonly="readonly" >
<input type="hidden" value=<?php echo $record['data_ID'];?> name="dataid" />
</td>
<td >
<input type="text" value=<?php echo $record['data_name'];?> readonly="readonly" >
<input type="hidden" value=<?php echo $record['data_name'];?> name="dataname" />
</td>
<td >
<input type="text" value=<?php echo $record['data_downloads'];?> readonly="readonly">
<input type="hidden" value=<?php echo $record['data_downloads'];?> name="datadown" />
</td>
<td >
<input type="text" value="" >
<input type="hidden" value="" name="datause" />
</td>
<td>
<input type="submit" name="simplesubmit" value="Go to download" />
</td>
</tr>
<?php }
exit;
?>
</tbody>
</form>
The problem is that you are using the same name attribute for all your controls. Thus, when PHP receives the form, they get overwritten, and you only see the last value of the form.
The simplest way to avoid that is just appending [] to the end of your names -- eg name=dataid[]. This will make PHP take all arguments as an array, so you don't lose data.
The second problem, is that your submit button also has the same name - you should diversify it by using some row-specific data in its name, such as 'name="submit-'.$record['data_name'].'"'
For more info, more code from you is needed, such as what are the data you are printing like.
Every post button can have its name and value, so if you change your code to produce a traceable post button name you can just do whatever you want with that.
<table>
<tr>
<td>...</td>
<td>...</td>
<td><input type="submit" name="submit[1]" value="OK" />
</tr>
<tr>
<td>...</td>
<td>...</td>
<td><input type="submit" name="submit[2]" value="OK" />
</tr>
</table>
When the form is posted its very easy to capture which button is clicked;
if ($_POST["submit"]) {
$id = key($_POST["submit"]);
}
Thanks for info... and good response. As you said , i replaced the same and saw the post value is giving me all arguments as array. My purpose is to let the client download file that he clicks. so if the client click the first row button in the table, the post value should get only that Data_name. So that i can run a query to get the URL of that data_name and download

Is this possible to accomplish with html and php?

I've made the form below. Is it possible to make it that when user enters the number of fields, for example 6, that the table below has 6 rows. It would be great if it would be possible to make it without any submit button (so that the trigger for this action is exiting from the text input box).
Here is the html code of this form:
<fieldset>
<legend>Student Information</legend>
Number of fields: <input type="text"><br />
Total number of characters: <input type="text">
<br>
<br>
<table border="1">
<th></th>
<th>field</th>
<th>number of characters</th>
<tr>
<td>1</td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>2</td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
</fieldset>
If this is not possible (without submit button), than in which way would you accomplish the same result? Thank you for any help and/or suggestions.
PHP is server side, it runs only once, when the page is loading. HTML is not a programming language. You could generate the table with PHP, but only if you had a submit button that reloaded the page. If it has to happen because of a user event, it always needs to be done with Javascript.
That means, you will need Javascript to make this work without reloading the page. Ideally, you would use Jquery (Javascript's most popular plugin) to manipulate the DOM.
If you had this input :
<input id="field" type="text">
You could call the on-leave event like this :
$("p").focusout(function()
{
// Delete the previous table, and create a new one, here
});
As for creating the actual table, it isn't complicated, but it is a bit of work. You should read the following reference to start you up :
http://www.tutorialspoint.com/jquery/jquery-dom.htm
You will need to "install" JQuery before-hand, you can simple insert this at the top of your code :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Okay here is the post only script you require
<?php
$rows=2;
if(isset($_POST['submit']))
{
if($_POST['submit']=='Update')
{
if(isset($_POST['rows'])) $rows=max($rows, intval($_POST['rows'])); // minimum 2 rows
}
else
{
// process posted data here
// reset post or jump to another page
$_POST=array();
//header("Location:index.php");
//exit();
}
}
?>
<form method="post">
<fieldset>
<legend>Student Information</legend>
Number of fields: <input type="text" name="rows" value="<?php echo $rows; ?>"><br />
Total number of characters: <input type="text">
<input type="submit" name="submit" value="Update"/>
<br>
<br>
<table border="1">
<th></th>
<th>field</th>
<th>number of characters</th>
<?php
for($loop=1;$loop<=$rows;$loop++)
{
echo '<tr>';
echo '<td>'.$loop.'</td>';
echo '<td><input name="field['.$loop.']" value="'.$_POST['field'][$loop].'" /></td>';
echo '<td><input name="chars['.$loop.']" value="'.$_POST['chars'][$loop].'" /></td>';
echo '</tr>';
}
?>
</table>
<input type="submit" name="submit" value="Submit"/>
</fieldset>
</form>
It will default to 2 rows (minimum), and retain the data when you update the rows.
If the rows get reduced, then the end ones disappear
It certainly would be doable with just PHP.
So for example, if you typed in '6' rows you could catch the form post and do something like (template form for within the HTML):
<?php for($i=0; $<=$_POST['rows'];$i++): ?>
<!-- This being your whatever html for the table -->
<tr><td></td></tr>
<?php endfor; ?>

Populate text field with checkbox

I have a table with a column on prices and the next column is a check box to mark whether that item was paid. I was wondering how I could populate the text box with the amount when the check box is clicked.
Code:
<table>
<tr>
<td>Procedure</td>
<td>Amount</td>
<td align="center"><input type="checkbox"></td>
<input type="text" size="20" value="" class="currency">
</tr>
</table>
HTML
<table>
<tr>
<td>Procedure</td>
<td>Amount</td>
<td align="center">
<input type="checkbox">
</td>
<td>
<input type="text" size="20" value="" class="currency">
</td>
</tr>
</table>
JavaScript/jQuery:
$(function() {
$('table input[type="checkbox"]').change(function() {
var input = $(this).closest('td').next('td').find('input');
if ($(this).is(':checked')) {
var amount = $(this).closest('td').prev('td').text();
input.val(amount);
} else {
input.val('');
}
});
});
See a working example at: http://jsfiddle.net/KTQgv/2/.
Some code you can expand on:
<input type="checkbox" rel="textbox1" name="banana"/>
<textarea id="textbox1" ></textarea>
JS/jQuery:
$('input:checkbox').click(function(){
var tb = "#"+$(this).attr('rel');
if($(this).is(":checked"))
$(tb).append(this.name + "\n");
});
Fiddle: http://jsfiddle.net/maniator/hxkX3/
Semantically, a checkbox isn't really the best control to choose to initiate an action. I would have an edit or pay (something actionable) button/icon which initiates the action of allowing the user to enter a value.
However for the purposes of your example, the click event of the checkbox is enough to be able to change the contents of your table cell from the displayed text (if any) to a textbox.
Given
<td id="row_1">Unpaid</td>
Using
$('#row_1').html('<input type="text" name="txtRow1" />');
is simplistic, but enough to enable the user to type in a value which could then be posted to the server during a save action.

Categories