Printable View
I´m using TyneMCE and I have 2 fields in my form that I want to be mandatory.
When I use "inst.getBody().innerHTML" in a javascript it works but only for 1 field.
What can I do to make it works for 2 or more fields?
I named the fields in my form field1 and field2
Javascript
if(form.field1.value==""){ alert('This is a mandatory field.'); }
if(form.field2.value==""){ alert('This is a mandatory field.'); }
This does not work
What is TyneMCE? I have never heard of it before. Also, can you please post more code. What you have provided is hardly enough to clarify your problem. There is no way we can tell what is happening with inst.getBody().innerHTML.
OK. I understand from you post is that: "There are two fields which are attach with TinyMCE and on form submission you require that these fields should not be empty."
If i understand correct then solution is "You can put element name in TinyMCE configuration." I think if u put more than one elements name seprated by comma then it should work. And on form submission call TinyMCE.triggerSave before getting field value.
Quote:
Originally Posted by Waqas_Badar
could you give me an example on how to do that please?
OK see below code
TinyMCE.triggerSave will put content back to textareas.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Simple example</title>
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="./includes/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
//this is for elm1 see elements and mode value
tinyMCE.init({
theme : "advanced",
language : "en",
mode : "exact",
elements : "elm1",
relative_urls : false,
remove_script_host : false,
invalid_elements : "script,applet,iframe",
theme_advanced_toolbar_location : "top",
theme_advanced_source_editor_height : "550",
theme_advanced_source_editor_width : "750",
directionality: "ltr",
force_br_newlines : "false",
force_p_newlines : "true",
debug : false,
cleanup : true,
cleanup_on_startup : false,
safari_warning : false,
theme_advanced_buttons1 : "bold, italic, underline,numlist,bulllist, indent, outdent,justifyleft, justifycenter, justifyright, removeformat",
theme_advanced_buttons2 : "",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
plugin_preview_width : "750",
plugin_preview_height : "550",
extended_valid_elements : "a[name|href|target|title|onclick], img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name], , hr[class|width|size|noshade]",
disk_cache : true,
debug : false,
fullscreen_settings : {
theme_advanced_path_location : "top"
}
});
//this is for elm2 element notice that this has no bold button in this way we
//can specify different buttons on different textareas
tinyMCE.init({
theme : "advanced",
language : "en",
mode : "exact",
elements : "elm2",
relative_urls : false,
remove_script_host : false,
invalid_elements : "script,applet,iframe",
theme_advanced_toolbar_location : "top",
theme_advanced_source_editor_height : "550",
theme_advanced_source_editor_width : "750",
directionality: "ltr",
force_br_newlines : "false",
force_p_newlines : "true",
debug : false,
cleanup : true,
cleanup_on_startup : false,
safari_warning : false,
theme_advanced_buttons1 : "italic, underline,numlist,bulllist, indent, outdent,justifyleft, justifycenter, justifyright, removeformat",
theme_advanced_buttons2 : "",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
plugin_preview_width : "750",
plugin_preview_height : "550",
extended_valid_elements : "a[name|href|target|title|onclick], img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name], , hr[class|width|size|noshade]",
disk_cache : true,
debug : false,
fullscreen_settings : {
theme_advanced_path_location : "top"
}
});
//this function will be called on submit
function myFunc()
{
tinyMCE.triggerSave(); //this will put content back to textareas
elm1 = document.getElementById("elm1");
elm2 = document.getElementById("elm2");
alert(elm1.value);
alert(elm2.value);
return false;
}
</script>
<!-- /tinyMCE -->
</head>
<body>
<a href="example_full.htm">[Full featured example]</a> <a href="example_advanced.htm">[Advanced example]</a> [Simple example] <a href="example_word.htm">[Word example]</a>
<h3>Simple example</h3>
This page shows how to use TinyMCE on a HTML page in the most common and simple way. On this page each TEXTAREA
element gets converted to a editor instance on page load. Notice how TinyMCE tries to match the width and height of the old text area elements. Read more about the features and settings of TinyMCE in the <a href="../docs/index.html">manual</a>.<br /><br />
<textarea id="elm1" name="elm1" rows="10" cols="40">
Some <b>element</b>, this is to be editor 1.
<p>Some paragraph. <a href="http://www.sourceforge.net">Some link</a></p>
<img src="logo.jpg">
</textarea>
<br />
<textarea id="elm2" name="elm2" rows="15" cols="32">
Some <b>element</b>, this is to be editor 2.
<p>Some paragraph. <a href="http://www.sourceforge.net">Some link</a></p>
<img src="dossier.gif">
</textarea>
<br />
<input type="submit" name="save" value="Submit" onclick="return myFunc()" />
<input type="reset" name="reset" value="Reset" />
</body>
</html>
Its not working:
Javascript error:
"The object doesnt support that property or method"
did u put file tiny_mce.js?
if so then correct its path in head tag. I have written the code after testing.
I did and the path is correct as well but I still get that message
Do you receive this error on pressing button?
Have you try alert tinyMCE? if you alert it should show an object. If you do not see it then see configuration of tinyMCE on their site.
if you receive error message on triggerSave method then i think you should upgarde to latest version of tinyMCE?
For api of tinyMCE see http://wiki.moxiecode.com/index.php/..._API_Functions