How to save inputs of html form into json file?

Question

I'm new to HTML and I'm trying to learn from making hands dirty with real code. Javascript I used to convert HTML form input to JSON file and save to local system. It's not saving. What went wrong with the code. Please suggest an efficient way to this problem.

Please excuse the way I have written the question in this community I will gradually improve the better way Thank You.

<!DOCTYPE html>
<html>
    <head>
        <title>Send HTML Form as JSON</title>
        <style>
            #myform {
            margin:0 auto;
            width:500px;
            padding:14px;
            }
            label {
            width: 10em;
            float: left;
            margin-right: 0.5em;
            display: block;
            vertical-align: middle;
            }
            .submit {
            float:right;
            }
            fieldset {
            background:#EBF4FB none repeat scroll 0 0;
            border:2px solid #B7DDF2;
            width: 450px;
            }
            legend {
            color: #fff;
            background: #80D3E2;
            border: 1px solid #781351;
            padding: 2px 6px
            }
            .elements {
            padding:10px;
            }
            p {
            border-bottom:1px solid #B7DDF2;
            color:#666666;
            font-size:12px;
            margin-bottom:20px;
            padding-bottom:10px;
            }
            span {
            color:#666666;
            font-size:12px;
            margin-bottom:1px;
            }
            .btn{
            padding: 4px 12px;
            margin-bottom: 0;
            font-size: 14px;
            line-height: 20px;
            color: #333333;
            text-align: center;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
            vertical-align: middle;
            cursor: pointer;
            background-color: #f5f5f5;
            border: 1px solid #B7DDF2;
            }
            .btn:hover{
            color: #333333;
            background-color: #e6e6e6;
            }
        </style>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
            $("#btn").click(function(e){
            var jsonData = {};
            
             var formData = $("#myform").serializeArray();
            // console.log(formData);
             
             $.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 || '';
                 }
                  
              
             });
            
            
            // This will act when the submit LINK is clicked
            $("#btn").click(function(event){
              var txtData = each(formData);
              $(this).attr('download','sugguestedName.txt')
                .attr('href',"data:application/octet-stream;base64,"+Base64.encode(txtData));
            });
              e.preventDefault();   
            });
            });
        </script>
    </head>
    <body>
        <div id="header">
            Send Form's data as JSON
        </div>
        <form id="myform" type="post">
            <fieldset>
                <legend>Ajax Form  </legend>
                <p>We would love to hear from you. Please fill out this form</p>
                <div class="elements">
                    <label for="name">Name :</label>
                    <input  required="required" type="text"  value="Girish Kumar Santhu" name="fname"  size="20"  />
                </div>
                <div class="elements">
                    <label for="Age">Age :</label>
                    <input required="required" type="number" value="32" id="age" name="age" size="10" />
                </div>
                <div class="elements">
                    <label for="pro"> Profession :</label>
                    <select name="pro">
                        <option value="Student">Student</option>
                        <option value="Engineer" selected="selected">Engineer</option>
                    </select>
                </div>
                <div class="elements">
                    <label for="Gender">Gender: </label>
                    <input type="radio" name="gender" value="Male" checked="checked" id="r1"> Male 
                    <input type="radio" name="gender" value="Female" id="r2"> Female 
                </div>
                <div class="elements">
                    <label for="hobby">Hobby :</label>
                    <input type="checkbox" name="hobby[]" value="Sports" id="ch1" checked="checked"> Sports 
                    <input type="checkbox" name="hobby[]" value="Coding"  id="ch2"> Coding 
                </div>
                <div class="submit">
                    <input type="submit" id="btn" name="btn" class="btn" value="Submit" />
                </div>
            </fieldset>
        </form>
    </body>
</html>

I don't know it's the correct way to write full code or not but execution end to end I have given full code here.

Xavier Brassoud · Accepted Answer · 2021-10-26 12:01:32Z

1

You can use JSON.stringify():

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

Then download the formData as this SO post suggest:

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(formData, 'json.txt', 'text/plain');

Here you simulate a click action to download your file as JSON, because a navigator doesn't have access to your local file storage.

edited Oct 26, 2021 at 12:01

answered Oct 26, 2021 at 11:53

Xavier Brassoud

7256 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

swarna Over a year ago

Hi Xavier, I changed but still it's not downloading the file.

Xavier Brassoud Over a year ago

Edited to your needs

Xavier Brassoud Over a year ago

@swarna this is working ?

swarna Over a year ago

No Xavier it's not

Collectives™ on Stack Overflow

How to save inputs of html form into json file?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related