Bootstrap Snippet Save Form Data using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
    <title>Save form Data in a Text File using JavaScript</title>
  
    <!--Add few elements to the form-->
        <div>
            
          <input type="text" id="txtName" placeholder="Enter your name" />
        </div>
        <div>
            <input type="text" id="txtAge" placeholder="Enter your age" />
        </div>
        <div>
            <input type="text" id="txtEmail" placeholder="Enter your email address" />
        </div>
        <div>
            <select id="selCountry">
                <option selected value="">-- Choose the country --</option>
                <option value="India">India</option>
                <option value="Japan">Japan</option>
                <option value="USA">USA</option>
            </select>
        </div>
        <div>
            <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
        </div>
        <div>
            <input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
        </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  <style>
        * {
            box-sizing: border-box;
        }
        div {
            padding: 10px;
            background-color: #f6f6f6;
            overflow: hidden;
        }
        input[type=text], textarea, select {
            font: 17px Calibri;
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type=button]{ 
            font: 17px Calibri;
            width: auto;
            float: right;
            cursor: pointer;
            padding: 7px;
        }
    </style>
</head>
<body>
    <div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
let saveFile = () => {
        
        // Get the data from each element on the form.
        const name = document.getElementById('txtName');
        const age = document.getElementById('txtAge');
        const email = document.getElementById('txtEmail');
        const country = document.getElementById('selCountry');
        const msg = document.getElementById('msg');
        
        // This variable stores all the data.
        let data = 
            '\r Name: ' + name.value + ' \r\n ' + 
            'Age: ' +age.value + ' \r\n ' + 
            'Email: ' + email.value + ' \r\n ' + 
            'Country: ' + country.value + ' \r\n ' + 
            'Message: ' + msg.value;
        
        // Convert the text to BLOB.
        const textToBLOB = new Blob([data], { type: 'text/plain' });
        const sFileName = 'formData.txt';      // The file to save the data.
        let newLink = document.createElement("a");
        newLink.download = sFileName;
        if (window.webkitURL != null) {
            newLink.href = window.webkitURL.createObjectURL(textToBLOB);
        }
        else {
            newLink.href = window.URL.createObjectURL(textToBLOB);
            newLink.style.display = "none";
            document.body.appendChild(newLink);
        }
        newLink.click(); 
    }
</script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Save Form Data"
Bootstrap 4.1.1 Snippet by Umerfarooq

Related: See More

Questions / Comments:

"Save Form Data" Bootstrap 4.1.1 Snippet by Umerfarooq

Related: See More

Questions / Comments:

"Save Form Data"
Bootstrap 4.1.1 Snippet by Umerfarooq