Click submit button on enter on a multi-page form-CodePudding

I have 4 pages,

name.html
email.html
phone.html
address.html

Each page consist of an input tag alongwith a button tag:

<input type="text"  placeholder="Name" autofocus required>
<button type="submit"  onclick='loadHTML("question__wrapper","email.html")'>Submit</button>

When clicked on the submit button, it loads the given page using XHR Objects, and, that part is fine.

The problem is I want to click the submit button when the enter key is pressed. Below code works fine on the very first page, i.e., name.html.

let submit = document.getElementsByTagName("input")[0];
        submit.addEventListener("keyup", function (event) {
            if (event.keyCode === 13) {
                event.preventDefault();
                document.getElementsByClassName("submit-button")[0].click();
            }
        });

But, when the next page (email.html) is loaded, it doesn't works. I am not that much proficient in JS, so please help me out with this. I understand that I'll have to increment the value, which I've already tried, but no luck. What I think is, as the DOM is not updated, may be that's why it's not working. Please help.

Also, please note I have not used form tag, does that makes a difference?

CodePudding user response：

Wrap the elements in the form tag with onsubmit event, return false in the loadHTML method at last

function loadHTML(){
.
.
.
return false;
}

<form onsubmit='return loadHTML("question__wrapper","email.html")'>
<input type="text"  placeholder="Name" autofocus required>
<button type="submit"  onclick='loadHTML("question__wrapper","email.html")'>Submit</button>
</form>

CodePudding user response：

First off, it is poor practice to get DOM nodes based on the position of their tag name, because that can change very easily and you can forget to update the position. I'd recommend giving the input element an id, and then setting the submit variable you create to let submit = document.getElementByID('YOUR_ID_HERE');

After you follow proper convention, we can start to explore what the problem is here. I attempted to replicate what you described on my own, and in doing so realized that you're grabbing the input, not the submit button. (This wouldn't happen if you grabbed DOM nodes by ID, which is what I just described). What I realized is that what you're trying to accomplish is very trivial, since the user can tab over to the submit button and then press enter. Nonetheless, I decided the best way to solve your problem was by assigning the body and id, grabbing it's DOM node via that ID, and then assigning it an eventListener for the 'enter' keyCode. This means no matter where you are on the page, the Enter button will click the submit button. Use this at your own risk, if you have multiple forms this will only work on the submit button we just defined. You could experiment with wrapping the submit and input in a div and then autofocusing the div or elements within the div, I'm not sure how that would work, but for this one page, the solution I provided works.

let submit = document.getElementById('myfancyconventionalid');
let body = document.getElementById('body');

submit.addEventListener('click', () => {
    console.log("Clicked!");
});

body.addEventListener('keypress', (e) => {
    if(e.keyCode === 13){
        e.preventDefault();
        submit.click();
    }
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="body">
    <input id="thisisanid" placeholder="Name" autofocus required></input>
    <button type="submit" id="myfancyconventionalid" onclick='loadHTML("question__wrapper", "email.html")'>Submit</button>
    <script src="index.js"></script>
</body>
</html>