Develop Reference

Saving input/textbox without submit button on stopped typing

Just seeing if there's any best practice stuff on saving text inputs without a submit button. I've got this working fine with a delay when input is stopped using Jquery (on MVC site Ajax to Controller) but this still keeps posting data when a user waits to continue typing etc.
I'd ideally like a way of determining that a user has finished updating text within a textbox/text field without the need for a physical save button.
Is there a client side library/function I can use or even cache with writes on the server side & then write to db after a delay?

It depends on how you are determining the user has finished updating the text. Since you don't want to post data after delay then, I guess, the only way here is to check when the user changes focus from the text input field. In that case you can use onfocusout event.
<input type="text" onfocusout="postData(value)" />

Script to fill a value automatically in the webpage input box

My job is to order diagnostic tests for patients and I need to write 6-7 characters value for each diagnostic test. I have 24 different values and I need to fill it many thousands of times. I am thinking to create 24 different scripts with Tampermonkey to speed up my job by clicking on the script box.
So the thing is that I need to fill this
box. Here are the input id and everything of that box in the console. Then I type the value manually, I get popup list which updates every time I type one character (same principle as google or youtube search box), here is the popup list after I type a value and if I want that diagnostic test, I need to click on it from the popup list, I cannot just simply click enter. So this is the code I have to fill the box by a value:
document.body.appendChild(element)
element.addEventListener('click', function(){
document.querySelector("input#generic_test_order_search.ui-autocomplete-input").value = '15002 '
})
The script fills the value, but the popup list doesn't appear and I need to click on the box, delete one character and write it again to get a list and then to choose a diagnostic test from it. Still, time-consuming.
I wonder, is it possible to make a script to add automatically a diagnostic test from the list like this example? If no, is it somehow possible to make that popup list would appear and I won't need to click on the box, delete one character and write it again? At least, could I make that the box is clicked after a value has been filled? I tried this code but doesn't work: document.querySelector("input#generic_test_order_search.ui-autocomplete-input").click()
Please help me to make it as automatic as possible, which would save me hundreds of hours in the long-term.

1 - As for the second part of the question. Picture 4.
It is pretty simple to make an auto-fill for the dropping parametres, we just might need the html-code of the elements.
For example,
document.getElementsByTagName('input')[0].click(); clicks the first input checkbox from the first input
document.getElementsByTagName('select')[0].selectedIndex = 1; selects the second value from the first select
document.getElementsByTagName('button')[0].click();clicks the first button
To make it more precise you might use class at first, at then tag:
document.getElementsByClassName('testClassDependingOnExistingClasses')[0].getElementsByTagName('button')[0].click(); for example.
Anything you do manually on a page like that can be done automatically with JS.
2 - As for the first part of the question. Picture 2.
Here is the part of the answer.
How to trigger arrow down press in js?
Maybe this code might help, but not enough information, since no data on html-code of the dropped elements.
document.getElementById('generic_test_order_search').clildren[0].click();

jQuery - Check if input field is untouched

I'm trying to do something with jQuery or just JavaScript (either way works). I need to check if a certain form input field is untouched AND has a value.
Essentially what's going on is that, from a previous page, a user fills out a small form... they are redirected to the full version of the form with said information pre-filled. To reduce hassle, I would like to make it so that as the user fills out the form, it skips the pre-filled input fields. I need to do this in a non-blocking away, so if a user actually clicks on a pre-filled input field to change the value, it won't just skip again.
Is this even possible?
Edit: In this context, when I say "skip", I mean as in to move onto the next form field in the form, if there is any left.

I don't know what you mean by "skip". But you can add an event listener for the change event of the inputs and then set a class/data-attribute or store the information as a js property, so you can test for this value and treat inputs differently if they have been touched.

When to update a form based on user input

