如何将 HTML 转换为 JSON

Question

I am trying to get user input from a form to update onto a webpage. I have recently found out that JSON.stringify does not take html ID elements and that in order to do so they would need to be converted. I have found a guide here but did not help. If anyone has any ideas please let me know, I would truly appreciate it:D

 let type = document.getElementById('Type'); let html = type.outerHTML; let typeData = { html: html }; let name = document.getElementById('Name'); let html = name.outerHTML; let nameData = { html: html }; let quantity = document.getElementById('quantity'); let html = quantity.outerHTML; let quanData = { html: html }; update.addEventListener('click', _ => { fetch('/Plants', { method: 'put', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ type: typeData, name: nameData, quantity: quanData }) }).then(res => { if (res.ok) return res.json() }).then(response => { window.location.reload(true) }) }) server.js file where all my put route is app.put('/Plants', (req, res) => { quoteCollection.findOneAndUpdate( { type: req.body.type }, { $set: { quantity: req.body.quantity, type: req.body.type, name: req.body.name } } ).then(result => {res.json('Success')}).catch(error => console.error(error)) }); });

 <h2>Update an item</h2> <form id="inventory-form"> <input type="text" placeholder="Type" name="Type" id="Type" /> <input type="text" placeholder="Name" name="Name" id="Name" /> <input type="number" placeholder="quantity" name="quantity" id="quantity" /> <button id="update-button " type="submit">Submit</button> </form>

Answer 1

Use formData and do not use the click event but the form submit event:

document.getElementById("inventory-form").addEventListener("submit", function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  fetch('/Plants', {
      method: 'put',
      body: formData
    })
    .then(res => {
      if (res.ok) return res.json()
    })
    .then(response => {
      //    window.location.reload(true) // WHY???
    })

})

<h2>Update an item</h2>
<form id="inventory-form">
  <input type="text" placeholder="Type" name="Type" id="Type" />
  <input type="text" placeholder="Name" name="Name" id="Name" />
  <input type="number" placeholder="quantity" name="quantity" id="quantity" />
  <button id="update-button" type="submit">Submit</button>
</form>

But WHY reload the page?

Or if you need to refresh WHY use fetch?