CODEWITHSUNDEEP
javascriptjqueryhtmltinymce
Dorvalla
Dorvalla

Reputation: 5240

TinyMCE Javascript Validation

I am building a posting system on a website, but am encountering an odd problem whenever I include the TinyMCE plugin on my textareas. I validate in JavaScript the input to see if its empty (see code blow). Without the TinyMCE it works fine, but the values return nothing when I include the TinyMCE plugin.

('#form_createblog').bind('submit',function(){
    var titel = $('input[name=titel]').val();
    var categorie = $('select[name=categorie]').val();
    var synopsis = $('textarea[name=synopsis]').val(); // this remains blank when tinymce is included
    var inhoud = $('textarea[name=inhoud]').val(); // this remains blank when tinymce is included

    console.log(titel);
    console.log(categorie);
    console.log(synopsis);  
    console.log(inhoud);

    var proceed = true;
    if (titel==""){
        $('input[name=titel]').css({'border':'2px solid red'});
        proceed = false;
        }
    if (categorie==""){
        $('select[name=categorie]').css({'border':'2px solid red'});
        proceed = false;
        }
    if (synopsis==""){
        $('textarea[name=synopsis]').css({'border':'2px solid red'});
        proceed = false;
        }
    if (inhoud==""){
        $('textarea[name=inhoud]').css({'border':'2px solid red'});
        proceed = false;
        }

more code leading up to ajax call ...

The TinyMCE file looks like this.

tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
        plugins : "paste,advimage",
        width : "100%",
        height : "200",
        relative_urls : false,
        element_format : "html",
        doctype : '<html>',
        theme_advanced_blockformats : "p,h1,h2",
        theme_advanced_buttons1 : "formatselect,bold,italic,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,link,unlink,cleanup,|,cut,copy,paste,pastetext,|,image,hr,removeformat",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : false,
        theme_advanced_resize_horizontal : false,
        theme_advanced_resizing_use_cookie : false,
        inline_styles : true
});

and my html looks like this

<form name="maakblogpost" id="form_createblog" method="post" onsubmit="return false;">

...................................

    <div class="row">
        <div class="col-md-4">
            <span class="titel">Samenvatting van de blogpost</span> 
        </div>   
        <div class="col-md-7">
            <textarea name="synopsis" value=""></textarea>
        </div>
    </div>     

    <div class="row">
    <div class="col-md-4">
            <span class="titel">De daadwerkelijke inhoud van de blogpost</span> 
        </div>   
        <div class="col-md-7">
            <textarea name="inhoud" value=""></textarea>
        </div>
    </div>
    <button class="submit button" name="maakblogpost" type="submit" id="left_btn">Sla uw blog op</button>    
</form>

I doubt its an error within my own code, but just to play it safe I post it here, since the validation works fine when I have the TinyMCE not included.

This is tinymce version 3.5.7 btw, does this have to do with it? And does somebody know if it occurs as well on the new version (I think they are at 4 something right now)

Upvotes: 1

Views: 219

Answers (1)

Sam
Sam

Reputation: 4595

TinyMCE doesn't set the textarea value until the form is submitted so you need to manually call tinyMCE.triggerSave(); before getting the value.

Upvotes: 2

Related Questions