If I use a form and submit button then the browser can remember the text input fields, but if I use only input types, no form and have the button action an onclick event, then the browser does not cache input values for the user.
Is there a way to have the browser still cache "form" inputs without using an actual submit?
below is sample code, showing my page. When the user clicks search, then a javascript function is called that will populate the div "results". Everything works except no browser will cache the text input.
<h2>Device Cleaner</h2>
<p>Enter MAC Address of device to clean:</p>
<input type="text" id="entry" name="macaddr" onkeypress="keyChecker(event)">
<button type="button" id="start" onclick="query()">Search</button>
<div id="results"></div>
</body>
</html>
Would it be possible to update the "results" div using an asynchronous request in javascript, so that the page doesn't actually refresh/submit, but the results are simply displayed directly?
This would involve intercepting the submit action of the form, and writing a different endpoint on your server that would do the search, and just return the data your form needs. It's a bit much for me to describe in my answer, but it's something people commonly do for better usability; you'd find a better tutorial than I could provide by googling for "ajax form submit".
No.
What used to work in the past is submitting to an empty page, but that doesn't work anymore in all browsers.
It is not possible to force a browser to save this information. As long as the input you would like saved is relatively short, you could use JavaScript to store cookies with this information. Then when viewing the page in the future, you can use those cookies to fill the input fields. Be wary of sensitive information though.
Alternatively, you could store the user input on your own server through AJAX requests.