0

I've an async function to validate the input of a form. If everything is correct then the form should be submitted.

I've tried the following code where my goal is to call the async function and once it's completed I execute the "then" part where, depending on the result of the async function classify, I want to complete the form submission.

Everything works well (the interception of the original submit event, the call to the async function, the evaluation of the comment text,..) except for the actual code to commentForm.submit(); where I get an Uncaught (in promise) TypeError: commentForm.submit is not a function error

I guess there is something very obvious I'm missing but I'm blocked at this point. 

<script>
           window.onload=function() {
               var commentForm = document.getElementById('commentform');
               commentForm.addEventListener('submit', function(event){

                  async function classify(input) {
                       // checks, for simplificity let's assume we just return false
                       return false;
                  }

                   event.preventDefault();
                   const textComment = document.getElementById('comment').value;
                   classify([textComment]).then(result => {
                       if (result) {
                          alert('Your comment has been flagged and cannot be submitted');
                       }
                       else  {
                           alert('Good to go');
                           commentForm.submit();

                       }
                   })
                })

           }
        </script>
Jordi Cabot
  • 7,432
  • 2
  • 27
  • 37
  • 2
    The message "commentForm.submit is not a function" points to the issue where `commentForm` is actually not returning a HTML form element. Try console logging the variable, what shows up? Are you sure that the element `#commentform` is available when the `window.onload` function is fired? Is it a form that is injected dynamically into the DOM? – Terry May 13 '19 at 06:13
  • Note that commentForm works well at the beginning of the script, where I add the listener to its onsubmit event. This listener is indeed called when the user submits a form. But then this same commentForm variable seems to be "lost" inside the then block. I also tried to directly call document.getElementById('commentform').submit() and I get the same kind of error – Jordi Cabot May 13 '19 at 07:36
  • What happens when you console log it inside the `else` block? Is `commentForm` undefined? Does your submit callback has any side effects of removing the form element in it? – Terry May 13 '19 at 07:50
  • Nope. Result of console.log(commentForm) inside that "else" shows "
    ....
     – Jordi Cabot May 13 '19 at 07:51
  • 1
    Do you have an element that uses `submit` in its id or name attribute? That will cause the element to shadow the `.submit()` method on the form: https://stackoverflow.com/questions/833032/submit-is-not-a-function-error-in-javascript – Terry May 13 '19 at 07:54
  • Indeed, this was the problem. I was so concerned about the async part of the code that I miss this more obvious mistake. For all, WP devs out there, be careful since you'll run into this problem for sure. Since I can't easily change the name of the button, I've used this solution: HTMLFormElement.prototype.submit.call(commentForm) – Jordi Cabot May 13 '19 at 08:14

0 Answers0