Mike Mike - 5 months ago 22
PHP Question

Copy data from HTML table to another HTML page

I'm not a complete noob, but I don't have more than a handful of months experience with

HTML
any help with this will be appreciated. I have a webpage that shows a table with several columns and several rows. I have an
Edit
link at the end of each row that takes you to another page that is supposed to make the data in the row editable. I can make the first page and the link takes me to another page, but i can't figure out how to get the data from the table row on the first page and put into the table on the second page. I want it to go from a table with 1 row selected to a table with 2 columns and 1 row for each of the columns in the first table.

Here's the page with the table:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing PHP</title>
<link rel="StyleSheet" href="StyleSheet.css" type="text/css">
</head>
<body>
<!--h2>This will pull down all the Names from the QDef table</h2-->
<link rel="StyleSheet" type="text/css" href="StyleSheet.css">
<p>4 Results</p>
<table class="tab"id="NameTable">
<thead>
<tr>
<th class="cell">Edit</th>
<th class="cell">TempID</th>
<th class="cell">Name</th>
<th class="cell">CountryCode</th>
<th class="cell">Budget</th>
<th class="cell">Used</th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td>
<a Href="#" data-id="1" data-target="TempIDColumn" onclick="window.open('FormToEditMaterial.php','FormToEditMaterial');">Edit</a>
</td>
<td contenteditable>1</td>
<td contenteditable>Win Temp</td>
<td contenteditable>TH</td>
<td contenteditable>1000000.000000000</td>
<td contenteditable>60000.000000000</td>
</tr>
</tbody>
<tbody>
<tr class="row">
<td>
<a Href="#" data-id="2" data-target="TempIDColumn" onclick="window.open('FormToEditMaterial.php','FormToEditMaterial');">Edit</a>
</td>
<td contenteditable>2</td>
<td contenteditable>Test Temp</td>
<td contenteditable>UK</td>
<td contenteditable>100000.000000000</td>
<td contenteditable>5000.000000000</td>
</tr>
</tbody>
<tbody>
<tr class="row1">
<td>
<a Href="#" data-id="3" data-target="TempIDColumn" onclick="window.open('FormToEditMaterial.php','FormToEditMaterial');">Edit</a>
</td>
<td contenteditable>3</td>
<td contenteditable>Number 3</td>
<td contenteditable>UK</td>
<td contenteditable>1000000.000000000</td>
<td contenteditable>50000.000000000</td>
</tr>
</tbody>
<tbody>
<tr class="row">
<td>
<a Href="#" data-id="4" data-target="TempIDColumn" onclick="window.open('FormToEditMaterial.php','FormToEditMaterial');">Edit</a>
</td>
<td contenteditable>4</td>
<td contenteditable>Number 4</td>
<td contenteditable>US</td>
<td contenteditable>50000.000000000</td>
<td contenteditable>.000000000</td>
</tr>
</tbody>
</table>
<br/>
</body>
</html>


Here's the Page that is supposed to allow me to edit the data from the table in the first page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FormToEditMaterial</title>
<link rel="StyleSheet" href="StyleSheet.css" type="text/css">
</head>
<body>
<table id="FormToEditMaterialTable">
<tr>
<th contenteditable="false" >Field Name</th>
<th contenteditable="false">Field to be edited</th>
</tr>
<tr contenteditable>
<td id="TempIDColumn" contenteditable="false">Name of Field</td>
<td>Data to be updated</td>
</tr>
<tr contenteditable>
<td id="NameColumn" contenteditable="false">Name of field 2</td>
<td>Data 2 to be updated</td>
</tr>
<tr contenteditable>
<td id="CountryCodeColumn" contenteditable="false">Name of field 3</td>
<td>Data 3 to be updated</td>
</tr>
<tr contenteditable>
<td id="BudgetColumn" contenteditable="false">Name of field 4</td>
<td>Data 4 to be updated</td>
</tr>
<tr contenteditable>
<td id="UsedColumn" contenteditable="false">Name of field 5</td>
<td>Data 5 to be updated</td>
</tr>
</table>
<br/>
<input type="button" name="SubmitUpdate" class="ok" value="Submit Update"/>
</body>
</html>


