How to submit HTML form using TinyMCE, jQuery and PDO? (full code)

Question

The $_POST['reply'] variable contains html tags like <p>text goes here</p> but I can not insert it into the database. For the reply I use the TinyMCE and when I do not use it (the input as no tags) like text goes here then it is inserted correctly.

What am I missing here?

try {
    $db = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER, DB_USER, DB_PASSWORD, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $stmt = $db->prepare("INSERT INTO replies(article_id, comment) VALUES (:article_id, :comment)");

    $stmt->bindParam(':article_id', $article_id, PDO::PARAM_INT);
    $stmt->bindParam(':comment', $_POST['reply'], PDO::PARAM_STR);


    if($stmt->execute()) {
      echo 'success';  
    }

    $db = null;
} catch(PDOException $e) {
    trigger_error('Error occured while trying to insert into the DB:' . $e->getMessage(), E_USER_ERROR);
}

Here is the form code:

<form class="comment-form">
    <div class="form-input">
        <input type="hidden" name="post_id" value="<?= $row['id']; ?>" />
    </div>

    <div class="form-input">
        <textarea name="reply" id="elm1" rows="8"  placeholder="Your comment here" ></textarea>
    </div>

    <div class="form-input">
        <input type="Submit" class="btn btn-primary" id="submit" value="SEND" />
    </div>
</form>

<script type="text/javascript">
    $(function(){
        $(".comment-form").submit(function(event){
            event.preventDefault();
            $("#results")
                .show();

            $.post('add-it.php', $(".comment-form").serialize(), function(data) {
                $('#submit')
                    .hide();
                $('#results')
                    .html(data)
                    .fadeIn('slow');
            });
        });
    });
</script>

@Ghost it is in this format `
here goes text
` but it is not inserted. I have tried with no html tags, and it was saved. — EnexoOnoma, Apr 06 '15 at 13:49
what PHP version are you using anyway? its just a string, it should work just fine — Kevin, Apr 06 '15 at 13:53
Please add your full code (From connection -> query execution) and also add an example of your input into the question — Rizier123, Apr 06 '15 at 13:55
check this out maybe related http://stackoverflow.com/questions/10217402/pdo-prepared-statements-to-store-html-content — Kevin, Apr 06 '15 at 13:56
Best bet is to look at an ajax call then you can use JavaScript/jQuery to get the content in the `
` tags and post it to the php file, have a look at http://api.jquery.com/jquery.ajax/ — TheSk8rJesus, Apr 06 '15 at 13:57
If you are working with Apache, did you tried to disabled `mod_security`? Maybe there is a rule removing the HTML tags from the input data. — nikoskip, Apr 08 '15 at 18:47
@nikoskip I am using a hosted vps, I believe it is apache. But the mod_security is disabled — EnexoOnoma, Apr 08 '15 at 18:56
But, when you make a `var_dump($_POST['reply'])` prints the text with the HTML tags? — nikoskip, Apr 08 '15 at 19:02
I think we need see more code, the page that contains the form. — nikoskip, Apr 08 '15 at 19:14
@nikoskip I have updated my question with the requested code, thank you. — EnexoOnoma, Apr 08 '15 at 19:23
Sure like to know where `$article_id` is assigned and coming from. Plus, your code doesn't contain any POST directive. Too many unknowns and whether short tags are enabled or not. — Funk Forty Niner, Apr 08 '15 at 20:09
I have to ask why you don't submit your form with PHP? I use PDO with TinyMCE and i didn't have to do any adjust to make it work. I put my bet that the problem is with AJAX and TinyMCE... serilization for example. — Aleksandar Miladinovic, Apr 08 '15 at 20:46

Yang · Accepted Answer · 2015-10-01T19:28:11.727

6

