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>