I've seen where people use forms and
$POST
to get the data from one page to another, but I'm not using a form. I'm actually using
PHP
and this is the resulting
HTML
and what is being pulled from the SQL server. However, I just need help with getting this working in
HTML
, I will figure out how to translate it into the
PHP
. Here is what the files look like that I'm working with:

JSFiddle TestingPHP - First Table

JSFiddle FormToEditMaterial - Second Table

If you need more info let me know and I'll provide what ever I can.

Edit
Here's the updated FormToEditMaterial file, I did not update the JSFiddle:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FormToEditMaterial</title>
<link rel="StyleSheet" href="StyleSheet.css" type="text/css">
</head>
<body>
<table id="FormToEditMaterialTable">
<tr>
<th contenteditable="false" >Field Name</th>
<th contenteditable="false">Field to be edited</th>
</tr>
<tr contenteditable>
<td id="TempIDColumn" contenteditable="false">Name of Field</td>
<td>Data to be updated</td>
</tr>
<tr contenteditable>
<td id="NameColumn" contenteditable="false">Name of field 2</td>
<td>Data 2 to be updated</td>
</tr>
<tr contenteditable>
<td id="CountryCodeColumn" contenteditable="false">Name of field 3</td>
<td>Data 3 to be updated</td>
</tr>
<tr contenteditable>
<td id="BudgetColumn" contenteditable="false">Name of field 4</td>
<td>Data 4 to be updated</td>
</tr>
<tr contenteditable>
<td id="UsedColumn" contenteditable="false">Name of field 5</td>
<td>Data 5 to be updated</td>
</tr>
</table>
<br/>
<input type="button" name="SubmitUpdate" class="ok" value="Submit Update"/>
<br/>
<br/>
<form>
TempID: <input type="text" name="1"><br>
Name: <input type="text" name="2"><br>
CountryCode: <input type="text" name="3"><br>
Budget: <input type="text" name="4"><br>
Used: <input type="text" name="5"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>


EDIT 2

Here's the new FormToEditMaterial.php:

<?php
$servername = "ServerName";
$username = "User";
$password = "Password";
$dbname = "DBName";
$db = new PDO("sqlsrv:server=$servername;database=$dbname", $username,$password);
$row = array();

if (isset($_POST['submit']))
{
$row = $_POST;

$q = 'UPDATE dbo.MyTable SET Name = ?, CountryCode = ?, Budget = ?, Used = ? WHERE TempID = ?';
$sth = $db->prepare($q);
$sth->execute(array($row['Name'], $row['CountryCode'], $row['Budget'], $row['Used'], $row['TempID']));
print_r($db->errorInfo());
echo "<br>";
var_dump($sth);
echo "<br>";
var_dump($row);

if ($sth->rowCount() == 1) header('Location: Index.php');
}
else if (!empty($_GET['id']))
{
$q = 'SELECT TempID, Name, CountryCode, Budget, Used FROM MyTable WHERE TempID = ?';
$sth = $db->prepare($q);
$sth->execute(array($_GET['id']));
$row = $sth->fetch();
}
else
{
// Show error message here
}
?>
<link rel="StyleSheet" href="stylesheet.css" type="text/css">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']?>">
<p>
<label>TempID:
<input type="text" name="TempID" value="<?php echo $row['TempID']?>"></label>
</p>
<p>
<label>Name:
<input type="text" name="Name" value="<?php echo $row['Name']?>"></label>
</p>
<p>
<label>CountryCode:
<input class="CountryCode" type="text" name="CountryCode" value="<?php echo $row['CountryCode']?>"></label>
</p>
<p>
<label>Budget:
<input type="text" name="Budget" value="<?php echo $row['Budget']?>"></label>
</p>
<p>
<label>Used:
<input type="text" name="Used" value="<?php echo $row['Used']?>"> </label>
</p>
<p>
<input type="submit" name="submit" value="Submit">
</p>
</form>


