JSFiddle - React, Tailwind, and code Playground

serialize form to create JSON

by Andrew Pougher

HTML

<form id="imagesId">
    <input type="hidden" value="/yourfolder/Image1.png" name="Image1">
    <input type="hidden" value="/yourfolder/Image2.png"  name="Image2" >
    <input type="hidden" value="/yourfolder/Image3.png" name="Image3"> 
    <input type="hidden" value="/yourfolder/Image4.png" name="Image4">
    <input type="hidden" value="/yourfolder/Image5.png" name="Image5">
    <input type="hidden" value="/yourfolder/Image6.png" name="Image6">
    <!-- add more inputs and check -->
    <input type="button" id="submitButton" value="Save">
</form>

JavaScript

$("#submitButton").on('click', function(e) {
	e.preventDefault();
    var $form = $("#imagesId");
    var jsonToSave = $form.serializeArray();
    var jsonData = JSON.stringify(jsonToSave);
    var $downloadLink = $("#download");

    if ( $downloadLink.length ) {
        $downloadLink.attr({
        	'href': 'data:text/json;charset=UTF-8,' + jsonData
        });
    } else {
        $form.append(
            $("<a/>", {
                'href': 'data:text/json;charset=UTF-8,' + jsonData,
                'download': "imagelist.json",
                'id': 'download',
                'text': "Click here to download JSON"
            })
        );
    }
});