Remote Javascript

2025-08-20

Scope

This article describes how to create a file-saving javascript program that can run on a computer that uses Windows, Mac, or Linux operating system.

Expectations

In order to understand this article, you need to understand how to use a file system and the basics of HTML, CSS, and Javascript. It will not describe how the program works, only how to implement a solution, and how to work with this solution. A description of why it works can be provided later.

The Solution

The HTML Portion

	
		<button onclick="createProfile()"> Create XML</button> <button onclick="activateXMLReader()">Open</button><input id="xmliFile" type="file" onchange="readXML(event)" style="visibility: hidden;"></input>
		
		<p><input id='make' placeholder='Make'></input></p>
		<p><input id='model' placeholder='Model'></input></p>
		<p><input id='year' placeholder='Year'></input></p>
		<p><input type='checkbox' id='good'></input><label for='good'>Good to Go!</label>  </p>
	
	

In your program, you need a way to save and load data from the hard drive. The two "Open" and "Load" buttons allows the user to perform those actions.

The Javascript Portion


// Save data as an XML file
function createProfile()
{
	
	// Get user data from input box
	let make = document.getElementById("make_inputBox").value;
	let model = document.getElementById("model_inputBox").value;
	let year = document.getElementById("year_inputBox").value;
	
	if(make === ""||model === ""||year === "")
	{
		// Exit the function to avoid invalid inputs
		alert("ERROR: name could not be found");
		return;
	}
	else
	{
		// Do nothing
	}
	
	// Create a string that will hold the data ready to be written into the XML file
	let xmlString = "";
	
	// Create the XML root and get ready to load it with content
	// by parsing that data as a string into a new element of an XML type
	let rootString = "";
	let parser = new DOMParser();
	let xmlFile = parser.parseFromString(rootString, "text/xml");
	
	// Add elements to the root, since there should only be one root, only one node will be created or needed
	let elems = xmlFile.getElementsByTagName("car");
	node = xmlFile.createElement("make");
	node.textContent = ticker;
	elems[0].appendChild(node);

	
	// ________ Get Make ________ //	
	// Add elements to the root, since there should only be one root, only one node will be created or needed
	elems = xmlFile.getElementsByTagName("car");
	node = xmlFile.createElement("make");
	node.textContent = make;
	elems[0].appendChild(node);

	// ________ Get trade check box ________ //
	elems = xmlFile.getElementsByTagName("car");
	node = xmlFile.createElement("good");
	if(document.getElementById("good_checkB").value === "")
	{
		// Do nothing
	}
	else
	{
		node.textContent = document.getElementById("good").value;
		elems[0].appendChild(node);
	}
	
	// ________ Complete file and serialize ________ //
	// Serialize the content so that it can be printed to an xml file
	serializer = new XMLSerializer();
	xmlString += serializer.serializeToString(xmlFile);
	
	let ofile = new Blob([xmlString],{type: 'text/xml'});
	
	// Create the URL for the file so it can be printed
	let textFileURL = window.URL.createObjectURL(ofile);
	
	// Create an anchor, open it and let the user save it locally
	let a = document.createElement('a');
	a.href = textFileURL;
	if(companyName === "")
	{
		a.download = ticker + ".xml";
	}
	else
	{
		a.download = companyName + ".xml";
	}
	a.click();
	
	
}

// Trigger an open file event to read a file
function activateXMLReader()
{
	document.getElementById("xmliFile").click();
}

// Read XML file
function readXML(e)
{
	
	let file = e.target.files[0];
	
	if(!file)
	{
		return;
	}
	else
	{
		// Do nothing
	}
	
	let reader = new FileReader();
	reader.onload = function(e){
		empDetails(e.target.result);
	}
	
	reader.readAsText(file);
	
}
// Load up the data from the XML file
function empDetails(str)
{
	let parser = new DOMParser();
	xmlDoc = parser.parseFromString(str,"text/xml");
	
	// Create XMLDoc type and access its parent element
	let x = xmlDoc.getElementsByTagName("company");
	
	document.getElementById("tickerSymbol_tb").value = x[0].getElementsByTagName("ticker_symbol")[0].childNodes[0].nodeValue;
}
	

In your program, you need a way to save and load data from the hard drive. The two "Open" and "Load" buttons allows the user to perform those actions.

Why Would You Want to Do This?

Because of data rights, it's not always economical to wait and ask for IT to install special software. It's also useful in that it can work for the vast majority of computers in the workplace. There are no special installs, the only things you need are files, and a browser.

Tablet Problems

Not all tablets will be able to use this solution. The problem lies with how some tablets like iPads are designed. If this is something you would like to implement, you will need to solve it by finding or creating and app that will be able to read the files.