0

Okay, before asking this question, I was sure there already was an answer on stackoverflow for this... but I can't find anything so here goes:

I'm using flask to create a website. One part of it to is to make comments. enter image description here

When I click enter, it should submit the form to add a comment to the Database.

Here is my code for that:

(This is the form)

<form method="POST">
    {{ form.hidden_tag() }}
    {% if form.comment.errors %}
        {{ form.comment(id="comment-input", class="new-comment", placeholder="Add a new comment", autofocus="autofocus") }}
        <div class="invalid-feedback" style="display: block;">
            {% for error in form.comment.errors %}
                <span>{{ error }}</span>
            {% endfor %}
        </div>
    {% else %}
        {{ form.comment(id="comment-input", class="new-comment", placeholder="Add a new comment", autofocus="autofocus") }}
    {% endif %}
    {{ form.submit(class="btn btn-outline-info", id="submit", style="display:none;") }}
</form>

And I'm using this javascript to submit the form when the enter key is pressed:

var input = document.getElementById("comment-input");
input.addEventListener("keyup", function(event) {
  // Cancel the default action, if needed
  event.preventDefault();
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Trigger the button element with a click
    document.getElementById("submit").click()
  }
});

The problem is, usually if I press enter after typing my comment, it works fine but if I hold down enter after typing my comment it submits multiple comments.

But if you look at my code it says keyUp not keyDown! I'm pretty sure when you hold down a key down, it still only keyUp once.

I've looked through stackoverflow, etc for about 2 hours now, hopefully this question will help my situation.

Sheshank S.
  • 3,053
  • 3
  • 19
  • 39
  • @Herohtar sorry that was just a typo, i have it as `keyup` in my code – Sheshank S. Dec 28 '18 at 21:52
  • In that case, you aren't doing anything to prevent the default `submit` event for the form. If you press enter in an input field that is part of a form the default action is to submit the form. – Herohtar Dec 28 '18 at 21:57
  • oh okay. so i should remove that function entirely? – Sheshank S. Dec 28 '18 at 21:58
  • `event.preventDefault()` should do the trick @Herohtar – ShahinSorkh Dec 28 '18 at 21:59
  • @ShahinSorkh that is already there, right? – Sheshank S. Dec 28 '18 at 21:59
  • If you're just wanting to use the default form submission that would be triggered by clicking the button, you don't need to add any extra JavaScript to handle that. However, if your submit button does something else to submit the form, then you will need the handler. – Herohtar Dec 28 '18 at 22:04
  • @SheshankS. Yes. and that's the point. I would create a sandbox with only the html and js parts to make sure if it's the problem with js. – ShahinSorkh Dec 28 '18 at 22:04
  • @ShahinSorkh Never mind i figured it out with the duplicate thing. – Sheshank S. Dec 28 '18 at 22:05

1 Answers1

0

keyUp is not a valid event in JavaScript. You have to get the correct casing for events to trigger manually. Change keyUp to keyup in your event listener, and it should work correctly.

Stop the form from submitting by preventing that event:

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();
}, false);
Marcus Parsons
  • 1,714
  • 13
  • 19