0

I have a webpage for signup form. I need the data entered in the form to be stored into a json file so that it can be used while login.

I am not using any webservers. I am running in browser. I tried little ajax but it gave me error.

My JSON file (file.json)

var details = [{
"username" : "user@example.com",
"password" : "1234"
},
{
"username" : "user1@example.com",
"password" : "12345"
}]

JavaScript:

function signup()
{

    var username = document.getElementById("uname").value;
    var password = document.getElementById("psw").value; 
  var xhttp = new XMLHttpRequest();
 var data = "username=username&password=password";
  xhttp.open("POST", "file.json", true);
  xhttp.send(data);
}

MY HTML

<!DOCTYPE html>
<html>
<title>Signup</title>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="file.json"></script>
<body>

<h2 style="text-align:center;">Signup Form</h2>  
  <div style="width:800px; margin:0 auto;border: 5px solid #f1f1f1;">
  <form  action="Javascript:signup();" style="padding-left:85px;">
    <label><b>&nbspEmail id :</b></label>
    <input type="text" placeholder="Enter Email" id="uname" required;>
    <label><b>&nbsp&nbsp&nbsp&nbspYour Full Name :</b></label>
    <input type="text" placeholder="Enter Name" id="name" required;><br>
     </div>
      <div style="width:716px; margin:0 auto;border: 5px solid #f1f1f1;padding-left:85px">
    <label><b>Password:</b></label>
    <input type="password" placeholder="Enter Password" id="psw" required>
    <label><b>Re-enter Password:</b></label>
    <input type="password" placeholder="Re-Enter Password" id="pswc" required onkeyup="passcheck(this.value);"><br>
    </div>
      <div style="margin:0 auto;padding-left:600px">
    <button type="submit" >Signup</button><br>
      <a href="login.html">Login now</a>
    </form>
  </div>
<div style="text-align:center;" id="error"></div>

</body>
</html>

When I run this code and check console, I am getting an error saying :

Failed to load file:///C:/Users/Victor/Documents/login%20js/file.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

what has to be done to store my new user data to file.json?

ineedanswerz
  • 13
  • 4

1 Answers1

0

If you are using Chrome browser, it will prevent you from opening the file due to cross domain security restrictions. Firefox browser may work for you.

My suggestion is install some local server like WAMP or XAMP. And try to run the file from there.

Rajat1937
  • 23
  • 12