locked
How to convert form data to JSON and save it as a file in a web page created with mvc RRS feed

  • Question

  • User-1404740798 posted

    After you convert the form data to JSON, you want to save the JSON as a json file on your computer.

    If you press the button now, the json format is displayed on the screen, and after downloading the file, the file is downloaded by pressing the download button.

    Is there any way to convert and download it at the same time as pressing the button?

    <form class="form-control m-t-3" id="info" method="post">
    <div class="pull-right">
                            <input type="submit" class="btn btn-primary" value="save" id="save" />
                        </div>
                        <pre id="output"></pre>
                    </form>
                    <a href="#" class="btn btn-primary" id="link" download="JSON1.json">down</a>
    
    <script>
            (function() {
                function toJSONString(form){
                    var obj = {};
                    var elements = form.querySelectorAll("input, select");
    
                    for(var i = 0; i < elements.length; ++i){
                        var element = elements[i];
                        var id = element.id;
                        var value = element.value;
    
                        if(id) obj[id] = value;
                    }
    
                    var obj_s = JSON.stringify(obj, null, "\t");
    
                    var dataUri = "data:application/json;charset=utf-8,"+ encodeURIComponent(obj_s);
                    var link = $("#link").attr("href", dataUri);
    
                    return JSON.stringify(obj, null, "\t");
                    
                }
    
                document.addEventListener( "DOMContentLoaded", function() {
    
    		        var form = document.getElementById( "info" );
    		        var output = document.getElementById( "output" );
    
    		        form.addEventListener( "submit", function( e ) {
    			        e.preventDefault();
    
    			        var json = toJSONString(this);
    			        output.innerHTML = json;
    
    		        }, false);
    
    	        });
    
    
            })();
    </script>

    Monday, January 14, 2019 10:30 AM

All replies

  • User1520731567 posted

    Hi slkim,

    Is there any way to convert and download it at the same time as pressing the button?

    It seems that the compiler cannot trigger HTML download events and other onclick events at the same time.(it will ignore HTML download events and run onclick event)

    Note: HTML attribute download should be in <a> and onclick event should not be in <a>.

    So,I think it is possible to trigger multiple events by simulating HTML.

    For example:

    <form action="@Url.Action("ConvertToJson", "Home" )" class="form-control m-t-3" id="info" method="post">
        <div class="pull-right">
            @*<input type="submit" class="btn btn-primary" value="save" id="save" />*@
        </div>
        <pre id="output"></pre>
    
        <a href="#" id="link">down</a>
    
        <a href="#" id="link3" download="JSON1.json" style="display:none">simulate down</a>//simulate
    
        <input type="button"  id="link4"  style="display:none" onclick="this.form.submit()" />//simulate
    
    </form>
      $('#link').on('click', function () {
                alert(111);//event 1
                document.getElementById('link3').click(); //event 2 download 
                document.getElementById('link4').click(); //event 3 convert to json according to the previous post
      
            });

    Best Regards.

    Yuki Tao

    Tuesday, January 15, 2019 7:38 AM