CODEWITHSUNDEEP
phphtml
Mike
Mike

Reputation: 1938

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>

Upvotes: 0

Views: 5548

Answers (2)

Midas
Midas

Reputation: 7131

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.

Upvotes: 1

Jose Manuel Abarca Rodr&#237;guez
Jose Manuel Abarca Rodr&#237;guez

Reputation: 10381

Ajax is a good solution for your problem, because you won't need to jump to a secondary page, not even refresh the page! Next code is an example and it works like this:

  1. Every row in the HTML table has one button to save changes.
  2. The click event of every button calls the ajax function with the data values.
  3. The ajax function calls "update.php" with the data values as POST parameters.
  4. "update.php" gets the data as $_POST values and updates the database record.
  5. "update.php" sends a success message back to the ajax function to display it.

In order to test it, create two files with the given names, copy-paste next codes and run! (You don't need anything else but those codes).

main.php

<html>
  <head>
    <script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
    <script type="text/javascript">
//--------------------------------------------------
function myAjax ( id )
{ if ( ! confirm( "Save data for id=" + id + " ?" ) )
     return;
  $.ajax( { type    : 'POST',
            url     : 'update.php',
            data    : { 'id'    : id,
                        'name'  : $("#name"+id).val(), // VALUE FROM EDIT FIELD.
                        'phone' : $("#phone"+id).val(), // VALUE FROM EDIT FIELD.
                      },
            success : function ( result )
                      { alert( result ); },
            error   : function ( xhr )
                      { alert( "error" ); }
          }
        );
}
//--------------------------------------------------
    </script>
  </head>
  <body>
    <table>
      <tr><td>NAME</td>
          <td>PHONE</td>
          <td></td>
      </tr>
<?php
//--------------------------------------------------
// SAMPLE DATA.
$database = Array( Array( "id"    => "1",
                          "name"  => "Mike",
                          "phone" => "123" ),
                   Array( "id"    => "2",
                          "name"  => "Midas",
                          "phone" => "456" ),
                   Array( "id"    => "3",
                          "name"  => "Jay",
                          "phone" => "789" )
                 );
$i = 1;
foreach ( $database as $row ) // DISPLAY "DATABASE" ROWS.
{ echo "<tr><td><input type='text' id='name" . $row["id"] .
                       "' value='" . $row["name"] . "'/></td>\n" .
       "    <td><input type='text' id='phone" . $row["id"] .
                       "' value='" . $row["phone"] . "'/></td>\n" .
       "    <td><button onclick='myAjax(\"" . $row["id"] .
                             "\")'>Save changes</button></td>\n" .
       "</tr>";
  $i++;
}
//--------------------------------------------------
?>
    </table>
  </body>
</html>

update.php

<?php
// CHECK IF VALUES ARE COMING FROM AJAX.
if ( isset( $_POST[ "id"    ] ) &&
     isset( $_POST[ "name"  ] ) &&
     isset( $_POST[ "phone" ] ) )
   { // "update my_table set name=$_POST[ "name"  ],
     //                     phone=$_POST[ "phone" ]
     //                  where id=$_POST[ "id"    ]
     echo "Record " . $_POST[ "id" ] . " updated with " .
          $_POST[ "name"  ] . " and " . $_POST[ "phone" ];
   }
?>

Oops! Just fixed one little problem, ready to run!

If you right-click the webpage to see the code, you will notice the input fields have the ids "name1", "name2", ..., and "phone1", "phone2", .... This method gives every textbox a unique id (necessary for ajax function to get the value entered by user and send it to PHP). The code in charge of this is :

id='name" . $row["id"] .
"' value=

Upvotes: 0

Related Questions