HTML User Input to local file location

Question

I'm trying to create a form with HTML and javascript to be able to retrieve 3 different inputs from the user, combine them into 1 form in json format, and save the file into a local file location. Below is what I currently have. (I am unclear how I am able to save a json string to a local file location. Thank you for your time in advance. (I am a javascript and html novice)

<header class="banner">
<h1 style="color:blue">HTML User Input to local file location</h1><main>
    <form id="myform" type="post">
        <fieldset>
            <legend style="color:blue">Sign Up</legend>
            <p style="color:red">Write your con-fig codes below</p>
            <div class="elements">
                <label for="Input1">Input1 :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Input1" 
name="Input1" size="25" />
            </div>
            <div class="elements">
                <label for="Input2">Input2 :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Input2" 
name="Input2" size="25" />
            </div>
            <div class="elements">
                <label for="Input3">Input3 :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Input3" 
name="Input3" size="25" />
            </div
            <div class="submit">
                <input type="submit" id="btn" name="submit" class="btn" value="Send" />
            </div>
        </fieldset>
    </form>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#btn").click(function(e) {
                var jsonData = {};

                var formData = JSON.stringify($("#myForm").serializeArray());

                $.each(formData, function() {
                    if (jsonData[this.name]) {
                        if (!jsonData[this.name].push) {
                            jsonData[this.name] = [jsonData[this.name]];
                        }
                        jsonData[this.name].push(this.value || '');
                    } else {
                        jsonData[this.name] = this.value || '';
                    }

                });
                e.preventDefault();
            });
        });

    </script>
    </main>

What do you want your local file to contain? Will it just be the JSON that you get? — binjamin, Nov 07 '19 at 01:30
Possible duplicate of [How do I save JSON to local text file](https://stackoverflow.com/questions/34156282/how-do-i-save-json-to-local-text-file) — binjamin, Nov 07 '19 at 02:06

score 1 · Answer 1 · answered Nov 07 '19 at 01:44

1

This has definitely been asked before in multiple places. Like Here and Here. Code copied from one of the links 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');

Credit to @Rafał Łużyński.

Please search for the solutions better before actually asking a question.

answered Nov 07 '19 at 01:44

binjamin

123
1
13

Ah, thank you very much ! I'm still not exactly sure how it works but I will try. Just to confirm, I will have to put this code after my else statement ended? (Sorry, I have almost 0 experience with this) – Dave Seah Nov 07 '19 at 02:07

HTML User Input to local file location

1 Answers1