Javascript triger an Enter key without actually press the Enter key when onload page for search input

Question

I'm creating an onload page that contain search input, and the value is generated from url

http://localhost/example?i%search%this

in the onload page i create this =

<body onload="myFunction()">
// this is where i put the input search that needs Enter to active search
<input type="text" class="form-control searchable-input floatL value-not-empty" placeholder="Search Badan Usaha" name="s545858fe" id="s545858fe">
</body>

<script>
function myFunction() {
    var newURL = window.location.search.substr(1);
    var uri_dec = decodeURIComponent(newURL);
    document.getElementById("s545858fe").value = uri_dec;
}
</script>

my actual results is that i get "i search this" text in my input search, but its not execute the search because the search need enter key to execute

Possible duplicate of [Trigger a button click with JavaScript on the Enter key in a text box](https://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box) — dhilt, Aug 04 '19 at 05:01
actually my input page is a form control search Nick, so this is the search control that filter the data grid i have — www.cahyonegoro.com, Aug 04 '19 at 05:07
do you want to execute some code when `enter` key is pressed while input field is in focus? — Yousaf, Aug 04 '19 at 05:08
no @Yousaf, i just want to triger enter key without actually press the enter key so that my search input is executed — www.cahyonegoro.com, Aug 04 '19 at 05:10
so you want to execute code whenever you type something inside input field? — Yousaf, Aug 04 '19 at 05:11
@Yousaf No, i want to execute serach whenever the page is onload — www.cahyonegoro.com, Aug 04 '19 at 05:16
@dhilt its not the same, i want to trigger an Enter key when javascript onoad. NOT press the enter key — www.cahyonegoro.com, Aug 04 '19 at 05:24

skyline3000 · Answer 1 · 2019-08-04T07:45:01.113

0

You can trigger an Enter keypress inside the <input> by creating a KeyboardEvent() and then dispatching the event:

const entry = document.getElementById('s545858fe');

entry.addEventListener('keypress', function (event) {
    console.log('Keypress in entry with value: ' + this.value);
}, false);

function myFunction() {
    const evt = new KeyboardEvent('keypress', {});

    entry.focus();
    entry.value = "new value";
    entry.dispatchEvent(evt);
}

<body onload="myFunction()">
<input type="text" class="form-control searchable-input floatL value-not-empty" placeholder="Search Badan Usaha" name="s545858fe" id="s545858fe">
</body>

edited Aug 04 '19 at 07:45

answered Aug 04 '19 at 07:38

skyline3000

7,639
2
24
33

this dispatchEvent actually works but only if i delete the function myFunction() {} but when i delete it, its not reworking when i reload the page. the value is still the old value. can you give me pointer – www.cahyonegoro.com Aug 05 '19 at 03:25
Can you please elaborate what you mean it only works if you delete the function? Can you update your code? – skyline3000 Aug 05 '19 at 18:50

Javascript triger an Enter key without actually press the Enter key when onload page for search input

1 Answers1