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.

If you let the user add ANY html, you're leaving your site open to XSS attacks. Use some kind of markdown (like SO does) so you can control what HTML tags can be used. Search for "php markdown" for tools to convert it server-side -- strip out all HTML a user uploads, store the markdown in your DB, and use a PHP library to convert the markdown to HTML for display. — Blazemonger
– Blazemonger, Commented Aug 7, 2014 at 19:06
@Blazemonger I should mention this is only intended to be used by a few select employees at a small company, so attacks aren't much of a concern right now. I'll look into markdown. Thank you! — Newspire
– Newspire, Commented Aug 7, 2014 at 19:23
Please, don't use mysql_* functions in new code. They are no longer maintained and are officially deprecated. See the red box? Learn about prepared statements instead, and use PDO or MySQLi - this article will help you decide which. If you choose PDO, here is a good tutorial. — esqew
– esqew, Commented Aug 7, 2014 at 20:05

Blazemonger · Accepted Answer · 2014-08-07 19:39:06Z

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.

Collectives™ on Stack Overflow

Storing HTML of a Dynamically Created Element in Database Using PHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related