Jquery appending value to textarea not working until ajax submitted a 2nd time

Question

I have a jquery jhtml WYSIWYG editor in a form and I need to append its output to a textarea manually. The form is being submitted via ajax. The updateText function is called to grab whats in the wysiwyg div and place it in a textarea to enable ajax to send it. I am using the ajaxForm “beforeSubmit” callback to fire off this function.

//For Ajax Form
$('#addFaci').ajaxForm({
        beforeSubmit: updateText,
        success: function(response) {
            eval(response);
        }
});

function updateText(formData, jqForm, options){
    var save = '#detail';
    $(save).val($(save).htmlarea("toHtmlString"));
    return true;
}; 

This is not working on the first submit... you have to click submit twice before updateText actually fires. Does anyone have any ideas?

Thanks,

Answer 1

When you hit submit this is what happens:

1. Form data is being collected
2. beforeSubmit fires, and the collected form data is being passed as the first parameter
3. You're changing the value of textarea, but it's too late, because data has been already collected

Instead of changing textarea's value you should modify formData object.

UPD. Try this:

for (var i in formData) {
  if (formData[i].name == '...name of your textarea here...') {
    formData[i].value = ...wysiwyg's html...
  }    
}

Even easier, remove the hidden textarea and use this:

function updateText(formData, jqForm, options) {
    formData.push({name: 'textarea_name', value: .... })
    return true;
};