How do I prevent my keyUp event listener from firing multiple times [duplicate]

Multi tool use
This question already has an answer here:
How to prevent ENTER keypress to submit a web form?
27 answers
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.
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.
javascript html events flask addeventlistener
marked as duplicate by Community♦ Dec 28 '18 at 22:05
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
|
show 3 more comments
This question already has an answer here:
How to prevent ENTER keypress to submit a web form?
27 answers
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.
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.
javascript html events flask addeventlistener
marked as duplicate by Community♦ Dec 28 '18 at 22:05
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
@Herohtar sorry that was just a typo, i have it askeyup
in my code
– Sheshank S.
Dec 28 '18 at 21:52
In that case, you aren't doing anything to prevent the defaultsubmit
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
|
show 3 more comments
This question already has an answer here:
How to prevent ENTER keypress to submit a web form?
27 answers
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.
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.
javascript html events flask addeventlistener
This question already has an answer here:
How to prevent ENTER keypress to submit a web form?
27 answers
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.
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.
This question already has an answer here:
How to prevent ENTER keypress to submit a web form?
27 answers
javascript html events flask addeventlistener
javascript html events flask addeventlistener
edited Dec 28 '18 at 21:51
Sheshank S.
asked Dec 28 '18 at 21:44


Sheshank S.Sheshank S.
1,4231219
1,4231219
marked as duplicate by Community♦ Dec 28 '18 at 22:05
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Community♦ Dec 28 '18 at 22:05
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
@Herohtar sorry that was just a typo, i have it askeyup
in my code
– Sheshank S.
Dec 28 '18 at 21:52
In that case, you aren't doing anything to prevent the defaultsubmit
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
|
show 3 more comments
@Herohtar sorry that was just a typo, i have it askeyup
in my code
– Sheshank S.
Dec 28 '18 at 21:52
In that case, you aren't doing anything to prevent the defaultsubmit
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
@Herohtar sorry that was just a typo, i have it as
keyup
in my code– Sheshank S.
Dec 28 '18 at 21:52
@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
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
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
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
@ShahinSorkh that is already there, right?
– Sheshank S.
Dec 28 '18 at 21:59
|
show 3 more comments
1 Answer
1
active
oldest
votes
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);
Sorry, this didn't work I do havekeyup
in my eventlistener. Also it has been triggering, just too many times
– Sheshank S.
Dec 28 '18 at 21:52
Well, then, I have a suspicion that it has nothing to do with your JavaScript listener for this action because your JS is now correct.
– Marcus Parsons
Dec 28 '18 at 21:58
See, my updated answer, Sheshank.
– Marcus Parsons
Dec 28 '18 at 21:59
hmm but now it isn't submitting at all..
– Sheshank S.
Dec 28 '18 at 22:01
never mind, it is submitting but getting the same problem.
– Sheshank S.
Dec 28 '18 at 22:02
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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);
Sorry, this didn't work I do havekeyup
in my eventlistener. Also it has been triggering, just too many times
– Sheshank S.
Dec 28 '18 at 21:52
Well, then, I have a suspicion that it has nothing to do with your JavaScript listener for this action because your JS is now correct.
– Marcus Parsons
Dec 28 '18 at 21:58
See, my updated answer, Sheshank.
– Marcus Parsons
Dec 28 '18 at 21:59
hmm but now it isn't submitting at all..
– Sheshank S.
Dec 28 '18 at 22:01
never mind, it is submitting but getting the same problem.
– Sheshank S.
Dec 28 '18 at 22:02
add a comment |
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);
Sorry, this didn't work I do havekeyup
in my eventlistener. Also it has been triggering, just too many times
– Sheshank S.
Dec 28 '18 at 21:52
Well, then, I have a suspicion that it has nothing to do with your JavaScript listener for this action because your JS is now correct.
– Marcus Parsons
Dec 28 '18 at 21:58
See, my updated answer, Sheshank.
– Marcus Parsons
Dec 28 '18 at 21:59
hmm but now it isn't submitting at all..
– Sheshank S.
Dec 28 '18 at 22:01
never mind, it is submitting but getting the same problem.
– Sheshank S.
Dec 28 '18 at 22:02
add a comment |
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);
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);
edited Dec 28 '18 at 21:59
answered Dec 28 '18 at 21:49


Marcus ParsonsMarcus Parsons
482212
482212
Sorry, this didn't work I do havekeyup
in my eventlistener. Also it has been triggering, just too many times
– Sheshank S.
Dec 28 '18 at 21:52
Well, then, I have a suspicion that it has nothing to do with your JavaScript listener for this action because your JS is now correct.
– Marcus Parsons
Dec 28 '18 at 21:58
See, my updated answer, Sheshank.
– Marcus Parsons
Dec 28 '18 at 21:59
hmm but now it isn't submitting at all..
– Sheshank S.
Dec 28 '18 at 22:01
never mind, it is submitting but getting the same problem.
– Sheshank S.
Dec 28 '18 at 22:02
add a comment |
Sorry, this didn't work I do havekeyup
in my eventlistener. Also it has been triggering, just too many times
– Sheshank S.
Dec 28 '18 at 21:52
Well, then, I have a suspicion that it has nothing to do with your JavaScript listener for this action because your JS is now correct.
– Marcus Parsons
Dec 28 '18 at 21:58
See, my updated answer, Sheshank.
– Marcus Parsons
Dec 28 '18 at 21:59
hmm but now it isn't submitting at all..
– Sheshank S.
Dec 28 '18 at 22:01
never mind, it is submitting but getting the same problem.
– Sheshank S.
Dec 28 '18 at 22:02
Sorry, this didn't work I do have
keyup
in my eventlistener. Also it has been triggering, just too many times– Sheshank S.
Dec 28 '18 at 21:52
Sorry, this didn't work I do have
keyup
in my eventlistener. Also it has been triggering, just too many times– Sheshank S.
Dec 28 '18 at 21:52
Well, then, I have a suspicion that it has nothing to do with your JavaScript listener for this action because your JS is now correct.
– Marcus Parsons
Dec 28 '18 at 21:58
Well, then, I have a suspicion that it has nothing to do with your JavaScript listener for this action because your JS is now correct.
– Marcus Parsons
Dec 28 '18 at 21:58
See, my updated answer, Sheshank.
– Marcus Parsons
Dec 28 '18 at 21:59
See, my updated answer, Sheshank.
– Marcus Parsons
Dec 28 '18 at 21:59
hmm but now it isn't submitting at all..
– Sheshank S.
Dec 28 '18 at 22:01
hmm but now it isn't submitting at all..
– Sheshank S.
Dec 28 '18 at 22:01
never mind, it is submitting but getting the same problem.
– Sheshank S.
Dec 28 '18 at 22:02
never mind, it is submitting but getting the same problem.
– Sheshank S.
Dec 28 '18 at 22:02
add a comment |
WQMZB5hkV 20N1GfZoR lKJ191 2koG5V9Ncv4zrFHXg9DoeAzvVP LDY0ERxjUJ181
@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