Form data in self.body is null. I am using Preact and Total js. value="@{M.email}" is not working. It populates the form with this value

Question

submitHandler is the function that I call onSubmit and sending data using XMLHttpRequest. I am sending data using xhr.Send() but in the controller, in self.body I am getting null values.

class Form extends Component {
  render(props, state) {
    <div>
      <div class="field">
        <label class="label">PHONE NUMBER</label>
        <div class="control">
          <input
            class="input"
            type="tel"
            placeholder="+91 "
            name="phone"
            value="@{M.phone}"
            onInput={linkstate(this, "phone")}
          />
        </div>
      </div>
    </div>;
  }
}
export default Form;

submitHandler = () => {
  let formData = new FormData(document.getElementById("signup"));

  let xhr = new XMLHttpRequest();
  xhr.open("POST", "/xhr", true);

  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  xhr.onreadystatechange = function() {
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
      console.log("Request finished");
    }
  };

  xhr.onload = () => {
    alert(xhr.responseText);
  };
  xhr.send(formData);
};

Answer 1

Are you sure that formData contains some data? Check the request in web developer tools and try to catch data.

Answer 2

Self.body from my understanding requires a JSON object. I converted the formData into a JSON object and it works. xhr.send(JSON.stringify(Object.fromEntries(formData)));