How to get updated json file for new form inputs using javascript or jquery?

Question

Can I know that how to get updated json file for the newly entered form input fields. As of now, I can able to save my form input fields into my json file, but if I enter any new input value then if I hit my Save button, then this newly entered values are not storing into my json file(I can still see my old key/values). Please let me know where I'm doing wrong and how to do this ?

html:

<form id="imagesId">
    <input type="hidden" value="/images/Image1.png" name="Image1">
    <input type="hidden" value="/images/Image2.png"  name="Image2" >
    <input type="hidden" value="/images/Image3.png" name="Image3"> 
    <input type="hidden" value="/images/Image4.png" name="Image4">
    <input type="hidden" value="/images/Image5.png" name="Image5">

    <input type="button" id="submitButton" value="Save">
</form>

json:

[{"name":"Image1","value":"/images/Image1.png"},{"name":"Image2","value":"/images/Image2.png"},{"name":"Image3","value":"/images/Image3.png"},{"name":"Image4","value":"/images/Image4.png"},{"name":"Image5","value":"/images/Image5.png"}]

jQuery:

$("#submitButton").on('click', function(e) {
var jsonToSave = $("#imagesId").serializeArray();
var jsonData = JSON.stringify( jsonToSave );
    var $downloadAnchor = $("<a/>", {
        href: 'data:text/json;charset=UTF-8,' + jsonData,
        download: "Image.json"
    });
$downloadAnchor.text("Click here to download JSON");
$("#imagesId").append($downloadAnchor);
e.preventDefault();
return false;
});

Answer 1

The problem was that $downloadAnchor holds a reference to a DOM element (a jQuery object = a DOM element wrapped in $()). When you append that element to the DOM, $downloadAnchor still refers to that same object. It doesn't magically duplicate it when you want to insert it again into the DOM, unless you .clone() it.

What you need do is to check if that anchor (thru it's ID/class) is already in the DOM, if yes, just update it's href with the new data as below.

$("#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': "Image.json",
                'id': 'download',
                'text': "Click here to download JSON"
            })
        );
    }
});

A demo for the above.

Edit: To be able to append each file uploaded as an input (with a unique name + value of the uploaded file) to the form, you need to do 2 things.

1. Bind a change handler to the file input, if a file is uploaded (meaning, not just a click and cancel on the file upload dialog), append it to the form as an input with the file as the value (after whatever find/replace you want to do).

2. The click handler on the $("#submitButton") would only take in all the inputs, serialize them and then create/modify the download anchor link as in my first code attempt.

Here is a demo for the above (the edit part).

var $form = $("#imagesId"); //The form
var len = $form.find('input[type="hidden"]').length; //Number of files in the form

$form.on("change", ":file", function() {
    var file = $(this).val() || false;
    if (file) {
        //Do your replace etc. here
        //.replace(/C:\\fakepath\\/i, '');
        len++;
        $form.append('<input type="hidden" value="' +file+ '"  name="image' +len+ '" />');
    }
});

$("#submitButton").on('click', function(e) {

    e.preventDefault();
    var jsonToSave = $form.serializeArray();
    var jsonData = JSON.stringify(jsonToSave, null, 4);
    var $downloadLink = $("#download");
    alert (jsonData);
    //Other code goes here such as create anchor, append/modify etc.
});

Link to the demo for the edits above.

Answer 2

You Can use push like this

oldJson.push(newJSon);