Copy table row data to a form in html
Joel Paxton’s Question:
I have a page which has a form/table.
I want to be able to click on a button at the end of a row, or the row itself and copy this data into another form on a separate html page, which can then be edited.
I know it probably has something to do with JQuery, however I have little to no experience with that.
If you require more details, I will happily provide.
EDIT:
Here is what it looks like now (it’s a table which has retrieved data from an xml file using SimpleXML):
<form name ="editEvent" method="post" action="editEvent.php">
<table border="1">
<tr bgcolor="#FFA500">
<th>ID #</th>
<th>Name</th>
<th>Start Time</th>
<th>End Time</th>
<th>Category</th>
<th>Description</th>
<th>Location</th>
<th>Picture Path</th>
<th>Edit/Delete</th>
</tr> <tr>
<td>1
<td>Climbing</td>
<td>09:00</td>
<td>09:30</td>
<td>Physical</td>
<td>Description of what is going on</td>
<td>where it is</td>
<td>a photo link</td>
<td><input type="submit" name="edit" class ="box" value="Edit/Delete"/></td>
</tr>
</table>
I want it to end up in a table like this:
<tr>
<td><input type="text" name="name" placeholder="Enter new event name..."/></td>
<td><input type="text" name="time" placeholder="Enter event start time..."/></td>
<td><input type="text" name="endtime" placeholder="Enter event end time..."/></td>
<td><input type="text" name="category"/></td>
<td><input type="text" name="description" placeholder="Enter a description of the event..."/></td>
<td><input type="text" name="loc"/></td>
<td><input type="text" name="picturePath" placeholder="Enter link to picture..."/></td>
<td><input type="submit" name="create" class="box" value="Create"/></td>
</tr>
Honestly, any help or even pointers in the right direction would be appreciated. I really don’t know what to do here. I’ve tried searching these forums and Google, but all I found is stuff on SQL and databases. I just want to transfer some HTML table row data on one page to a HTML form on another to be edited.
You need some methods of identification on the columns like class name. For eg: <td class="name">Climbing</td> then you can attach an event handler on the td of the row and fetch all the data and populate the form.
$("td").on('click', function() {
var tr = $(this).parent('tr');
var name = tr.find(".name").text();
// Grab other values like this
// and later populate the form
});
However, Instead of copying the data, an efficient solution would be to hold the primary key of the row in one of the td or on one of the data attributes and use it to fetch the record from the database and then fill up the form.
