Change json file (update) from HTML form

Question

I have a JSON file and I want to change its properties through an HTML form:

<h1>product detail</h1>
<form>
    Name:<br>
    <input id="prod-name" type="text" name="name" readonly><br>
    Number:<br>
    <input id="prod-number" type="text" name="number" readonly>
    <br>
    <textarea id="prod-desc" name="description" cols="100" rows="10" readonly>description</textarea>
    <br>
    <textarea id="prod-img" name="images" cols="100" rows="10" readonly>images</textarea>
    <br>
</form>
<button id="save-changes">SAVE</button>

I already retrieved the data from a JSON file with jQuery and AJAX but now I need to save it IN A FILE (not local storage)

$('#save-changes').on('click', function () {
    json[index].name        = $("#prod-name").val();
    json[index].number      = $("#prod-number").val();
    json[index].description = $("#prod-desc").val();
});

So basically i want to change name, number and description in my JSON file

If you retrieved it from the server with ajax, can you save it back to the server with ajax?... — War10ck
– War10ck, Commented Feb 1, 2018 at 19:24
You'd have to store the data on the server which means you have to send it back. Why not just submit the form with a proper submit input and handle the data on server? — CodeAt30
– CodeAt30, Commented Feb 1, 2018 at 19:26
Well i want to do this but i've never used PHP therefore I am asking for help — marcus-linmarkson
– marcus-linmarkson, Commented Feb 1, 2018 at 19:29
Can you elaborate on the flow of what is happening and what you want to happen. For instance: I don't understand why are you fetching the JSON in the first place? Are you auto-filling parts of the form and letting the user edit them? What do you want to happen with data that the user is filling out? Is it supposed to be stored in a database? — CodeAt30
– CodeAt30, Commented Feb 1, 2018 at 19:31
I have a JSON file with products info. They are shown on the page by readonly inputs. When i click "Update" button these inputs stop to be readonly and user can edit the product info (this is the task, not my idea). Update button is gone but "Save" one is shown. Now we can edit the inputs - product info - and after clicking "save" button the json file should be updated — marcus-linmarkson
– marcus-linmarkson, Commented Feb 1, 2018 at 19:34

CodeAt30 · Accepted Answer · 2018-02-01 19:52:37Z

2

Ok so based on your comments:

I think there are two ways to go about it. One is editing a javascript object and sending it back to the server. The second (which I find more simple) is to simply send back the form as it is edited. Both would require the item has some sort of unique id which is not editable, so that you can keep track of what it is you are actually updating in the server database.

so just make the form functional (simplified example):

<form name="yourForm" method="POST" action="pageHandlingUpdateRequestOnServer">

    <input name="db-item-id" type=hidden>
    <input name="prod-name" type="text">
    <input name="prod-number" type="integer">
    <input name="prod-desc" type="textarea">

    <input type="submit" value="Submit">
</form>

this form will fire a POST request to the address on action. That address should know how to handle a POST request, taking it, and updating your server database with it.

I don't know what you are using server-side. I also don't know what type of DB you run. if it's php look into PDO statements, and $_POST access. it's too long to answer here. But these two terms should lead you there with some effort and you'll learn a bunch of stuff during the process.

Some useful links:

edited Feb 1, 2018 at 19:52

answered Feb 1, 2018 at 19:46

CodeAt30

8847 silver badges20 bronze badges

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

3 Comments

marcus-linmarkson Over a year ago

Thank you very much for your involvement. I am not using a database - this is just a json file in the route folder. I am wondering if this can be done a bit simpler- as i cannot change the json file on my own so i cant add there unique id. BUT - the inputs readonly value were filled based on the item from list clicked so i have a variable index (in the json its array of products(objects). So maybe it can be just somehow overwritten based on input new value (so it will be eqaul to json[index].name lets say). Or im totally wrong?

marcus-linmarkson Over a year ago

okey works fine now, i just placed this index as a hidden input and accessed in such way all the data $index = $_POST['index']; $name = $_POST['name']; $number = $_POST['number']; $description = $_POST['description']; $jsonString = file_get_contents('products.json'); $data = json_decode($jsonString, true); $data[$index]['name'] = $name; $data[$index]['number'] = $number; $data[$index]['description'] = $description; $newJsonString = json_encode($data); file_put_contents('products.json', $newJsonString); thank you

CodeAt30 Over a year ago

@jake-ferguson Sorry just saw these comments. Great Job dude!

Collectives™ on Stack Overflow

Change json file (update) from HTML form

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related