1

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();
8
  • Are you sure input in input.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. Commented Oct 6, 2016 at 23:49
  • Yes. All the numbers are inputed correctly. The problem is that they are not submitting. But there doesn't seem to be any submit value allowed for the input. The only way I know how to submit grades is by pressing Enter. Commented Oct 6, 2016 at 23:53
  • @Joe jsfiddle with your example will be very helpful, because I can't get how you can submit something without form just with html. Please, add everything related from your code here. Commented Oct 9, 2016 at 17:23
  • 1
    2 ideas. 1)input.value="10.5" since value is a GradeString. [probably automatically cast and not going to help] and 2) invoke the change event yourself, manually. Commented Oct 9, 2016 at 17:23
  • 1
    I see a handler for the change event in your input element. As suggested by @JeremyKahan, you could trigger that event: $(inputs[i]).trigger("change");. Commented Oct 10, 2016 at 15:48

1 Answer 1

1
+50

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");
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for running with that idea @ConnorsFan. I was guessing, and I am glad you were able to bring it to fruition.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.