I am currently working with Tinymice 4.1.9 for textarea validation in a raw ajax environment as I have limited knowledge of jquery. The issue I'm facing is that when Tinymce 4.1.9 is added to the textarea, upon validation, I receive an empty string unless validated twice.
Below is the snippet of my raw ajax code used for validation:
<script language="javascript">
function identification(identification_1,identification_2)
{
var OAjax;
document.getElementById('image_loading_identification').style.display='';
if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
OAjax.open('POST',"identification.php",true);
OAjax.onreadystatechange = function()
{
if (OAjax.readyState == 4 && OAjax.status==200)
{
document.getElementById('image_loading_identification').style.display='none';
if (document.getElementById)
{
document.getElementById("identification").innerHTML=OAjax.responseText;
}
}
}
OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
OAjax.send('identification_1='+ encodeURIComponent (identification_1)+'&identification_2='+ encodeURIComponent (identification_2));
}
</script>
My Implementation of Tinymce 4.1.9:
<script type="text/javascript" src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/tinymce_4_1_9_jquery/tinymce/js/tinymce/tinymce.min.js" type="text/javascript"></script>
<script src="js/tinymce_4_1_9_jquery/tinymce/js/tinymce/jquery.tinymce.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('textarea.tinymce').tinymce({
theme: "modern",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
});
</script>
The HTML Form Structure:
<form method="post" name="nomduformulaire_identification" id="nomduformulaire_identification" onsubmit="identification(this.identification_1.value,this.identification_2.value);return false" action="">
<div class="form-group">
<input name="identification_1" type="text" id="identification_1" class="form-control" placeholder="Name" autofocus required/>
</div>
<div class="form-group">
<textarea id="identification_2" name="identification_2" class="tinymce" style="width:100%"></textarea>
</div>
</form>
In this scenario, I found that submitting the form twice was necessary for receiving any input from the textarea field "identification_2."
Is there a way to integrate Tinymce 4.1.9 into raw ajax setup without utilizing jQuery and ensure information retrieval from the identification_2 field?