如何在提交脚本中使用表单输入值？

Question

我正在尝试做一件简单的事情。我有一个网站，我希望人们能够发送一些反馈并警告我，因为我有一个“通知所有者”按钮，它显示一个表单，并且在提交时应该执行一个 python 脚本，向自己发送一封包含他们信息的电子邮件填满。

这是我的表单代码（index.html - 在客户端创建）

<script>
async function notifyOwner() {
  await fetch("api/notify", { method: "post" }).catch(console.log);
}
</script>

<div class="form-popup" id="myForm">
      <form class="form-container" name="form-owner">
        <h1>Notify Owner</h1>
        <label><b>Name</b></label>
        <input id="name" style="width:90%" type="text" placeholder="Enter your name$        
        <label><b>Message</b></label>
        <input id="context" style="width:90%" type="text" placeholder="Enter Reason$
        <button type="submit" class="btn" onclick="notifyOwner()">Submit</button>
        <button type="button" class="btn cancel" onclick="closeForm()">Close</butto$
      </form>
</div>

这是我的服务器端处理

app.post("/api/notify", async (req, res) => {
  try{
    var subject = "teste";
    var body = "ok";
    child_process.execSync('python3 sendEmail.py ' + subject + " " + body);
  }catch(error){
    console.error(error);
  }
});

我应该怎么做才能用 id="name" 中的值替换 var 主题并用 id="context" 中的值替换 var 主体？

Answer 1

已解决

在服务器端。

app.use(express.json());
app.post("/api/notify", async (req, res) => {
    try{
        const subject = req.body.sub;
        const body = req.body.cont;
        child_process.execSync('python3 sendEmail.py ' + subject + " " + body);
    }catch(error){
        console.error(error);
    }
});

在客户端。

<script>
async function notifyOwner(ele) {
  const name = document.getElementById("name");
  const context = document.getElementById("context");
  await fetch("api/notify", {
    method: "POST",
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({sub: name.value, cont: context.value})
  }).catch(console.log);
}
</script>

<button type="submit" class="btn" onclick="notifyOwner(this)">Submit</button>

Answer 2

在客户端脚本标签中：

async function notifyOwner(ele) {
  const form = ele.parentElement.parentElement
  await fetch("api/notify", { 
    method: "POST",
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({data form.whatever}) // Replace whatever with whatever data you want to send from the form
  }).catch(console.log);
}

HTML：

...
        <button type="submit" class="btn" onclick="notifyOwner(this)">Submit</button>
...

将this 传递给notifyOwner

在服务器中：

app.use(express.json());

app.post("/api/notify", async (req, res) => {
  try{
    const { data } = req.body; // Get key that was sent
  }catch(error){
    console.error(error);
  }
});