Using HTML5 Local Storage
I have a HUGE form that I intend for QA staff to use OFFLINE in collecting data for annual product quality reviews. Due to the complexity of the regulatory requirements, this form contains over 1,900 fields and radio buttons.
I am currently calling localStorage via sisyphus.js and it works - storing data for all fields is just fine.
My problem is that when loading it takes 7 seconds for the form to complete loading - it has been submitted for a long time - but that's not the real problem. My REAL problem is that after some record has been made, it takes a little more than 2 seconds after the onblur event for the form to accept any additional data.
Here is my code:
$('form').sisyphus({
locationBased: false,
timeout: 10,
autoRelease: false
});
My question is, is there a way to trigger the storage of data at the user's discretion, perhaps via a button or some other method, to prevent constant interruptions while entering data?
Does anyone have any idea?
source to share
The plugin you are using (sisyphus.js) doesn't seem to have been written to handle "a lot" of fields.
If you look at the source:
https://raw.githubusercontent.com/simsalabim/sisyphus/master/sisyphus.js
You will see the method there saveAllData
. Combined with a method, bindSaveDataOnChange
it saves all fields every time a field changes.
And if that's not the case, you will still get a 2 second lag every 10 seconds (timeout option).
A quick fix I would hope would be to fork / modify or override the plugin to nullify the method bindSaveDataOnChange
, and implement a hook to save the form data on button click. And possibly deleting or increasing the parameter timeout
.
source to share