Extract data from HTML table to email via PHP

Question

I have a table in HTML that has some input fields in it (just the standard stuff - it's an order form) and all I am trying to do is extract the data so that I can insert it in to an email.

I have got everything else to work except for the extraction of the data from the table which I am posting to a php email function.

I have searched google for all possible solutions (jQuery, javascript etc) but I haven't found a suitable solution. The closest I got was by simply using $(this).html() but it doesn't extract the input values.

I feel this should be a really simple solution but I can find it.

Here is an example of my table with some dummy data:

<table id="order-table">
            <tr>
                 <th>Product Name</th> 
                 <th>Quantity</th>
                 <th>X</th>
                 <th>Unit Price</th>
                 <th>=</th>
                 <th style="text-align: right; padding-right: 30px;">Totals</th> 
            </tr>
            <tr class="odd">
                <td class="product-title">Dell R720 Xeon Server</em></td>
                <td class="qty"><input type="text" class="qty-input"></input></td>
                <td class="times">X</td>
                <td class="price-per-unit">£<span>1006</span></td>
                <td class="equals">=</td>
                <td class="row-total"><input type="text" class="row-total-input" disabled="disabled"></input></td>
            </tr>
            <tr class="even">
                <td class="product-title">VMWare Standard</em></td>
                <td class="qty"><input type="text" class="qty-input"></input></td>
                <td class="times">X</td>
                <td class="price-per-unit">£<span>306</span></td>
                <td class="equals">=</td>
                <td class="row-total"><input type="text" class="row-total-input" disabled="disabled"></input></td>
            </tr>

            <tr>
                <td colspan="6" style="text-align: right;">
                    ORDER SUBTOTAL: <input type="text" class="total-box" value="£0" id="product-subtotal" disabled="disabled"></input>
                </td>
            </tr>
        </table>

Any help would be greatly received.

Answer 1

If I understood correctly, you can use a form and name (all) your input fields.

Naming your field names will be important for this example.

Naming an input field:

<input type="text" name="qty_input_odd" class="qty-input">

Then in your handler, you would use the inputs' variable like so:

$qty_input_odd=$_POST['qty_input_odd'];

and the same for the other fields.

Then you can send all that information to your Email and a copy to your client if required.

You can also avoid having to set your input variables by using a foreach.

For example:

foreach($_POST as $key => $val) {
    $message .= "$key: $val\n";
}

Full example handler:

<?php

$subject = "Form submission";
$sender = preg_replace("/[\r\n,;]/", "", $_POST['email']);
$to = "email@example.com";

$headers = "From: $sender" . "\r\n" .
"Reply-To: $to" . "\r\n" .
"X-Mailer: PHP/" . phpversion();

$redirect = "http://www.example.com/thank_you.php";
$message = "Submitted data:" . "\n\n";
foreach($_POST as $key => $val) {
    $message .= "$key: $val\n";
}

mail($to, $subject, $message, $headers);
header("Location: $redirect");
// You can use header or echo, but not both
// echo "Message sent";

?>

Answer 2

Check out jQuery's serialize and ajax methods:

http://api.jquery.com/serialize/

http://api.jquery.com/jQuery.ajax/

Serialize lets you serialize all inputs on the page with something like:

var formParams = $('#order-table').serialize();

and the ajax method lets you pass that data to the server:

$.ajax({
  url: url,
  data: formParams,
  success: success,
  dataType: dataType
});