来自 HTML/JS 表单的链接 [重复]答案

【问题标题】：Link from Form HTML/JS [duplicate]来自 HTML/JS 表单的链接 [重复]
【发布时间】：2022-01-02 13:17:06
【问题描述】：

我目前正在尝试制作一个程序，您可以在其中将链接输入到 HTML 表单中，当您单击按钮时，它会将您发送到该链接。但是，当我单击按钮时，页面只会清除表单。我是 Python 本地人，也是 HTML/JS 的新手，所以我构建代码的方式可能是为什么：

<form>
    <input type="url" id="link" placeholder="Enter link of website:" required>
    <br>
    <button class="outline" id="open">Create gate</button>
    </form>
    <script type="text/javascript">
        document.getElementById("open").onclick = () => 
        location.assign(String(document.getElementById("link").value));
    </script> </form>

【问题讨论】：

将type="button" 添加到您的按钮。这将阻止表单自动提交。
谢谢。可以提交您的评论作为答案，以便我将其标记为正确吗？
从重复的问题中可以看出如何按钮被确定为提交按钮通常是基于浏览器的 - 似乎没有标准。也就是说，这个问题是在 09 年写的，所以事情可能已经改变了。但是，如果您明确表示您的按钮不是type="submit"，则单击它时表单将不会提交。

标签： javascript html

【解决方案1】：

因为，您正在使用表单。你的按钮

<button class="outline" id="open">Create gate</button>

充当表单提交按钮，因此它在执行location.assign() 方法之前刷新页面。有很多方法可以解决这个问题。

一个简单的方法是专门告诉浏览器这个按钮不是提交按钮，我们可以通过在我们的按钮中使用type="button"属性来做到这一点。

创建门
您可以在表单提交上使用e.preventDefault() 来停止刷新页面。

试试下面的代码：

<!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>Location Object</title>
</head>
<body>
    <form>
        <input type="url" id="link" placeholder="Enter link of website:" required>
        <br>
        <button class="outline" id="open">Create gate</button>
    </form>
    <script type="text/javascript">
        document.getElementById("open").addEventListener('click', (e) => {
             e.preventDefault();
            location.assign(String(document.getElementById("link").value));
        });
       
    </script>
    </form>
</body>
</html>

【讨论】：

【解决方案2】：

您的代码完全按照提供的方式粘贴到一个最小的 HTML5 样板模板中，可以在 Textastic 代码编辑器和在 localhost 上运行的 Safari 中运行。

也许您的事件侦听器附近的其他一些 JavaScript 正在破坏箭头函数。也许将一个函数语句括起来会有所帮助？

【讨论】：