how to store data in text file by web form

Solutions on MaxInterview for how to store data in text file by web form by the best coders in the world

showing results for - "how to store data in text file by web form"
10 May 2018
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Save form Data in a Text File using JavaScript</title>
5    <style>
6        * {
7            box-sizing: border-box;
8        }
9    	div {
10            padding: 10px;
11            background-color: #f6f6f6;
12            overflow: hidden;
13        }
14    	input[type=text], textarea, select {
15            width: 100%;
16            padding: 12px;
17            border: 1px solid #ccc;
18            border-radius: 4px;
19        }
20        input[type=button]{ 
21            width: auto;
22            float: right;
23            cursor: pointer;
24            padding: 7px;
25        }
26    </style>
27</head>
28<body>
29    <div>
30        
31        <!--Add few elements to the form-->
32
33        <div>
34            <input type="text" id="txtName" placeholder="Enter your name" />
35        </div>
36        <div>
37            <input type="text" id="txtAge" placeholder="Enter your age" />
38        </div>
39        <div>
40            <input type="text" id="txtEmail" placeholder="Enter your email address" />
41        </div>
42        <div>
43            <select id="selCountry">
44                <option selected value="">-- Choose the country --</option>
45                <option value="India">India</option>
46                <option value="Japan">Japan</option>
47                <option value="USA">USA</option>
48            </select>
49        </div>
50        <div>
51            <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
52        </div>
53
54        <!--Add to button to save the data.-->
55        <div>
56            <input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
57        </div>
58    </div>
59</body>
60<script>
61    let saveFile = () => {
62    	
63        // Get the data from each element on the form.
64    	const name = document.getElementById('txtName');
65        const age = document.getElementById('txtAge');
66        const email = document.getElementById('txtEmail');
67        const country = document.getElementById('selCountry');
68        const msg = document.getElementById('msg');
69        
70        // This variable stores all the data.
71        let data = 
72            '\r Name: ' + name.value + ' \r\n ' + 
73            'Age: ' +age.value + ' \r\n ' + 
74            'Email: ' + email.value + ' \r\n ' + 
75            'Country: ' + country.value + ' \r\n ' + 
76            'Message: ' + msg.value;
77        
78        // Convert the text to BLOB.
79        const textToBLOB = new Blob([data], { type: 'text/plain' });
80        const sFileName = 'formData.txt';	   // The file to save the data.
81
82        let newLink = document.createElement("a");
83        newLink.download = sFileName;
84
85        if (window.webkitURL != null) {
86            newLink.href = window.webkitURL.createObjectURL(textToBLOB);
87        }
88        else {
89            newLink.href = window.URL.createObjectURL(textToBLOB);
90            newLink.style.display = "none";
91            document.body.appendChild(newLink);
92        }
93
94        newLink.click(); 
95    }
96</script>
97</html>
source