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 &&
!$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();
inputininput.value = 10.5;is really an input element and not an array of inputs or some other type of object? Also, you don't need to emulate an enter for this input after you change its value.$(inputs[i]).trigger("change");.