使用 JavaScript 获取 HTML 表单值并将它们保存为 JSON 键值对

Question

目标

FrameWork used : ElectronJS

我想获取用户提交的表单，并使用 NodeJS 脚本在客户端 PC 上生成一个JSON 文件。 json 文件将具有key and value pairs。

请参阅下面的预期输出。

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. 

错误

这是我面临的错误

NodeJS 脚本

async function jsonWriter(data){

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

}

module.exports.jsonWriter = jsonWriter;

需要的输出

// auth.json

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

Answer 1

我认为您将事件传递到函数并尝试调用 preventDefault() 的方式存在问题。我把你的函数直接放在带有async关键字的事件监听方法上。

如前所述，document.querySelector() 使用 CSS 选择器，与 document.getElementById() 不同。在您的情况下，我会坚持通过 ID 获取输入元素。

就像Paul 在他的回答中所说，您需要一个 JavaScript 对象才能让JSON.stringify() 正常工作。

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>

Answer 2

好的，我想我可以看出你的错误了。

在 Javascript 中，您可以更改这部分：

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

到这部分： 尝试将它分配给这样的 javascript 对象：

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

它会将你的对象字符串化并写一个合适的输出。

我认为。