Clear Rails remote form after submitting userscript

Question

I am modifying a POS (point of sale) form using tampermonkey to load a user script. I so far have added accesskey and remote-data to elements and that work. I am trying to make a barcode scanner work on the page with out interaction. The access key focuses the form and remote-data submits it with an ajax post. This so far works great except the form does not clear once submitted. I found this answer:

Clear Rails remote form after submitting

and the answer looks like it should work, however I need to impliment it using a userscript and thats where I am stuck. I want to use beforeSend so the form is cleared asap so I can scan repeatedly.

$("#new_message").bind("ajax:beforeSend", function(event,xhr,status){
  $('#message_content').val('');
}

In my case the form is #new_line_item under #scan-wrap. There are two #new_line_item and it would be fine to apply to both. One is meant for barcodes and the other for manual (Has Autocomplete) entry. This was my attempt:

    HTMLElement.prototype.findId = function(_id) {
        var childs = this.childNodes;

        for (var i = 0; i < childs.length; i++) {
            if(childs[i].nodeType == Node.ELEMENT_NODE) {
                if(childs[i].id == _id) {
                    return childs[i];
                }
            }
        }

        return null;
    }

    // Usage Example
    var parent = document.getElementById("scan-wrap");
    var form = parent.findId("new_line_item");
    parent.findId("new_line_item").setAttribute("data-remote", "true");
    form.findId("line_item_upc_code").setAttribute("accesskey", "b");
    form.bind("ajax:beforeSend", function(event,xhr,status){document.getElementById("line_item_upc_code").val('')});

form.bind is not a function is the error I get and obviously it does not work. If I understand I need the function used to submit there?

This is the form:

<div id="scan-wrap">
      <form class="simple_form form-inline" id="new_line_item" novalidate="novalidate" action="/sales/16291478/add_item" accept-charset="UTF-8" method="post" data-remote="true"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="tJHddPfCM5zkB5YFBYtC4zWp1DZSLDHcNKylmG0hVrrS7EhaDjh2N96m0dwprdU/TMAU78xNVZHstXmgm2P1Vw==">
          <input class="string optional form-control" id="line_item_upc_code" name="line_item[upc_code]" size="25" type="text" style="width: 100px;font-size: 10px;" placeholder="Scan a barcode" autofocus="" accesskey="b">
          <input class="numeric decimal optional" id="line_item_quantity" name="line_item[quantity]" step="any" type="number" value="1" style="width: 8ex;font-size: 10px;height:34px;">
          <input class="btn btn-default form-control" name="commit" type="submit" value="Scan UPC">
</form>    </div>

Answer 1

In this code:

$("#new_message").bind("ajax:beforeSend", function(event,xhr,status){
  $('#message_content').val('');
}

"#new_message" is wrapped as a JQuery object using $(). In your code:

form.bind("ajax:beforeSend", function(event,xhr,status){document.getElementById("line_item_upc_code").val('')});

...you are not wrapping form as a JQuery object. That means that form is just a blob of HTML and so .bind is not a function. You could try:

$(form).bind("ajax:beforeSend", function(event,xhr,status){document.getElementById("line_item_upc_code").val('')});

And that might work, depending on your JQuery version. As noted in the docs:

As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.

So, you might do:

$(form).on("ajax:beforeSend", function(event,xhr,status){document.getElementById("line_item_upc_code").val('')});