HOW TO FOCUS ON INPUT ELEMENT AND SELECT SUBMITTED VALUE AFTER FORM SUBMIT EVENT? (NODE.JS-EJS)

13 July 2021, Abdulhakim Altunkaya

When you submit a form to a database (such as mongoDB), you realize the page reloading itself and input areas resetting themselves.This can be not user-friendly, as you might want users to easily insert a new value without using mouse again. You may see on the internet lots of solutions including preventDefault or ajaxloads which are complicated to integrate into your code. To fix this issue, we'll separate the solution into two parts.

FOCUS AFTER SUBMIT

Keeping Focus on the input field after submit is very easy. Just add "autofocus" as a attribute to your input element.

SELECT AFTER SUBMIT

I am using node.js and ejs structure. Select effect can be done with 3 steps.

1. On server.js you shoould export user input as a dynamic data to your ejs file.

2. On your new ejs file (it has to be a new ejs file), you'll have the same form but this time with a slightly different input element. It will have dynamic data.

3. Then on the same new ejs file, open a script area, and code this: