HTML表单在我提交之前就奇怪地发布了

Question

我有这个 HTML 表单：

  <form id="myForm" type="POST" onclick="addTodo()">
    <fieldset>
      <legend>Company Information</legend>
      <label for="shippingName">Company Name:</label>
      <input type="text" name="company" id="company" /><br />
    </fieldset>
    <br />

    <input type="hidden" name="uniqueid" id="uniqueid">
    <input type="submit" value="Submit" id="form-submit" />
  </form>

当我点击字段输入值时，我的 Airtable DB 会创建行，当我最终提交时，我有 2 行可能 3 行。

这是我的 js 代码：

    function addTodo() {
  dddd = document.getElementById('company').value
  app_id = "app123456789"
  app_key = "key123456789"
  table_id = "Table123456789"
  let data = {
    "records": [
      {
        "fields": {
          "Notes": "Notes",
          "Company Name": dddd
        }
      }
    ]
  };
  let axiosConfig = {
    headers: {
      'Authorization': "Bearer " + app_key,
      'Content-Type': "application/json"
    }
  };
  axios.post("https://api.airtable.com/v0/" + app_id + "/" + table_id, data, axiosConfig)
    .then(resp => console.log(resp))
    .catch(error => console.log(error))
};

我做错了什么？

Answer 1

我建议您尝试将 onclick 替换为 onsubmit，因为每当您尝试单击表单中的字段时，它都会被触发。

<form id="myForm" type="POST" onsubmit="addTodo()">
</form>