JavaScript: Enter value and submit text input

Question

I am trying to write a JavaScript code to enter in a bunch of grades into an online grade book. The grade book is a table with inputs:

<input type="text" maxlength="12" 
class="grade-entry input--flush" tabindex="1" 
data-bind="visible:!$parent.assignment.useLetterGradingScheme,
value:gradeString, disable:showDetail || 
!$parent.permissions.AssignGrades || (isGradeApproved &amp;&amp;
!$parent.permissions.ChangeApprovedGrades), event:
{change:$parent.onChangeGrade,focus:$parent.onFocus}, 
attr:{'aria-label':'Grade for ' + sortableName}, 
css:{'animate-saving':saving, 'success':isGradeApproved}" 
aria-label="Grade for [last name], [first name] [middle initial]">

I have written a code that finds the correct input to put a students name in by accessing the aria-label attribute and comparing the first and last names. The code successfully goes through and enters the grades by:

input.value = 10.5;

However, the grade does not submit. When entering the grades manually, I have to first type the grade, and then press "Enter". After pressing "Enter", the color of the input box changes and the grade saves so that if I refresh the grade stays.

My code does not do this. After running the code, the input fields contain the grades, but when I refresh they all go away. So at the moment I have to go through, one by one, and click on the input and then press "Enter".

I have an array with all the inputs. I then find the correct index for the student. I have tried to simulate an Enter key press by:

var e = jQuery.Event("keypress");
e.which = 13; //choose the one you want
e.keyCode = 13;
$(inputs[i]).trigger(e);

where inputs is an array of all the input elements and i is the index of the correct input for the student.

Is there any way to do what I am trying to do?

EDIT I forgot to mention; the input is not embedded inside a form or anything. It's just standalone inside a table row.

EDIT It looks like it is an AJAX form. I'm not really familiar with AJAX, but I have added a small section of a function called $.fn.ajaxSubmit below that I found (only a small section because the whole function is really long). What is the parameter options? And if I have the options parameter correct, could I just called this function to submit it?

/**
 * ajaxSubmit() provides a mechanism for immediately submitting
 * an HTML form using AJAX.
 */
$.fn.ajaxSubmit = function(options) {
    /*jshint scripturl:true */

    // fast fail if nothing selected (http://dev.jquery.com/ticket/2752)
    if (!this.length) {
        log('ajaxSubmit: skipping submit process - no element selected');
        return this;
    }

    var method, action, url, $form = this;

    if (typeof options == 'function') {
        options = { success: options };
    }

    method = this.attr('method');
    action = this.attr('action');
    url = (typeof action === 'string') ? $.trim(action) : '';
    url = url || window.location.href || '';
    if (url) {
        // clean url (don't include hash vaue)
        url = (url.match(/^([^#]+)/)||[])[1];
    }

    options = $.extend(true, {
        url:  url,
        success: $.ajaxSettings.success,
        type: method || 'GET',
        iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank'
    }, options);

    // hook for manipulating the form data before it is extracted;
    // convenient for use with rich editors like tinyMCE or FCKEditor
    var veto = {};
    this.trigger('form-pre-serialize', [this, options, veto]);
    if (veto.veto) {
        log('ajaxSubmit: submit vetoed via form-pre-serialize trigger');
        return this;
    }
    ....
    ....

Recall that with my current code, I find the actual <Input> object for each student and update the value. So could I call the above function with the specified <Input> and submit whatever value I just put in the <Input>?

EDIT I have been trying to read up on AJAX. If I have the specified <Input> object (I'll call it input1, can I just say something like:

$(input1).ajaxSubmit();

Answer 1

Pressing Enter in the input control triggers the change event, which is then processed by $parent.onChangeGrade. Instead of sending a keypress event programmatically, you can trigger the change event directly:

$(inputs[i]).trigger("change");