ACE Editor: textarea always passes empty value to form

Question

I am using Flask for web development. I integrated ACE Editor into form in following way :

<textarea  maxlength="10000" rows="20" cols="80" name="tc001_input" form="usrform" data-editor="markdown" id="editor">{{input}}</textarea>
<form action="/tc001" id="usrform" method = "post">
  <input type="submit">

  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<script type="text/javascript">
    // https://gist.github.com/duncansmart/5267653
    // find each text area marked to have an editor
    $('textarea[data-editor]').each(function() {
        var textarea = $(this);
        var mode = textarea.data('editor');
        // create the editor div
        var div = $('<div>', {
            'width': textarea.outerWidth(),
            'height': textarea.outerHeight(),
            'class': textarea.attr('class')
        }).insertBefore(textarea);
        // hide the original text area
        textarea.hide();
        // configure the editor
        var editor = ace.edit(div[0]);
        var session = editor.getSession();
        editor.setTheme("ace/theme/github");
        session.setValue(textarea.val());
        session.setMode('ace/mode/' + mode);
        session.setNewLineMode('unix');
        session.setTabSize(4);
        session.setUseSoftTabs(true);
        session.setUseWrapMode(true);
        // update the text area before submitting the form
        textarea.closest('form').submit(function() {
            textarea.val(editor.getSession().getValue());
        });
    });
</script>
</form>

It displays correctly, but whenever I do submit and read property:

request.form['tc001_input']

Then I get "blank" data. I have entered data "abc" into textarea before submitting. What is wrong?

Answer 1

the issue is that your textarea is not inside the form, so textarea.closest('form') does not work, here's a modified version that uses the latest ace, and .form attribute of the textarea that works

<textarea  maxlength="10000" rows="20" cols="80" name="tc001_input" form="usrform" data-editor="markdown" id="editor">contents from textarea</textarea>

<form action="https://postman-echo.com/post" id="usrform" method = "post">  
    <input type="submit">
</form>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js"></script>
<script type="text/javascript"> 
    // find each text area marked to have an editor
    $('textarea[data-editor]').each(function() {
        var textarea = $(this);
        var mode = textarea.data('editor');
        // create the editor div
        var div = $('<div>', {
            'width': textarea.outerWidth(),
            'height': textarea.outerHeight(),
            'class': textarea.attr('class')
        }).insertBefore(textarea);
        // hide the original text area
        textarea.hide();
        // configure the editor
        var editor = ace.edit(div[0], {
            value: textarea.val().replace("textarea", "ace!"),
            theme: "ace/theme/github",
            mode: 'ace/mode/' + mode,
            newLineMode: 'unix',
            tabSize: 4,
            useSoftTabs: true,
            wrap: true,
        }); 

        // update the text area before submitting the form
        textarea[0].form.addEventListener("submit", function() {
            textarea.val(editor.getSession().getValue());
        });
    });
</script>
</form>