onChange in form textarea

Does anyone know how to make a field auto submit with the onChange="this.form.submit"

I have a form with a single field, and it would be better for the onchange instead of clicking a button.

What I have so far and what I have tried:

              
$provider = $_COOKIE['memberID'];
$client = $this->oProfileGen->_iProfileID;

$aForm = array(
            'form_attrs' => array(
                'name'     => 'form_personal_notes',
                'method'   => 'post',
            ),

            'params' => array (
              
                      'db' => array(
                    'table' => 'personal_notes', // table name
                    'key' => 'personal_notes_id', // key field name
                    'uri' => '', // uri field name
                    'uri_title' => '', // title field to generate uri from
                    'submit_name' => 'submit_personal_notes_form', // some filed name with non empty value to determine if the for was submitted,
                                                       // in most cases it is submit button name
                ),
                'csrf' => array(
                      'disable' => true, //if it wasn't set or has some other value then CSRF checking is enabled for current form, take a look at sys_security_form_token_enable to disable CSRF checking completely.
                )
              ),
            'inputs' => array(
                'header1' => array(
                    'type' => 'hidden',
                    'caption' => 'Personal Notes',
                ),
        'Note' => array(
            'type' => 'textarea',
            'name' => 'Note',
            'html' => 3,
            'html_dynamic' => true,

            'attrs' => array(

            'id' => 'note',

            'onChange' => this.form.submit(),         /*      ( also tried replacing section in red with: "javascript:document.forms['form_personal_notes'].submit();" ) */

),
            'colspan' => true,
                      'db' => array (
                        'pass' => 'Xss', 
                    ),
        ),
                'header1_end' => array(
                    'type' => 'block_end'
                ),
             'submit_send' => array(
            'type' => 'submit',
                    'colspan' => true,
            'name' => 'submit_personal_notes_form',
            'value' => _t("Update Personal Notes"),
        ),
             ),
        );

        $oForm = new BxTemplFormView ($aForm);
        $oForm->initChecker();

        if ($oForm->isSubmittedAndValid ()) {
  $time = time();
  $wall = mysql_query("INSERT INTO bx_wall_events (owner_id, object_id, type, content, title, description, date) VALUES ('$client', '$provider', 'wall_common_text', '<div class="wall-post-text bx-def-font-h2">Personal Notes Updated.</div>', 'Personal Notes Updated.', 'Personal Notes Updated.', '$time')");

            // add additional vars to database, in this case creation date field is added
            $aValsAdd = array (
                'client_id' => $this->oProfileGen->_iProfileID,
                'input_by' => $_COOKIE['memberID'],
            );
if ($oForm->insert ($aValsAdd)) {
              
$sStatusText = 'Personal Notes Updated Successfully';
            }
        }
                if($sStatusText)
            $sStatusText = MsgBox(_t($sStatusText), 3);

        return array($sStatusText . $oForm->getCode(), array(), array(), false);
              

Using firebug, i get:

<textarea id="note" class="form_input_textarea bx-def-font form_input_html" name="note" onchange="this.form.submit()" style="display: none;" aria-hidden="true"></textarea>

Any help would be greatly appreciated, and as always, Thanks in Advance

Try this instead.

onchange="javascript: document.form_personal_notes.submit()"


In the form attributes add a id.

'form_attrs' => array(
                'name'     => 'form_personal_notes',
                'id'     => 'form_personal_notes',
                'method'   => 'post',
 ),

trying right now - thanks a bunches of oats

Buzzard, I tried your solution, but unfortunately, it did not work. Well, it does and it doesn't. Heres the deal: when i use your solution, it still does not submit the form. Looking at the code in firebug, I get:

<textarea id="issue" class="form_input_textarea bx-def-font form_input_html" name="Issue" onchange="javascript:document.form_tx_plan.submit()" style="display: none;" aria-hidden="true"></textarea>

Now, if I remove the section in red, then the solution you posted does work, but I lose the tinyMCE functions for bold, italacize, add image and such.

EDIT - I used your solution on a different form so different form name and id

 Yea, but the javascript "javascript:document.form_tx_plan.submit()" does not match the id you have set. id="issue"

This part of the javascript marked in red.

javascript:document.form_tx_plan.submit()"

Must match the id of the form. Which you have set to id="issue". issue does not match form_tx_plan. So it should not have worked at all.

Im not sure if i'm right in saying this but, wouldn't that submit on every letter you type causing the page to reload every time?

that id="issue" is the id of the textfield itself, not the form. I have this for the form per your solution:

'form_attrs' => array(
                'name'     => 'form_tx_plan',
                'id'     => 'form_tx_plan',
                'method'   => 'post',
                'action' => 'addtxplan.php',
            ),

@darkcloud - it only submits if the user goes outside of the textbox.

Not sure it can be done. In the case where there is a tinymce editor, there are two textareas. One is the original which tinymce hides when it embeds the editor.

Problem is, the focus is on the tinymce editor, not the hidden text area. Thats why it does not work.

@deanos, thats what I was afraid of when I noticed the style hidden.

oksy, do let me ask/propose this then:

I dont care if all of the forms using this default dolphin form builder are all onchange form submits (the only ones I am using the default template for are forms that only consist of one open field anyways. The multy field forms I am doing differently.)

So, could the form template be changed so that the tinyMCE text box is onchange form submittance?

To be honest. I don't know.

ugh, this kinda sucks,but the autosubmit functionality is more important than the tinyMCE editor finctionality. So this is what I did:

in my forms_adv.css template file, I have:

.form_advanced_table .colspan .input_wrapper {
    width: 100%;
   /* width: auto;*/
}

in my form I have:

            'form_attrs' => array(
                'name'     => 'form_tx_plan',
                'id'     => 'form_tx_plan',
                'method'   => 'post',
            ),

And

        'Issue' => array(
            'type' => 'textarea',
            'name' => 'Issue',
            'attrs' => array(
            'id' => 'issue',
             'onchange' => 'javascript:document.form_tx_plan.submit()',
             'width' => '99%',
        ),
            'colspan' => true,
                      'db' => array (
                        'pass' => 'Xss', 
                    ),
        ),

as per your suggestion. This layout gives me a textarea with a width equal to the width of the box it is in. So if you have a column that is 60%, the form field will stretch out as well. I do lose the tinyMCE buttons for the plugins, but oh well.

Thanks again Deanos for your help.