0

I'm trying to figure out a way to submit what's in the textbox automatically by simulating hitting Enter Key.
We want to avoid using submit() so I'm trying to find a way to submit by simulating enter key.

I want to use strict Javascript without jquery.

Would you be able to review the code below and how I can simulate hitting Enter Key after populating the value in the text box?

I'm new to Javascript so please be patient with me. Let me know if you need anything.

This is my current script:

//Find reason then populate text box
function FillText() {
    var TextField = document.getElementsByName("reason");
    TextField[0].value = "TEST";
}

var delayInMilliseconds = 6000; //6 second
setTimeout(function() {
    FillText();
}, delayInMilliseconds);

How should I modify FillText function so it would work? (Compared to my original script?)

//Find reason then populate text box
function FillText() {
    var TextField = document.getElementsByName("reason");
    TextField[0].value = "TEST";

    var evt = new KeyboardEvent("keydown", {
    bubbles: true, cancelable: true, keyCode: 13
    });
    TextField[0].dispatchEvent(evt);
}

Edit / Note: Most of the previous posts refer to initKeyboardEvent which applies to Firefox. I'm looking for one that will work with Chrome and with other browsers using strictly Javascript.

casao01
  • 37
  • 6
  • 2
    This may be useful: https://stackoverflow.com/questions/17323279/simulate-keypress-without-jquery – Mohamed Farouk Jan 30 '20 at 04:14
  • 3
    Does this answer your question? [Simulate keypress without jquery](https://stackoverflow.com/questions/17323279/simulate-keypress-without-jquery) – gforce301 Jan 30 '20 at 04:26
  • @gforce301 I already searched for quite a bit but most of them had initKeyEvent which only applies to Firefox. How would I modify the script? `function FillText() { var TextField = document.getElementsByName("reason"); TextField[0].value = "TEST"; var evt = new KeyboardEvent("keydown", { bubbles: true, cancelable: true, keyCode: 13 }); TextField[0].dispatchEvent(evt); }` – casao01 Jan 30 '20 at 06:07
  • @gforce301 I did search and most of the posts use initKeyEvent which applies to Firefox and it has been deprecated. I'm trying to find one that applies to Chrome (mainly) and all other browsers. – casao01 Jan 30 '20 at 06:15
  • Read this: [keyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) and this: [EventTarget.dispatchEvent()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent) if you need to understand the answer given by Grey Chanel. – gforce301 Jan 30 '20 at 06:26
  • @gforce301 I tried to modify my FillText function but it still didn't submit. Can someone provide additional input? – casao01 Jan 30 '20 at 06:45
  • From Grey Chanel's answer: `element.dispatchEvent(evt);` See the part that says "element"? You tried `FillText[0].dispatchEvent(evt);` "FillText" is a function not an element. The element would be `TextField[0]`. I'm guessing there is an error in your console (I bet there is!). That being said, you've referenced "submit". Are you trying to submit a form? If so, is the "reason" text field a `textarea` element? Because even pressing the actual "enter" key in a `textarea` won't submit a form, it gives you a new line, so "simulating" the enter key isn't going to submit the form. – gforce301 Jan 30 '20 at 06:58

1 Answers1

1

Try this:

var evt = new KeyboardEvent("keydown", {
    bubbles: true, cancelable: true, keyCode: 13
});
element.dispatchEvent(evt);
Grey Chanel
  • 212
  • 1
  • 5
  • Where would I be putting this in my script? I would like to modify FillText function. Is this how I should be modifying my script? `function FillText() { var TextField = document.getElementsByName("reason"); TextField[0].value = "TEST"; var evt = new KeyboardEvent("keydown", { bubbles: true, cancelable: true, keyCode: 13 }); TextField[0].dispatchEvent(evt); }` – casao01 Jan 30 '20 at 06:02
  • can you provide additional input? How should I modify my FillText function? – casao01 Jan 30 '20 at 06:16
  • @casao01: yeah, you can give it a try. If it solves your issue, let's mark this answer as an accepted answer. – Grey Chanel Jan 30 '20 at 06:36
  • I tried the code above in my question but it still isn't working. Can you provide some help? I'm stuck and would greatly appreciate input. – casao01 Jan 30 '20 at 06:43