单击多页表单上输入的提交按钮

发布于 2025-01-20 15:34:55 字数 998 浏览 0 评论 0原文

我有 4 个页面，

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

每个页面都包含一个输入标签和一个按钮标签：

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

当单击提交按钮时，它会使用 XHR 对象加载给定页面，并且该部分是美好的。

问题是我想在按下回车键时单击提交按钮。下面的代码在第一页（即 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();
            }
        });

但是，当加载下一页(email.html)时，它不起作用。我对JS不太精通，所以请帮我解决这个问题。我知道我必须增加该值，我已经尝试过，但没有运气。我认为，由于 DOM 没有更新，可能这就是它不起作用的原因。请帮忙。

另外，请注意我没有使用 form 标签，这有什么区别吗？

原文

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" class="text-answer" placeholder="Name" autofocus required>
<button type="submit" class="submit-button" 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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦情居士 2025-01-27 15:34:55

用onsubmit事件将元素包裹在表单标签中

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

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

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" class="text-answer" placeholder="Name" autofocus required>
<button type="submit" class="submit-button" onclick='loadHTML("question__wrapper","email.html")'>Submit</button>
</form>

回复收藏 0 原文

萌逼全场 2025-01-27 15:34:55

首先，基于其标签名称的位置获得DOM节点是不好的，因为这很容易更改，您可能会忘记更新位置。我建议给输入元素一个ID，然后将创建的提交变量设置为让submit = document.getElementById（'your_id_here'）;

遵循适当的惯例后，我们可以开始探索这里的问题。我试图复制您自己描述的内容，并意识到您正在抓取输入，而不是提交按钮。（如果您通过ID抓住DOM节点，这将不会发生，这就是我刚刚描述的）。我意识到的是，您要完成的工作非常微不足道，因为用户可以将其标记为“提交”按钮，然后按Enter。尽管如此，我决定解决问题的最佳方法是分配正文和ID，通过该ID抓住它的DOM节点，然后为“ Enter”键代码分配一个EventListener。这意味着无论您在页面上的位置，Enter按钮都会单击“提交”按钮。使用它自身的风险，如果您有多种表格，则只能在我们刚定义的提交按钮上工作。您可以尝试将提交和输入包装在DIV中，然后自动使用DIV内的DIV或元素，我不确定这将如何工作，但是对于这一页，我提供的解决方案。

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>

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>

回复收藏 0 原文

~没有更多了~