0

I keep getting TypeError: document.getElementById(…).submit is not a function when i try and use document.getElementById("mysubmit").submit();

I've searched a lot and the biggest reason is that someone named something submit, and beacuse of that the function is over-ridden. I've checked all my code, and i have nothing named submit, and cant figure out how to get this to work. Here's the code:

{% extends "layout.html" %}

{% block title %}
    Register
{% endblock %}

{% block main %}
    <form action="/register" method="post" class ="needs-validation" novalidate>
        <div class="form-group">
            <input autocomplete="off" autofocus class="form-control"id = username name="username" placeholder="Username" type="text" required>
        </div>
        <div class="form-group">
            <input class="form-control" name="password" placeholder="Password" type="password"required>
        </div>
        <div class="form-group">
            <input class="form-control" name="confirmation" placeholder="Confirm Password" type="password"required>
        </div>
        <button onclick = "checkUser()" class="btn btn-primary" type="submit" id = "mysubmit"  >Register</button>
    </form>

    <script>

        /* TODO */
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function() {
          'use strict';
          window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
              form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                  event.preventDefault();
                  event.stopPropagation();
                }
                form.classList.add('was-validated');
              }, false);
            });
          }, false);
        })();

        document.getElementById("mysubmit").addEventListener("click", function(event){
          event.preventDefault();
          });

        function checkUser() {

            var username = document.getElementById("username").value;
            console.log(username)

            $.get('/check', {username: username}, function(response) {
              if (response == true) {
                document.getElementById("mysubmit").submit();
              }
              else {
                document.getElementById("mysubmit").reset();
              }
            });
        }




    </script>
{% endblock %}
1

Make sure to call the form's submit method, the submit button has no such thing.

1
  • Thanks! Not sure how I didn't catch that.
    – Jgoren
    Sep 11 '19 at 16:45

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .