Storing HTML of a Dynamically Created Element in Database Using PHP

Question

I am creating a page where a user can create a table. They can add rows, data, and styling. Whenever the user adds rows or data it's appended to an originally blank HTML table element that is shown on the page

<table class='preview_table' id='preview' name='preview'>
    <!-- this is the space where entered info forms a table -->
        <thead></thead>
        <tbody></tbody>
</table> 

This acts as a preview. The user can then style the preview, and that styling is also added onto the table and its children elements.

I want to be able to take the resulting HTML code and place it into the database, preferably using PHP, when the user hits the save button. This is my PHP code:

if(isset($_POST['submitted'])){
    $prob = false;
    if(!empty($_POST['title']) && !empty($_POST['type']) && !empty($_POST['name'])){
        $new_title = mysql_real_escape_string(trim($_POST['title']));
        $new_type = mysql_real_escape_string(trim($_POST['type']));
        $new_name = mysql_real_escape_string(trim($_POST['name']));
        $new_table = '' ;
        $new_id = $id;

    }else{
        echo '<p style="background-color:red;font-size:20px;">Enter values for all fields</p>';
        $prob = true;
    }

    if(!$prob){
        $q = "INSERT INTO tables (id , active , type , name , title , html_code) VALUES ('$new_id' , 'Y' , '$new_type' , '$new_name' , '$new_title' , '$new_table')";
        if(@mysql_query($q)){
            echo '<p style="background-color:green;font-size:20px;">Success!</p>';
        }else{
            echo '<p>'.mysql_error().'</p>';
        }

    }
}

I want to set the HTML code for the table to the variable $new_table. So far I've tried

$new_table = $_POST['preview'];

but I understand now why that doesn't work. I've also tried to use ob_start and ob_get_contents but that doesn't work either. I am fairly new to PHP, so there may be something fairly simple that I'm missing. So, my question is: how would I go about storing the HTML of a dynamically created element into a database using PHP?

Any and all help is greatly appreciated! Thank you.

Answer 1

name=table has to be a form element like <input> or <textarea> to be sent to the server.

If you must use your current approach, use jQuery to store it in a form element prior to submitting the form.

HTML:

<form id="form" method="post" action="/some.php">
    <input type="hidden" id="hidden_preview" name="preview" value="">
    <!-- etc -->

jQuery:

$('#form').on('submit', function() {
    var str = $('#preview')[0].outerHTML; // not a jQuery property
    $('#hidden_preview').val(str);
});

https://developer.mozilla.org/en-US/docs/Web/API/element.outerHTML

---

That said, I would strongly recommend using some form of markdown instead of HTML to prevent cross-site scripting attacks in your site. It's easier to type, isn't hard to learn, lets you use a standard <textarea> form element, and if you like, there are JS plugins that create a toolbar (like StackOverflow has) to make entering markdown even easier.