0

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.

swarna
  • 300
  • 4
  • 9

1 Answers1

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.

Xavier Brassoud
  • 697
  • 6
  • 14