.submit is not a function, but i have no names or ids "submit". Why?

Question

I have form with input and button that has type="submit". When i am trying to create a submit event i got an error "submit is not a function".

I was trying to google this problem, but found only one solution, that is to change all names and ids "submit".

html

<form action="" className="testform">
  <input type="text" name="entry.1385083426"/>
  <button type="submit">Send</button>
</form>

js

var forma = document.getElementsByClassName("testform");
forma.submit(function(e){
  e.preventDefault();
  var formData = this;
  console.log(this);
});

`getElementsByClassName()` returns a HTMLCollection. It's also not a jQuery method, which is what `submit(callback)` is. — Taplar, Mar 22 '19 at 21:49
getElementsByClassName returns a collection of objects (even if it only contains one item). See https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName. You have to find the item within the collection and run the submit method against that instead. Or give the form an ID and so getElementById instead — ADyson, Mar 22 '19 at 21:49
`className="testform"` is an invalid attribute also. it's just `class` — Taplar, Mar 22 '19 at 21:51
Also see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit for the correct usage of the submit() method. It does not have a callback (what would be the point...the page has died after you submit). Maybe you confused it with the jQuery event handler of the same name. If you want to handle a form submit _event_ using native JS then use "addeventlistener". All of this is very easily google-able.... — ADyson, Mar 22 '19 at 21:52
Possible duplicate of [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — , Mar 22 '19 at 21:54
@ChrisG yet another bookmark for my duplicate stackoverflow folder, ^_^ — Taplar, Mar 22 '19 at 22:00

score 1 · Answer 1 · edited Mar 23 '19 at 01:07

Method "getElementsByClassName" returns HTMLCollection, not HTMLElement. HTMLCollection does not have a "submit" method.

Use method "addEventListener" to set event listener. Also, your js-code must be either inserted after your html-form or executed after triggering DOMContentLoaded event. Otherwise the form will not be found.

<form action="" class="testform">
  <input type="text" name="entry.1385083426"/>
  <button type="submit">Send</button>
</form>
<script>
var forma = document.getElementsByClassName("testform");
forma[0].addEventListener('submit',function(e){
  e.preventDefault();
  var formData = this;
  console.log(this);
});
</sctipt>

score 1 · Answer 2 · answered Mar 22 '19 at 22:20

You have a few problems:

Your form element has an invalid className attribute - this should just be class.
getElementsByClassName returns a HTMLCollection - like an array. You want to only access the first one of these, so use getElementsByClassName("testform")[0].
You are attaching your submit event handler the wrong way - either use onsubmit or addEventListener.

Here's the fixed code:

<form action="" class="testform">
  <input type="text" name="entry.1385083426"/>
  <button type="submit">Send</button>
</form>

JavaScript:

var forma = document.getElementsByClassName("testform")[0];
forma.addEventListener("submit", function(e){
  e.preventDefault();
  var formData = this;
  console.log(this);
});

.submit is not a function, but i have no names or ids "submit". Why?

2 Answers2