Since you use AJAX, you need to manually trigger saving function in TinyMCE. And that needs to be done, before you send a request.

 $("#results").show();
     tinyMCE.triggerSave(); // <--- Add this here
    $.post('add-it.php'....

And this absolutely has nothing to do with PDO. You could simply do print_r($_POST) to see if data comes, before inserting a record to a table.

edited Oct 01 '15 at 19:28

answered Apr 08 '15 at 20:05

Yang

8,580
8
33
58

René Höhle · Answer 2 · 2015-04-08T20:53:23.163

You can use

$pdo->bindValue(':comment', $_POST['reply'], PDO::PARAM_STR);

instead of bindParam this should insert your html code.

And you should set post as method to your form

<form action="#" method="post" class="comment-form">
</form>

And the next one that you should remove your javascript code and test it without and with a normal form to test your problem.

Then main problem is that you $_POST variable is empty its not a PDO problem.

And the last one if your send your request with Ajax you have to call the

tinyMCE.triggerSave();

http://www.tinymce.com/wiki.php/API3:method.tinymce.triggerSave

function ins TinyMCE otherwise your post variable is empty.

Tried it but nothing different happened – EnexoOnoma Apr 08 '15 at 19:35 — EnexoOnoma, Apr 08 '15 at 19:35

score 2 · Answer 3 · edited May 23 '17 at 12:29

I think your issue is that TinyMCE doesn't bind it's changes to the textarea automatically. You need to call tinyMCE.triggerSave() in your submit handler. See When I use jQuery AJAX to submit tinyMCE forms on my page, it takes two clicks to actually submit to database.

I have attached a full code sample, which I can confirm works.

<?php

define('DB_DRIVER', 'mysql');
define('DB_DATABASE', 'test');
define('DB_SERVER', '127.0.0.1');
define('DB_USER', 'user');
define('DB_PASSWORD', 'password');

try {
    $db = new PDO(
        DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER,
        DB_USER,
        DB_PASSWORD,
        array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'")
    );
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $stmt = $db->prepare("
              INSERT INTO replies(article_id, comment) 
              VALUES (:article_id, :comment)");

    $stmt->bindValue(':article_id', $_POST['article_id'], PDO::PARAM_INT);
    $stmt->bindValue(':comment', $_POST['reply'], PDO::PARAM_STR);


    if ($stmt->execute()) {
        echo 'success';
    }

    $db = null;
} catch (PDOException $e) {
    trigger_error('Error occurred while trying to insert into the DB:' 
      . $e->getMessage(), E_USER_ERROR);
}

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>tinymce.init({selector: 'textarea'});</script>
<form class="comment-form">

    <div class="form-input">
        <input type="hidden" name="article_id" value="1"/>
    </div>

    <div class="form-input">
        <textarea name="reply" id="elm1"></textarea>
    </div>

    <div class="form-input">
        <input type="Submit" class="btn btn-primary" id="submit" value="SEND"/>
    </div>

</form>
<div id="results">
    Results
</div>

<script type="text/javascript">
        $(function () {
            $(".comment-form").submit(function (event) {
                event.preventDefault();
                $("#results").show();
                tinyMCE.triggerSave();
                $.post('add-it.php', $(".comment-form").serialize(),
                function (data) {
                    $('#submit').hide();
                    $('#results').html(data).fadeIn('slow');
                });
            });
        });
</script>

CREATE TABLE `replies` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `article_id` int(11) DEFAULT NULL,
  `comment` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

score 2 · Answer 4 · answered Apr 14 '15 at 09:34

I have taken your code and played with it quite a bit and I think I have been able to sort it for you hopefully, I have changed the $(".comment-form").serialize() for adding the data manually. I have also added tinymce.get('elm1').getContent() as this will retrieve the data thats inside the TinyMCE textarea.

<script type="text/javascript">
    $(function(){
        $(".comment-form").submit(function(event){
            event.preventDefault();
            $("#results")
                .show();

            $.post('add-it.php', {
                post_id: $( '.post_id' ).val(),
                reply: tinymce.get('elm1').getContent()
            }, function(data) {
                $('#submit')
                    .hide();
                $('#results')
                    .html(data)
                    .fadeIn('slow');
            });
        });
    });
</script>

score 2 · Answer 5 · edited May 23 '17 at 12:06

I think an idea for a solution is provided in this question HTML Tags stripped using tinyMCE. Try to use a simple textarea and check if html is posted correctly and saved to the database. This way you will have another clue if this is a fault server-side or client-side. Also try this http://jsfiddle.net/PGtPa/172/ to check your serialized output.

textarea_value -> <p>do this do that</p>
serialized_value -> %3Cp%3Edo+this+do+that%3C%2Fp%3E

jQuery serialize is url-encoding output so check if there is conflict with tinymce settings regarding that part. Also if mod_security is giving you issues you could try to base64 encode textarea value with javascript before posting and base64 decode server-side to get your real value back. For base64 and javascript check this https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding which have a nice example if you use utf8.

How to submit HTML form using TinyMCE, jQuery and PDO? (full code)

5 Answers5