Getting HTML form values with JavaScript and saving them into JSON key and value pairs

Question

Objective

FrameWork used : ElectronJS

I want to take the user submitted form, and use the NodeJS script to generate a JSON file on client PC. The json file will have key and value pairs.

Please see below for expected output.

HTML

<form id="form" method="POST" action="#">
<div class="form-group col-auto">
    <input type="text" class="form-control" id="username" name="username" placeholder="Enter Username" value="">
</div>
<div class="form-group col-auto">
    <input type="text" class="form-control" id="account" name="account" placeholder="Enter Account" value="">
</div>
     <button type="submit" id="save" class = "btn text-white mb-0"> Save </button>
</form>

JS

document.getElementById("save").addEventListener('click', saveJSON(e))

async function saveJSON(e){

  e.preventDefault()

  var userData = document.getElementById('username').value
  var acctData = document.getElementById('account').value

  var formData = userData + acctData;
  console.log(formData);

  await writer.jsonWriter(formData);


//Error - Uncaught TypeError: Cannot read property 'value' of undefined.

Error

Here is the error I am facing

NodeJS Script

async function jsonWriter(data){

   let element = JSON.stringify(data);
   fs.writeFileSync(__dirname + '\\data\\auth.json', element)

}

module.exports.jsonWriter = jsonWriter;

Required Output

// auth.json

{"username":"Stack","account":"Overflow"}

querySelector is supposed to be using CSS selectors therefore it is not finding your elements. You may be better off using document.getElementById(). developer.mozilla.org/en-US/docs/Web/API/Document/querySelector — cela
– cela, Commented Sep 30, 2020 at 14:30

cela · Accepted Answer · 2020-09-30 15:04:27Z

I believe there was an issue with how you were passing your event into your function and trying to call preventDefault(). I put your function directly on the event listener method with async keyword.

As previously mentioned, document.querySelector() uses CSS selectors unlike document.getElementById(). In your case I would stick with getting the input elements by their ID.

Like Paul said in his answer, you need a JavaScript object for JSON.stringify() to work properly.

document.getElementById("save").addEventListener('click', async function(e) {
  e.preventDefault()

  var userData = document.getElementById('username').value
  var acctData = document.getElementById('account').value

  var formData = {
    username: userData,
    account: acctData
  }; // create JS object
  console.log(JSON.stringify(formData));
});

<form id="form" method="POST" action="#">
  <input type="text" id="username" name="username" placeholder="Enter Username">
  <input type="text" id="account" name="account" placeholder="Enter Account">
  <button type="submit" id="save">Save</button>
</form>

Paul Louppe · Accepted Answer · 2020-09-30 14:39:41Z

1

Okay I think that I can see your mistake.

In the Javascript you can change this part :

 var formData = userData + acctData;
 console.log(formData);
 await writer.jsonWriter(formData);

To this part : Try to assign it to a javascript object like that :

var formData = {username: userData, account: acctData};
console.log(formData);
await writer.jsonWriter(formData);

it will stringify your object and write an appropriate output.

I think.

answered Sep 30, 2020 at 14:39

Paul Louppe

536 bronze badges

1 Comment

Mazino Over a year ago

Thank you, but this problem still remains Uncaught (in promise) TypeError: Cannot read property 'value' of null at HTMLButtonElement.saveJSON

Collectives™ on Stack Overflow

Getting HTML form values with JavaScript and saving them into JSON key and value pairs

Objective

HTML

JS

Error

NodeJS Script

Required Output

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Objective

HTML

JS

Error

NodeJS Script

Required Output

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related