CODEWITHSUNDEEP
javascripthtmlformscodemirror
Dan Bray
Dan Bray

Reputation: 7822

Submitting Codemirror data with JavaScript not working correctly

How can I prevent needing to submit the form twice when using Codemirror and submitting the form with JavaScript. What happens is, any changes I make in the Codemirror Textarea, are stored temporarily in another Textarea (it has no name or ID). If I click the submit button twice the correct data is sent but I would like to avoid having to click it twice. Here is my source code to submit the form:

var ajax;
var formData = new FormData();
var fileUpload = false;
for (i = 0; i < e.elements.length; i++)
{
    if (e.elements[i].type == "submit")
    {
        if (submitname == e.elements[i].name)
        {
            if (submit != null && submit.disabled)
                submit.disabled = false;
            submit = e.elements[i];
            submit.disabled = true;
            formData.append(e.elements[i].name, e.elements[i].value);
        }
    }
    else if (e.elements[i].type == "radio" || e.elements[i].type == "checkbox")
    {
        if (e.elements[i].checked)
            formData.append(e.elements[i].name, e.elements[i].value);
    }
    else if (e.elements[i].type == "file")
    {
        abortButton.disabled = false;
        var file = document.getElementsByName("file")[0].files[0];
        var maxSize = 1024;
        var maxSizeBytes = 1048576 * maxSize;
        formData.append("archivo", file);
        fileUpload = true;
    }
    else
    {
        //alert(e.elements[i].type + e.elements[i].name + e.elements[i].class + e.elements[i].value);
        if (e.elements[i].name == 'code')
        {
            alert(e.elements[i].type + e.elements[i].name + e.elements[i].value + e.elements[i + 1].value);
            formData.append(e.elements[i].name, e.elements[i].value);
            //formData.append(e.elements[i].name, e.elements[i].value + e.elements[i + 1].value);
        }
        else
            formData.append(e.elements[i].name, e.elements[i].value);
    }
}
formData.append("javascript", "javascript");
status = e.elements[0].value.split('/').reverse()[0] + "-status";
ajax = new XMLHttpRequest();
if (!fileUpload)
{
    ajax.addEventListener("load", manageLoad, false);
    ajax.addEventListener("error", manageError, false);
}
else
{
    ajax.upload.addEventListener("progress", manageProgress, false);
    ajax.addEventListener("load", _manageLoad, false);
    ajax.addEventListener("error", _manageError, false);
    ajax.addEventListener("abort", _manageAbort, false);
    globalAjax = ajax;
}
ajax.open("POST", e.action);
ajax.send(formData);
return false;

NB. This line of code: if (e.elements[i].name == 'code') determines that the element is the Codemirror Textarea.

I am looking for a non-jQuery solution. Thanks.

Upvotes: 1

Views: 609

Answers (1)

Gilad Artzi
Gilad Artzi

Reputation: 3084

You may want to consider using cm.getDoc().getValue() instead of reading the value directly from the DOM element (e.elements[i].value)).

(cm is the reference to then instantiated CodeMirror object, as in var cm = CodeMirror(...))

Upvotes: 2

Related Questions