Saving HTML form inputs in JSON format to local file (using javascript if possible)

Question

unfortunately I am incapable of saving the JSON inputs to a local directory (I am a complete novice in javascript) . The codes are as shown below.

<header class="banner">
<h1 style="color:blue">HTML User Input to local file location</h1><main>
    <form id="myform" type="post">
    <style>
        .formBox{
            padding: 0.5rem 2rem;
        }
    </style>
        <fieldset>
            <legend style="color:blue">Sign Up</legend>
            <p style="color:red">Write your con-fig codes below</p>
            <div class="formbox">
                <label for="Input1">Input1 :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Input1" 
name="Input1" size="25" id="Input1" />
            </div>
            <div class="formbox">
                <label for="Input2">Input2 :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Input2" 
name="Input2" size="25" id="Input2" />
            </div>
            <div class="formbox">
                <label for="Input3">Input3 :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Input3" 
name="Input3" size="25" id="Input3" />
            </div
            <div class="submit">
                <input type="submit" id="btn" name="submit" class="btn" value="Send" />
            </div>
            <div id="msg">
            <pre></pre>
        </div>
        </fieldset>
    </form>
    <script type="text/javascript">


    let Inputs = [];
        const AddData = (ev)=>{
            ev.preventDefault();  
            let data = {
                Input1: document.getElementById('Input1').value,
                Input2: document.getElementById('Input2').value,
                Input3: document.getElementById('Input3').value
            }
            Inputs.push(data);
            let pre = document.querySelector('#msg pre');
            pre.textContent = '\n' + JSON.stringify(Inputs, '\t', 2);
            localStorage.setItem('MyData', JSON.stringify(Inputs) );
        }
        document.addEventListener('DOMContentLoaded', ()=>{
            document.getElementById('btn').addEventListener('click', AddData);

        });


    </script>
    </main>

The code above would give me this output:Testing output

I was looking through different codes to find a way to save it to a local directory and one such code was from here as shown below:

function download(content, fileName, contentType) {
    var a = document.createElement("a");
    var file = new Blob([content], {type: contentType});
    a.href = URL.createObjectURL(file);
    a.download = fileName;
    a.click();
}
download(jsonData, 'json.txt', 'text/plain');

But I dont know at all how this works. Below is what I changed it to:

    function Download(msg) {
        document.getElementById('msg').src = msg

    $(document).ready(function() {
                function download(jsonData, hmmmm, text) {
                var msg = document.createElement("msg");
                var file = new Blob([jsonData], {type: text});
                msg.href = URL.createObjectURL(C:\Users\daves\OneDrive\Desktop\codetest);
                msg.download = hmmmm;
                msg.click();
}
            download(jsonData, 'json.txt', 'text');
            e.preventDefault();
            });
        };

What I thought this meant was that I would save the input data under the name of "hmmmm.json" in the file "C:\Users\daves\OneDrive\Desktop\codetest" (the above code is placed bewteen script type="text/javascript" and /script

I have a great feeling that I am wrong in this case. Please advise. Thank you for your time and understanding. (I am a complete novice in javascript) (There is no one around me whom I could ask)

Aimal Khan · Accepted Answer · 2019-11-07T07:29:49.593

i hope this work

        let obj = {
           val1: '233',
           val2: 'adfas',
           val3: 'weirpow' 
        }
        function onSave() {
            obj = {
                val1: document.querySelector('input:nth-child(1)').value,
                val2: document.querySelector('input:nth-child(2)').value,
                val3: document.querySelector('input:nth-child(3)').value
            }
            let stringObj =  '\n' + JSON.stringify(obj, null, 4);
            document.querySelector('span pre code').textContent = stringObj;
            var file = new Blob([stringObj], {type: 'text'});
            if (window.navigator.msSaveOrOpenBlob) // IE10+
            window.navigator.msSaveOrOpenBlob(file, 'saveFile');
            else { // Others
                var a = document.createElement("a"),
                url = URL.createObjectURL(file);
                a.href = url;
                a.download = 'saveFile';
                document.body.appendChild(a);
                a.click();  
                setTimeout(function() {
                    document.body.removeChild(a);
                    window.URL.revokeObjectURL(url);  
            }, 0); 
    }
        }

    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />

    <button onclick="onSave()">Save</button>

    result: <span>
       <pre>
        <code></code>
       </pre>
     </span>

Hello, thanks for your time and help!. Your code works when I click Run Code Snippet. Now I will try to integrate it with my code(Still a Novice). I'll post the full code here later(if I somehow manage to integrate it) But do you know what I have to do in order to change it to save to a local directory? — Dave Seah, Nov 07 '19 at 07:30
Sorry. It seems I misunderstood. Your code can In fact solve all that I want. Thank you very much! :) — Dave Seah, Nov 07 '19 at 08:06

Saving HTML form inputs in JSON format to local file (using javascript if possible)

1 Answers1