Trigger callback on form submit
Question
I'm facing a problem, What I'm doing is there is a <form> which has a <textarea> . What I want to achieve is when the user press the Enter key on textarea then the form is submitted.
The default form is attached with an eventListener submit and execute a callback function.
But the problem is I want to execute that callback on Enter key.
I know I could achieve that same behavior by using JQuery .submit(callback) method.
But is there a way in Vanilla javascript re-trigger the same callback function.
const submitForm = (event) => { event.preventDefault(); alert('form is submitted!'); }; // Form Event document.getElementById('form').addEventListener('submit', submitForm, false); // Key Event document.getElementById('textarea').addEventListener('keypress', (event) => { if (event.which === 13 || event.keyCode === 13) { event.preventDefault(); // Form submit } }, false);
* { box-sizing: border-box; } textarea { width: 380px; min-height: 210px; padding: 18px; font-size: 26px; margin-bottom: 16px; resize: vertical; }
<form id="form" name="form"> <label> <textarea id="textarea" name="message" placeholder="Type Here"></textarea> </label> </form>
3 answers
solution1
0 2019-04-27 08:40:03
Try it like this:
document.getElementById('textarea').addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); // do your thing here document.getElementById('form').submit(); document.getElementById('testId').innerHTML = "it works!!!!"; // test } });
<!DOCTYPE html> <html> <body> <form id="form" name="form" action="/your_page.aspx"> <label><textarea id="textarea" name="message" placeholder="Type Here"></textarea></label> </form> <p id="testId"> </p> </body> </html>
solution2
0 ACCPTED 2019-04-27 08:56:19
The form tag needs to have an action , or else the form.submit() won't do anything.
<form id="form" name="form" action="/action_page.php" method="get">
<label>
<textarea id="textarea" name="message" placeholder="Type Here"></textarea></label>
<input type="submit">
</form>
This JS will call submit when pressing enter
let form = document.getElementById('form')
form.addEventListener('submit', submitForm);
document.getElementById('textarea').addEventListener('keypress', (event) => {
if (event.which == 13 || event.keyCode == 13) {
event.preventDefault()
form.submit()
}
});
But the real problem is that form.submit() will not raise the onSubmit event! So your eventHandler won't be called when you sumbit the form programmatically.
From MDN
The submit event only fires when the user clicks a submit button ( or ) in a form. The event is not raised when calling the form.submit() method directly.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event
solution3
0 2019-04-27 09:18:51
You could set a variable to determine if the form is allowed to submit.
var allow_submit = false;
And modify the form's submit event handler so that event.preventDefault() is called if the allow_submit variable isn't true :
document.getElementsByTagName("form")[0].addEventListener("submit", function(event) {
if (allow_submit !== true) {
event.preventDefault();
}
// the form is allowed to submit, do stuff
});
Then listen for a keyup event (on the textarea) and if the enter key (keycode 13 ) was pressed, set allow_submit to true and submit the form:
document.getElementsByTagName("textarea")[0].addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
allow_submit = true;
document.getElementsByTagName("form")[0].submit();
}
// enter key wasn't pressed, do other suff
});
NOTE: you might have to make the allow_submit variable a global variable, you can do so by replacing var with window. , like this:
window.allow_submit = true;
NOTE: you should store the form and textarea elements in a variable, if you're going to use them a lot.
Good luck.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.