HTML Form strangely POSTING before I even submit

Question

I have this HTML form:

  <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>

As soon as I click the field to type in a value, my Airtable DB creates row, when I finally submit, I have 2 possibly 3 rows.

Here's my js code:

    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))
};

What am I doing wrong?

score 3 · Answer 1 · answered Jan 25 '21 at 14:53

3

I suggest you try it replacing the onclick to onsubmit, because whenever you are trying to click a field in the form it gets fired.

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

answered Jan 25 '21 at 14:53

Jayr

592
1
3
14

Such a simple change, yet it makes everything work XD – Love2Code Jan 25 '21 at 15:08
It did not work, nothing happens. When I go back to onclick it works? – Juan-man Jan 25 '21 at 15:46
When I add a simple alert, it works. So why doesn't it with the script I posted? – Juan-man Jan 25 '21 at 15:49
How you mean it wont work, what errors do you experience with my edit? Or what alert added at your code or mine? Be more specific so i can check – Jayr Jan 25 '21 at 16:04

HTML Form strangely POSTING before I even submit

1 Answers1