How to submit form automatically after x seconds?

Question

I want to submit form automatically after x seconds without pressing the submit button. This sample runs fine, but when I put this sample in my code, it did't work.

What's wrong with my code?

CodeMirror.commands.autocomplete = function(cm) {
    CodeMirror.showHint(cm, CodeMirror.hint.anyword); 
};


var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    matchBrackets: true,
    mode: "text/x-stsrc",
    indentUnit: 4,
    autoCloseBrackets: true,
    highlightSelectionMatches: true,
    styleActiveLine: true,
    extraKeys: {
        "Ctrl-Space": "autocomplete" ,
        "Ctrl-Space":function(cm){  CodeMirror.showHint(cm, CodeMirror.hint.anyword); }, 
        "'.'" : function(cmm){ CodeMirror.showHint(cmm, CodeMirror.hint.anyword);},
    },
    autohint: true,
    readOnly: false,
    lineWrapping: true,
}); 

editor.on("blur", function(codeMirror) { codeMirror.save(); });

editor.refresh();

var orig = CodeMirror.hint.anyword;

CodeMirror.hint.anyword = function(cm) {
    var inner = orig(cm) || { from: cm.getCursor(), to: cm.getCursor(),  list: []};
    inner.list.push("mariano");
    inner.list.push("florencia");
    inner.list.push("zoe");

    return inner;
};
var timeoutId;
$('form input, form textarea').on('input propertychange change', function() {
    console.log('Textarea Change');

    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
        // Runs 1 second (1000 ms) after the last change    
        saveToDB();
    }, 1000);
});

function saveToDB()
{
    console.log('Saving to the db');
    form = $('.contact-form');
    $.ajax({
        url: "/echo/json/",
        type: "POST",
        data: form.serialize(), // serializes the form's elements.
        beforeSend: function(xhr) {
            // Let them know we are saving
            $('.form-status-holder').html('Saving...');
        },
        success: function(data) {
            var jqObj = jQuery(data); // You can get data returned from your ajax call here. ex. jqObj.find('.returned-data').html()
            // Now show them we saved and when we did
            var d = new Date();
            $('.form-status-holder').html('Saved! Last: ' + d.toLocaleTimeString());
        },
    });
}

// This is just so we don't go anywhere  
// and still save if you submit the form
$('.contact-form').submit(function(e) {
    saveToDB();
    e.preventDefault();
});

CodeMirror.hint.anyword = function(cmm) {
    var inner1 = orig(cmm) || { from: cmm.getCursor(), to: cmm.getCursor(),  list: []};
    inner1.list.push("one");
    inner1.list.push("tow");
    inner1.list.push("three");

    return inner1;
};

EDIT : the problem solved by this change :

var timeoutId;
$('form input, form textarea').on('input propertychange change', function() {
    console.log('Textarea Change');
    //alert("chang Comment!");

    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
        // Runs 1 second (1000 ms) after the last change    
        document.forms["contact-form"].submit();
    }, 1000);
});

Answer 1

you need to use the editor change event:-

editor.on('change', function() {

JS Bin