I have a number input element in my form, which generates or deletes other fields based on its value.
If I call the function to generate them as soon as the user changes number (.on('input', function() {...})), I have the following use case issue: let's say the user inputs '10', and 10 fields are generated; the user fills them up, and then notices he needs one more. If he just clicks on the arrow up to get to 11, a new field is created and everything works, but if he deletes the '0' from '10', before he's able to write '11', the other 9 fields disappear and all inserted data is lost.
If, instead, I call the function after the user is done (using .focusout(function() {...})), it's too slow as other fields won't appear until the user gets out of the field.
What's the best practice in this case?

You should really consider using the focusout event. Creating a typing timer based on user's last key pressed may sound even more slow and confusing for your user.
Although, there's a UX section of SO (https://ux.stackexchange.com/) where you could find excellent UX designer's suggestions!

Keep the user data in a internal object such as a array or a json, so even if the number of fields change the data wont be lost.

defaultChecked; why this property even exist?

Taking JavaScript this semester. I cannot grasp how this property can be useful at all. This property gives a Boolean value of true IF the checked attribute was used in tag for the check box object...BUT if I am the one writing the program ...I should know if I wrote that into the program correct? I just do not see the logic in this property. Anybody have a better reason for the use of it?

First, to answer your question, "Don't I know?". Of course not. If you are thinking of a form that is only used to add records, I could see your point but forms are also used to update records and we have no idea what the initial value is for any given record that may need to be updated.
The next thing to understand is that the same concept applies to more than check boxes. For example the text input elements have a "defaultValue" property that parallels the logic of default checked property.
The next point, is these properties would be better understood by novices had they been named "initialxyz" rather than "defaultxyz". Novices think that they are used to identify what should be sent to the server if not populated by the user but that is not what they are at all. They are the initial value, as sent by the server to the client, before the user starts interacting with the screen.
To answer your larger question, these propertied are extremely useful in two cases. The first has already been mentioned which is the "reset" button or as I jokingly call it the "oops" button or "start over". That can occur at the record level that resets every element on the form but it can be used on a field by field basis where only the field that has focus is reset. For example, the escape key is often used for this purpose. The second use for this is to know if the form is "clean" (unchanged) or dirty (changed, in at least one small way somewhere). This is used in too commentary places that you did not think about. The first is to avoid submitting a form with no changes to the server. Why waste resources. The complementary is to pop up the "are you sure you want to lose your changes" when someone attempts to navigate away from a form with changes. You walk the form and compare the current valued to the initial value for each element. If no elements changed the form is clean and allow the user to leave without a prompt. If at least one element is different than it's initial value and take appropriate action which might be to prompt to confirm leaving or it might be to submit the form changes to the server before leaving or something that neither of us have thought of yet.

Hypothetically, you might have a form with lots of fields written in html, and you may want to have a "reset" button which resets all of the form fields back to their initial values. (I don't really know why that used to be a common form button, I've never seen a use for it...) The code to reset checkboxes would then be:
input.checked = input.defaultChecked;
which would be the same for all checkboxes, and then you wouldn't need to track the difference between default checked and no default checked ones separately.
Really though, it doesn't appear to have much use, and I've never used it before.

One scenario would be when you are creating checkboxes dynamically, on-the-fly, in your code. The creation may be dependent on a couple of parameters, some of them depending in turn on selections by the user, from the current screen/page.
You may wish to set what is the state of these newly created checkboxes by default, before the user performs any actions on them.
Exemplifying: Say you have a textbox where the user has to tell you how many new checkboxes you should create for whatever further actions. Then after the user enters the input, your javascript creates N checkboxes, accordingly. And their initial state is set according to "defaultChecked".

Just yesterday I found myself using this same attribute. It comes in very handy when trying to set certain values to default.
Have you ever signed up for something ad then found yourself receiving TONS of unwanted newsletters? or you install one thing and two more things start installing? This happens because there was an option somewhere with a checkbox that had the checked attribute to make that decision for you.
Mostly it is used to make decisions for the user. Comes in handy sooner than later!
BTW: Welcome to the sweet world of JavaScript!