And here's the Index.php:

<?php
$servername = "ServerName";
$username = "User";
$password = "Password";
$dbname = "DBName";
$db = new PDO("sqlsrv:server=$servername;database=$dbname", $username,$password);
$q = 'SELECT TempID, Name, CountryCode, Budget, Used FROM MyTable';
?>
<link rel="StyleSheet" href="stylesheet.css" type="text/css">
<table>
<thead>
<tr>
<th>Edit</th>
<th>TempID</th>
<th>Name</th>
<th>CountryCode</th>
<th>Budget</th>
<th>Used</th>
</tr>
</thead>
<tbody>
<?php foreach ($db->query($q) as $row) :?>
<tr>
<td><a href="FormToEditMaterial.php?id=<?php echo $row['TempID']?>">Edit</a></td>
<td><?php echo $row['TempID']?></td>
<td><?php echo $row['Name']?></td>
<td><?php echo $row['CountryCode']?></td>
<td><?php echo $row['Budget']?></td>
<td><?php echo $row['Used']?></td>
</tr>
<?php endforeach?>
</tbody>
</table>

Answer

I've made a quick example:

Screenshot 1 Screenshot 2

In index.php:

<?php
$db = new PDO('host', 'username', 'password');
$q = 'SELECT TempID, Name, CountryCode, Budget, Used FROM MyTable';
?>
<table>
    <thead>
        <tr>
            <th>Edit</th>
            <th>TempID</th>
            <th>Name</th>
            <th>CountryCode</th>
            <th>Budget</th>
            <th>Used</th>
        </tr>
    </thead>
    <tbody>
<?php foreach ($db->query($q) as $row) :?>
        <tr>
            <td><a href="FormToEditMaterial.php?id=<?php echo $row['TempID']?>">Edit</a></td>
            <td><?php echo $row['TempID']?></td>
            <td><?php echo $row['Name']?></td>
            <td><?php echo $row['CountryCode']?></td>
            <td><?php echo $row['Budget']?></td>
            <td><?php echo $row['Used']?></td>
        </tr>
<?php endforeach?>
    </tbody>
</table>

In FormToEditMaterial.php:

<?php
$db = new PDO('sqlite:db.sqlite3');
$row = array();

if (isset($_POST['submit']))
{
    $row = $_POST;

    $q = 'UPDATE MyTable SET Name = ?, CountryCode = ?, Budget = ?, Used = ? WHERE TempID = ?';
    $sth = $db->prepare($q);
    $sth->execute(
        array($row['Name'], $row['CountryCode'], $row['Budget'], $row['Used'], $row['TempID'])
    );

    if ($sth->rowCount() == 1) header('Location: index.php');
}
else if (!empty($_GET['id']))
{
    $q = 'SELECT TempID, Name, CountryCode, Budget, Used FROM MyTable WHERE TempID = ?';
    $sth = $db->prepare($q);
    $sth->execute(array($_GET['id']));
    $row = $sth->fetch();
}
else
{
    // Show error message here
}
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']?>">
    <p>
        <label>TempID:
        <input type="text" name="TempID" value="<?php echo $row['TempID']?>"></label>
    </p>
    <p>
        <label>Name:
        <input type="text" name="Name" value="<?php echo $row['Name']?>"></label>
    </p>
    <p>
        <label>CountryCode:
        <input type="text" name="CountryCode" value="<?php echo $row['CountryCode']?>"></label>
    </p>
    <p>
        <label>Budget:
        <input type="text" name="Budget" value="<?php echo $row['Budget']?>"></label>
    </p>
    <p>
        <label>Used:
        <input type="text" name="Used" value="<?php echo $row['Used']?>"></label>
    </p>
    <p>
        <input type="submit" name="submit" value="Submit">
    </p>
</form>

This example doesn't include any error checking whatsoever.

Comments