I have a simple JS function that lets the user input their first and last name and onclick displays their full name.
Is there a way to include the user's submitted content in the text field when the user saves the page as html and reopens it?
function getFullName() {
var firstName, lastName, fullName;
firstName = document.Application.txtFirstName.value;
lastName = document.Application.txtLastName.value;
fullName = firstName + " " + lastName;
document.Application.txtFullName.value = fullName;
}
The simplest workaround would be that if a user enters text into an input element and then—before submitting—prints the page to PDF (Menubar > File > Print > Save as PDF or the like), their content is included in the resultant PDF file. Would that help?
Otherwise, you could write a function to be executed upon click of your button, and have that function first preventDefault (preventing it from reloading the page and clearing the form fields, if its type="submit"), and then have it write their name to a variable and prompt them to save the page:
<form id="nameForm">
First Name<br />
<input type="text" name="first" /><br />
<br />
Last Name<br />
<input type="text" name="last" /><br />
<br />
<button type="submit" onclick="processForm(event)">Submit</button>
</form>
var processForm = function(event) {
event.preventDefault();
var form = document.getElementById('nameForm');
var firstName = form.first.value;
var lastName = form.last.value;
var fullName = firstName + ' ' + lastName;
alert('Hello, ' + fullName + '. Please now save this page as HTML via your browser\'s `File` menu.');
};
Additionally, you could try wrapping your button in an a or area element, setting that element's href to your web page's URL, and adding a download attribute to that element. This is not something I can easily demo in a generic online sandbox, but the download attribute:
…indicates that the author intends the hyperlink to be used for downloading a resource.
Essentially, it makes the browser download the linked location, rather than navigating the browser to the linked location.
If you can't wrap the button or its text in an a or area to your liking, you could create, style, and script a div to look like a button, and wrap that div in an a or area.