Multiple instances of TinyMCE in different forms with same name (jQuery).

Question

I'm trying to implement an autosave feature that submits several different forms on a page with the same name with TinyMCE'd textareas.

My code:

function autoSaveEditForms() {
 $("#auto_save_notify").html("Saving...");
 $("#auto_save_notify").show();
$("form[name=editForm]").each(function() {

 if($('input[name="question"]', this).val() == "" || $('textarea[name="answer"]', this).val() == "")
  return;

 $.post("<?php echo $CONFIG->wwwroot; ?>action/faq/edit?autosave=true", $(this).serialize(), function(data) { 

   $("#auto_save_notify").fadeOut(5000);
  });
});

}

The problem is that $('textarea[name="answer"]', this).val() does not change its value if I have two forms on the page. To clarify, if I have two forms it returns the updated value for one of them, reflecting any changes I make to the textarea, and it returns the original value of the other one (i.e.if I make any changes to one of the textareas then calling val() does not update these changes).

Is this a TinyMCE problem? Or is it necessary to do this another way?

Thanks.

Update: It works fine if TinyMCE is not used in the textareas.

Answer 1

Its probably not a good idea to have two forms with the same name. Add a unique identifier to each form:

<form name="myform1">
</form>

<form name="myform2">
</form>

Code the event that triggers this to pass the formid it lives in:

function autoSaveEditForms($formid)

Answer 2

Ok got it. Turns out you cannot access the data in the usual jquery way. Initialize TinyMCE in this fashion:

tinyMCE.init({
  mode : "none",
  theme : "advanced"
});

/* call this function in ajax return text */
function makeTinyMCE(faqid) {
 tinyMCE.execCommand('mceAddControl', false, 'answer'+faqid);

}

Then grab the text in this way:

tinyMCE.editors['answer'+faqid].getContent()