1

I have a JSON file as :

var info = [{ "place": "Turkey", "username": "jhon" }, { "place": "Dubai", "username": "bruce" }, { "place": "Italy", "username": "Wayne" }];

I have an HTML form as : 

<!DOCTYPE html>
<html>
    <body>

<form onsubmit="addToJSON();">
First name:<br>
<input type="text" id="place">
<br>
Last name:<br>
<input type="text" id="username">
<br><br>
<input type="submit" value="Submit">
</form> 
<script src="data.json"></script>
<script>
function addToJSON(){
    alert("inside JS");
    var x = document.getElementById('place').value;
    var y = document.getElementById('username').value;
    var obj = {
    place: x,
    username: y
};
localStorage.setItem("info",JSON.stringify(obj));
}
</script>

</body>
</html>

I am trying to get the values that the user inputs in the form and add them to the JSON var that I have. But I am going wrong somewhere.Help much appreciated! So that if the user enters wayne and india in the form, my JSON array must have those two objects added to them. Plus they should reflect in the file.

Improve this question
12
  • info is a global variable in another file? Commented Aug 3, 2015 at 6:37
  • yes! it is a global variable @raghavendra Commented Aug 3, 2015 at 6:38
  • then directly add obj to info array Commented Aug 3, 2015 at 6:38
  • how do I do the same? @raghavendra Commented Aug 3, 2015 at 6:40
  • use info.push(obj ); after obj in your code Commented Aug 3, 2015 at 6:40

2 Answers 2

Reset to default
1

It isn't possible to write to arbitrary files or URLs from browser-side JavaScript.

You would need to bundle the data up in an HTTP request (using XMLHttpRequest or just getting rid of the JavaScript and submitting the form normally), send it to an HTTP server, and then have a server side program (written in the programming language of your choice, which could be JavaScript via Node.JS) edit the file.

(Editing files on servers is generally a bad idea and using a database is normally a better option).

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

Comments

1

you can do like this

<!DOCTYPE html>
<html>
    <body>

<form onsubmit="addToJSON();">
First name:<br>
<input type="text" id="place">
<br>
Last name:<br>
<input type="text" id="username">
<br><br>
<input type="submit" value="Submit">
</form> 
<script src="data.json"></script>
<script>
if(!localStorage.getItem('info'))
    localStorage.setItem("info",JSON.stringify(info));
else
    info = JSON.parse(localStorage.getItem("info"));
function addToJSON(){
    alert("inside JS");
    var x = document.getElementById('place').value;
    var y = document.getElementById('username').value;
    var obj = {
    place: x,
    username: y
    };
    info.push(obj);
    localStorage.setItem("info",JSON.stringify(info));
}
</script>

</body>
</html>
Improve this answer

5 Comments

I tried what you gave but the changes still aren't reflecting in my JSON file! @raghavendra
see the console it is reflecting in info item
the alert I have inside the JavaScript did not pop up as well, so it isnt going within the JS also. @raghavendra
above answer is true. but you can get info object which is stored in the web browser.
try the jsfiddle.net/vdazU/1234 add two three names and refresh the pages. see the console

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.