If I have a table like this in an html form,
<form method="POST" action="a.php">
<table name="dataTable">
<tr>
<td>row one col one</td>
<td>row one col two</td>
<td>row one col three</td>
</tr>
<tr>
<td>row two col one</td>
<td>row two col one</td>
<td>row two col one</td>
</tr>
</table>
</form>
how can I access the table data when the form is submitted to p.php?
$dataList = $_POST['dataTable']; ???????
A straightforward work-around would be to add hidden fields to all your cells:
<form method="POST" action="a.php">
<table name="dataTable">
<tr>
<td>row one col one<input type="hidden" name="row_one_cell_one" value="row one col one" /></td>
<td>row one col two<input type="hidden" name="row_one_cell_two" value="row one col two" /></td>
etc...
It leaves your view unchanged, but you can acces the cells in your php script with this simple code:
$cellData = $_POST['row_one_cell_one'];
without any workarounds and conversions, you can't.
What you can do is converting your table in a serialized array with JavaScript before submitting and setting the result in a hidden input. Then you can read the value in PHP and de-serialize the array, getting all the values. If you do it right, you can even iterate over the rows and columns.
You can make use on JavaScript to render the table DOM,
and set it to a hidden field right before you do the submission,
so, PHP able to interpret is part of the $_POST
<form method="post" onSubmit="set_value()">
<table name="dataTable">
...
</table>
<input type="hidden" value="" id="hidden_table" name="hidden_table" />
</form>
<script>
function set_value()
{
var obj = document.getElementById("hidden_table");
var tbl = document.getElementsByName("dataTable")[1]
obj.value = tbl.innerHTML;
}
</script>
However, when using JavaScript DOM, it will return full specification of TABLE elements
include THEAD, TBODY ... etc
First link using the topic as keywords in google shows up this: http://wonshik.com/snippet/Convert-HTML-Table-into-a-PHP-Array
I'm sure you can adapt it to your problem.
Related
I've run into this problem twice now, I'll try to be brief:
I want a table where each entry has similar actions. Delete row from table, move row up, move row down. I'm having trouble being able to manipulate the data from any of the keys being pressed in what would appear to be an aesthetically pleasing or even directly functional way.
The problem may be how I'm naming them:
<tr><td>Example Row 1</td> <td><input name="delete_1" value="delete"></td></tr>
<tr><td>Example Row 2</td> <td><input name="delete_2" value="delete"></td></tr>
<tr><td>Example Row 3</td> <td><input name="delete_3" value="delete"></td></tr>
<tr><td>Example Row 4</td> <td><input name="delete_4" value="delete"></td></tr>
I want my PHP script to see which row I mean to delete when I click on Delete row 4 for example.
I believe it would be incredibly simple to make the value the id of the row and use that to manipulate the data, but then the text changes in the html element.
I've had some bizarre ideas to work around what I see as this problem, using while loops to check if $POST['delete . $incremented_value ] is set, etc but it is horribly overcomplicated.
Apologies if I'm asking a ridiculous question or being blind to the solution, thank you for reading.
change your html to the following
<from method="POST" action"somescript.php">
<table>
<tr><td>Example Row 1</td> <td><input type="checkbox" name="delete[]" value="1"></td></tr>
<tr><td>Example Row 2</td> <td><input type="checkbox" name="delete[]" value="2"></td></tr>
<tr><td>Example Row 3</td> <td><input type="checkbox" name="delete[]" value="3"></td></tr>
<tr><td>Example Row 4</td> <td><input type="checkbox" name="delete[]" value="4"></td></tr>
</table>
<button type="submit">Delete Checked</button>
</form>
then on the php side
$deletes = array_key_exists('delete', $_POST) ? $_POST['delete'] : [];
foreach($deletes as $delete) {
// do something
}
I'm trying to create a dynamic table, in other words, a table where the number of columns per row
isn't necessarily the same as the other rows
can be changed live by the user
in every added column, there is contained a dropdown box which is filled using a database request.
I would like to be able to fill this dropdown once when the page loads, and not every time a column is added(it's for a calendar, so worst case: multiple times per row = 31*x).
I'm using jquery 1.9 and php 5.3 for my programming.
I've tried with JSON and $.post(), but this escapes too much of the needed slashes and quotes, and due to my version 5.3 of php, I can't use the "DO_NOT_ESCAPE_ANYTHING" constants provided in php 5.4+ (and yes, I know that that name isn't right, it's by heart)
So, heart of the question:
How do I use a combination of jquery and php to put a HTML -tag in a javascript variable to output on a jquery-handled button-click.
jsfiddle: http://jsfiddle.net/pjc3y/3/
code:
HTML:
<form name="myform" id="myForm" action="#test">
<div>
<table id="persCalTable">
<tr id="DAY_0">
<td>
<input type="text" name="name" size="25" value="Enter your name here!" />
</td>
<td>
<button id="eventAdder">add event</button>
</td>
</tr>
</table>
<input type="submit" value="Submit" id="submitter" />
</div>
</form>
javascript:
function addCellToRow(row, cell) {
row.append(cell);
}
function expandCalendarTable(myObj) {
var DATA = myObj.closest('tr').attr('id').slice(4); //data is the number after DAY_
var selector = '#persCalTable #DAY_' + DATA; //selector is the table and the clicked row id
var cellHiddenField = '<input type="hidden" name="status" value="New" />';
var cellOtherData = "INSERT SELECT TAG HERE";
var cell = cellHiddenField + cellOtherData;
addCellToRow($(selector), cell); // add the cell to the row defined by the selector
eve.preventDefault(); // stop the page refresh(if not in a form, this is not needed, when in a form, this is needed)
//alert('Picked: ' + DATA);
}
$(document).ready(function () {
$("#submitter").click(
function (e) {
e.preventDefault();
alert($('#myForm').serialize());
});
$("[id^=eventAdder]").click(
function (e) {
e.preventDefault();
expandCalendarTable($(this));
});
});
While you can have differing columns per row in an HTML table, if you have the following:
<table>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
What you will end up with is a table with 3 columns, and in the second row the third cell will be empty and borderless. What you can do is use a seperate table for each row, set the widths as equal and calculate and set cell widths manually with jQuery.
As for the calendar. I would suggest you use JQueryUi, which has a great calender control or a similar library than going for a select. Either way, you can prepare the object ahead of time and store it in a variable. You will then have to use clone on it otherwise it will move to the last place you inserted it at.
$(function(){
// Prepare the select (obviously yours would be more complicated)
var select = $("<select>");
<?php for( $i = 0; $i < count($optionValue); $i++ ) { ?>
select.append($("<option value='<?php echo $optionValue[$i]?>'><?php echo $optionText[$i]?></option>"));
<?php } ?>
// Insert into relevant parts
$("#insert1").append(select.clone());
$("#insert1 select").attr("name", "select1");
$("#insert2").append(select.clone());
$("#insert2 select").attr("name", "select2");
})
I have a PHP script which generates a table with each row (supposedly) as a form. The table is generating very nicely, but for some reason the form tag is closing immediately. I have no idea why and it's making my cranky. Any ideas?
echo '
<form method="post" action="#" id="status_row_'.$row["name"].'">
<tr class="even">
<input type="hidden" name="category" id="category" value="'.$category[0]['category'].'">
<input type="hidden" name="error_level" id="error_level" value="'.$row['level'].'">
<input type="hidden" name="service_name" id="service_name" value="'.$row['name'].'">
<td class="status-icons" name="error_circle"><div class="'.$error_circle.'"></div></td>
//rows deleted here for clarity's sake
</tr></form>'
So the Inspect Element on the generated form shows: <form method="post" action="#" id="status_row_blahblah"></form> followed by all the rows.
Your html is broken. You're trying to open a form immediately after the opening <tr>, then closing it AFTER the closing <tr>. That's illegal html. <table> structures cannot be built like that. It should probably be something more like
<form>
<table>
<tr>
<td>...</td>
</tr>
</table>
</form>
Essentially you're trying to stuff your form into the void that exists between <tr> and <td> tags. Nothing should be there except the table structure:
<tr><p>hi there</p><td>go away</td></tr>
is illegal, most browsers will render the <p> OUTSIDE the table, usually before the opening <table> tag. That's why your form is showing up where it is - the browser is attempting to do the best it can with your broken html.
Are the forms different? Or linked together in some way (i.e. is each table row it's own UNIQUE form with, or is it one giant form with different fields in every row?
If it's the former, then create a form inside each ROW element like so:
<table>
<tr>
<td><form>FORM STUFF GOES HERE</FORM></td>
</tr>
<tr>
<td><form>FORM STUFF GOES HERE</FORM></td>
</tr>
<tr>
<td><form>FORM STUFF GOES HERE</FORM></td>
</tr>
</table>
If it's the latter, or if you only want one form submitted overall, then create the form tags outside the table, and have the form fields within the data cells:
<form>
<table>
<tr>
<td>FORM FIELD E.G. TEXT FIELD</td>
</tr>
<tr>
<td>FORM FIELD E.G. TEXT FIELD</td>
</tr>
<tr>
<td>FORM FIELD E.G. TEXT FIELD</td>
</tr>
</table>
</form>
It looks like you are closing the <tr> tag before closing the <form> tag.
The form element was closing incorrectly because, as some people pointed out, you apparently can't have <form> tags in between <tr> and <td> tags (I don't understand why, but it is what it is).
I found this solution as a workaround:
http://federmanscripts.com/2010/01/12/form-and-table-row-nesting-workaround/
I have a table where it's rows are generated by a foreach loop.
Each table row has two columns, one with a form and the other with the forms submitted data, which I have called notes. (and updates using a jQuery library without refreshing the browser).
<script>
$(".notes_column").each(function(){
var $myform = $(this).find('.notes_form');
var $mynotes = $(this).find('.notes');
$myform.validate({
submitHandler: function(form) {
$.post('process.php', $myform.serialize(), function(data) {
$mynotes.html(data);
});
}
});
}); // each function
</script>
<table id="myTable" class="tablesorter" border="1" cellpadding="5">
<thead>
<tr>
<th>Notes</th>
<th>Submit Note</th>
</tr>
</thead>
<tbody>
<?php
foreach($myarray as $myvar){
echo '
<tr>
<td>ID LIKE TO PLACE THE content of the div class="notes" HERE, HOW CAN I DO IT?</td>
<td class="notes_column">
<form class="notes_form" action="" method="post">
<input class="q" type="text" name="notes" size="30" placeholder="Place your notes here..." />
<input class="searchsubmit" type="submit" name="submit" value="Submit" />
</form>
<div class="notes"></div>
</td>
</tr>
';
}
?>
</tbody>
</table>
Right now I use a jQuery each function which iterates through each table column, and for each column with the class name ".notes_column" populates a div with the class "notes" with the submitted data.
The question is listed inside the code with capitalized letters, how can I populate the other column with the forms submitted data?
Any ideas?
Ty
I would create a <div> in the first <td> such as
<td>
<div class="put_notes_here">ID LIKE TO PLACE THE content of the div class="notes" HERE, HOW CAN I DO IT?</div>
</td>
Then populate it the same as you did before
$mynotes.closest("tr").find(".put_notes_here").html(data);
Change the selector for your each to $('#myTable tr'), then you can iterate through each in your table.
Then you could either do an each on the tr object to access each td, or make use of jQuery's :first-child and nth-child(2) etc in a subsequent selector
I am trying to get those data in the JSON format. Would you please help me to generate that? Please help I am not very familiar with jquery and php.
html code looks like this
<form>
<table>
<tr>
<td>//some code for other table elements</td><tr>
<tr>
<td>Critical Times (Coverage): </td>
<td rowspan="3" colspan="2">
<div>
<table width="100%" bgcolor="white" border="0px" name="criticalTime" id="criticalTime">
</table>
</div>
</td>
<td>
<input type="button" id="timeAdd" value="+"/><br>
<input type="button" id="timeRemove" value="-"/>
</td>
</tr>
<tr>
<td>//some code for other table elements</td>
</tr>
</table>
</form>
my .js file has the following to handle the addition of rows to the table when click the + button.
var rowCountr = 0;
var timeTable="<thead><tr bgcolor='E1ECFF'><th></th><th align='left'>Start Time</th><th align='left'>End Time</th></tr></thead>";
/* insert the html string*/
$("#criticalTime").html( timeTable );
/*Event for the +(Add) button in critical time table*/
var timeRwcntr=0;
timeRow="<tr><td><input type='checkbox' id='row'</td><td><input type='text' id='start' /></td><td><input type='text' id='end'/></td></tr>";
$('#timeAdd').click(function(){
$('#criticalTime').append(timeRow);
rowCountr++;
timeRwcntr++;
});
$('#timeRemove').click(function(){
$('#criticalTime tr:last-child').remove();
});
When I click the submit button from main form I need to get those values entered in the input fields and generate an JSON array to store those in database. Please help.
For this problem, I think that JSON may be overkill. You're just trying to send your table's input fields back to the server on a postback right? When you create your table rows, add a uniquely identifying number in the "name" attribute of your form controls <input name="'.$id.'_field" /> for example if you are rendering the table server-side; the code would be similar for javascript. Then, when you post back, you can loop through each row by counting and then access the POST variable you got back by referencing the name. Example:
for ($i = 0; $i < $rowcount; $i++) {
$field_value = $_POST[$i.'_field'];
...
}
JSON is great for more complex data sets, but in your case it sounds like you have structured two-dimensional rows and columns.