I have a feature where people are using barcode scanners for code 128 and they have this one field where they use the barcode scanner to scan the barcode, it then searches products, then with a suffix programmed into the barcode scanner auto hits enter.
My question is instead of hitting the submit button, is there a way to make a form submit upon say this barcode field being filled. Like once it contains characters it submits. I ask this with the attempt to create a self checkout system where you can keep scanning without having to use the submit button.
As soon as I fulfill this part, I’ll attach a full breakdown on the code/barcode scanners/invoicing set-up I have. It is currently running on iPads with Cellular Connections and Symcode Bluetooth Barcode Scanners with a integration with the stripe set-up where a swipe fills up your credit card numbers.
Hi @ChristopherB, sounds interesting!
You can listen for the change in a field input, and programmatically submit a form with this slice of code:
$(document).on('knack-view-render.view_xx', function(event, view, record) { // View that contains the form
const inputFieldKey = 'field_xx'; // The field you want to listen for changes to
$(`#${view.key} #${inputFieldKey}`).on('input', function() {
$(`#${view.key} button[type=submit`).click(); // Auto click the submit button on this view's form
});
});
Hello Stephen I appreciate the code, it unfortunately is giving me an error. I am placing info in view_xx and field_xx is there any other adjustments I need to do? Wow I’m so happy as this seems to be the way and I am very close.
@ChristopherB Sorry I was pulling code out of thin air when I replied yesterday, and didn’t test it. I was missing the ); on the event handler, which I have updated in the above code.
I also changed the event handler from change to input.
The input event handler will work better for you if the full barcode is being inputted in one go, and prevents the need to de-focus from the field in order for the form to submit.
Stephen you are amazing for helping here, surprisingly it is still not working, the code did fix itself and javascript function was detected. This is the type of field it is. I do wonder if Change is because the field style changes a bit.
@ChristopherB yes this needs to be handled differently because it’s a connection field rather than text field. You’ll need to listen for the <select> element changing value:
$(document).on('knack-view-render.view_xx', async function(event, view, record) {
const inputFieldKey = 'field_xx'; // The field you want to listen for changes to
$(`#${view.key} #kn-input-${inputFieldKey} select`).on('change', function() {
$(`#${view.key} button[type=submit`).click(); // Auto click the submit button on this view's form
});
});
This will only work so long as your automation when the barcode is scanned can programmatically select an <option> from the <select>. I’m not too sure what that looks like from your end.
@ChristopherB Would you mind sharing that barcode scanner code? I have a warehouse app I’m trying to get a scanner to work with a barcode scanner. Thank you.
So is there a way to do this after the field is filled completely, on listeners it seems to be registering under html when .chzn-container-single:after registers a field.
For everyone else, just worked with Romel to fix this.
Every time the view rendered, it seemed to trigger the change handler in the connection field, even though no value was selected.
Added a condition check using if($(this).val()) to see if there was a value before it auto-submits to prevent this.
$(document).on('knack-view-render.view_xx', async function(event, view, record) {
const inputFieldKey = 'field_xx'; // The field you want to listen for changes to
$(`#${view.key} #kn-input-${inputFieldKey} select`).on('change', function() {
if ($(this).val()) {
$(`#${view.key} button[type=submit`).click(); // Auto click the submit button on this view's form
}
});
});
It’s great to see the progress with automating the form submission! For your TraceShipments setup, ensuring that the form submits correctly once the barcode field is filled is key for a seamless self-checkout experience. Adding a debounce function to handle rapid field updates might also help stabilize the submission process. Looking forward to seeing the final solution!
Thank you.