OnSubmit方法准备要在操作中发送的数据

如何解决OnSubmit方法准备要在操作中发送的数据

这将是问题的后续内容[表单的“动作”和“提交”：哪个先执行？] [1] 得出的结论是先运行onSubmit，然后完成提交表单的操作。

我想编写我的onSubmit方法来清理将要发送的POST提交；有没有一种方法可以修改发送到服务器的POST消息，而不是通过更改字段的值，而是更改其组成？

例如，我的表格由两个字段组成，名称和姓氏。提交操作最终将发送一个POST正文，例如：

name=John&surname=Doe

但我希望POST正文为

fullname=John_Doe

实际上，我对如何解决此问题一无所知，因此，在任何地方可以找到有关此问题的文档的提示都会受到赞赏-我不想窃取执行此操作的代码，但是有些提示开始。

谢谢！ [1]：A form's "action" and "onsubmit": Which executes first? _

解决方法

您可以通过在发送请求之前修改表单数据来实现此目的。
但是您需要自己发送请求。

const form = document.querySelector("form");

form.addEventListener("submit",e => {
  e.preventDefault();

  let preparedData = new FormData(form);
  preparedData.append(
    "fullName",`${preparedData.get("firstName")} ${preparedData.get("lastName")}`
  );

  console.log("Fullname: " + preparedData.get("fullName"));
  var request = new XMLHttpRequest();
  request.open("POST","http://example.com/submitform.php");
  request.send(preparedData);
});

示例： https://stackblitz.com/edit/js-yia2yg?file=index.js

,

要停止表单操作，可以调用onSubmit方法：

<form action="/action_page.php" onsubmit="myFunction()">
  Enter first name: <input type="text" name="fname">
  Enter last name: <input type="text" name="lname">
  <input type="submit" value="Submit">
</form>

function myFunction(evt) { 
  evt.preventDefault();

  let data = {
    fullname: //place the data you need to send here
  };

  fetch("/post/data/here",{
    method: "POST",body: JSON.stringify(data)
  }).then(res => {
    console.log("Request complete! response:",res);
  });
};