Joe Joe - 1 month ago 17
Javascript Question

JavaScript: Enter value and submit text input

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

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");
Comments