How to save HTML form data to JSON file using javascript only

177
February 10, 2018, at 04:11 AM

I have created a html page having a form and I what I need is to take user input and save it in a .json file, I don't know how to do that..

This always gives error because XMLHttpRequest always shows that readyState = 1 and status = 0,I found localhost server programme butdon't know how that works, then I found sockets.io on both server and client side with p5 in node js.. but don't know how to do that I mean I am very much confuse, and messed up all the things in my mind together like ajax and node js and p5.js and sockets and all these..

lets see my code:

function put_json (form) { 
	var raw = { 
		'company': form.company.value, 
		'part_no': form.part_no.value, 
		'date': form.date.value, 
		'quantity_meter': form.quantity_meter.value, 
		'amt_paid': form.amt_paid.value, 
		'status': form.status.value, 
		'vehicle_name': form.vehicle_name.value, 
		'vehicle_no': form.vehicle_no.value, 
		'notes': form.notes.value 
	}; 
	console.log('raw: ' + raw); 
 
	var writeRequest = new XMLHttpRequest(); 
	var url = '/public/json/receive.json'; 
	writeRequest.open('POST', url, true); 
	writeRequest.setRequestHeader('Content-type', 'application/json'); 
	writeRequest.onreadystatechange = writing_handler(writeRequest, raw); 
	return false; 
} 
function writing_handler(wRqst, data) { 
	if(wRqst.readyState == 4 && wRqst.status == 200) { 
		alert("Saving Data To File ..."); 
		Data = JSON.stringify(data , 0, 4); 
		console.log('Data: ' + Data); 
		wRqst.send(Data); 
	} 
	else { 
		alert("Connection FAIL,\nCheck connection and Retry !!!"); 
		console.log(wRqst); 
	} 
}
<form method="POST" onsubmit="return put_json(this);"> 
	<label> M/s: </label> 
	<input type="text" name="company"/> 
	<label> Part Number: </label> 
	<input type="text" name="part_no"/> 
	<br> 
	<hr width="80%" align="center" color="#0070d6"> 
	<label> Receiving Date: </label> 
	<input type="Date" name="date"/> 
	<label> Quantity(Meter): </label> 
	<input type="Number" name="quantity_meter" value="0"/> 
	<br> 
	<hr width="align="center" color="#0070d6"> 
	<label> Amount Paid: </label> 
	<input type="Number" name="amt_paid" value="0"/> 
	<label> Status: </label> 
	<input type="text" name="status" value="Pending!"/> 
	<br> 
	<hr width="80%" align="center" color="#0070d6"> 
	<label> Vehicle Name: </label> 
	<input type="text" name="vehicle_name"/> 
	<label> Vehicle Number: </label> 
	<input type="text" name="vehicle_no"/> 
	<br> 
	<hr width="80%" align="center" color="#0070d6"> 
	<label> Add Notes: </label> 
	<textarea name="notes" style="margin-left: 2.7em;">(If Any..)</textarea> <br> 
	<input id="submit" type="submit" value="Save" style="margin-left: 45em;" /> 
</form>

And I want to save it in a json file like: { "company": "xyzcomp.", "part_no": "xyz001", "date": "01/01/18", "quantity_meter": "0", "amt_paid": "000", "status": "Pending!", "vehicle_name": "farrari", "vehicle_no": "xyxyxyxyxyx", "notes": "problem in saving data!!!" }

I am very new to the html and saving the html data in file, Please teach me and explain what I am doing and what to do, i just don't know what's going onn! I am messed up all things in a big cluster pretty well.

**And Please! This Post should not be closed because it is about saving the data in json with javascript only not with jQuery not with PHP and also I want to know if the programme needs client and server sockets to save data. **

Answer 1

please use this function if you just want to write your json in a text file. this will work for sure.

function saveFile(text, name, type) {
    var a = document.createElement("a");
    var file = new Blob([text], {type: type});
    a.href = URL.createObjectURL(file);
    a.download = name;
    a.click();
}
 saveFile(JSON.stringify(jsonData), 'test.txt', 'text/plain');
READ ALSO
How do you get the parent reference in firebase using javascript?

How do you get the parent reference in firebase using javascript?

So I have this code in javascript that sorts through all blog posts, ordered by timestamp and gets the corresponding informationWhat I don't know how to do however is get the parent reference

165
Store Response Results in Variables

Store Response Results in Variables

I'm trying to learn how to use the newsapiorg api function to pull headlines and put them on my site

90
ES6: How can I format a string such that when I copy it into excel, it will be on seperate rows?

ES6: How can I format a string such that when I copy it into excel, it will be on seperate rows?

Given a string seperated with spaces like "Apple Orange Pear", how can I format it and paste it into excel so that those three appear one after another on different rows?

141