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

Multi tool use
Multi tool use












0
















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. 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.










share|improve this 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 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
















0
















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. 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.










share|improve this 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 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














0












0








0









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. 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.










share|improve this question

















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. 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.





This question already has an answer here:




  • How to prevent ENTER keypress to submit a web form?

    27 answers








javascript html events flask addeventlistener






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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 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



















  • @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

















@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












1 Answer
1






active

oldest

votes


















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);





share|improve this answer


























  • 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











  • 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


















1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









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);





share|improve this answer


























  • 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











  • 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
















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);





share|improve this answer


























  • 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











  • 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














0












0








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);





share|improve this answer















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);






share|improve this answer














share|improve this answer



share|improve this answer








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 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











  • 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











  • 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



WQMZB5hkV 20N1GfZoR lKJ191 2koG5V9Ncv4zrFHXg9DoeAzvVP LDY0ERxjUJ181
xF1lb8g

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas