将浏览器重定向到表单输入。简单的JS

Question

我有一个很简单的问题。我有需要接受的表单输入，然后根据该表单输入重定向浏览器。我想在客户端执行此操作，因为服务器确实很麻烦。这是我的代码，但我不知道为什么它不起作用。感谢任何帮助。

HTML:

<form action="open" method="" >
    <input type="number" name="space" id="redir" placeholder="e.g. '32'"/>
    <input type="submit" value="open" onclick="javascript:SubmitFrm()" class="radius button" style="font-family: Pacifico; font-size:2em">
</form>

Javascript:

function SubmitFrm(){
    console.log("function!")
    var space = document.getElementById("redir").value;
    console.log(space);
    window.location = "https://www.google.com/" + space; //for example.
}

Answer 1

尝试使用普通按钮而不是表单提交，因为表单提交实际上会重定向到给定的操作本身。在您被重定向到 "open" 操作之前，我不确定您的脚本代码是否已经完全处理。实际上，您甚至不需要常规表格。

编辑：您还可以将表单方法设置为 "get" 并在提交表单之前将操作修改为目的地。你可以为此给你的表单一个 id 并调用 formelement.submit()，因为在这种情况下，一个真正的提交按钮也可能是一个问题，一个普通的按钮可能会更好。

Answer 2

您可以在表单中使用onsubmit来取消重定向操作。

<form action="open" method="" onsubmit="SubmitFrm(); return false;">

在提交事件中返回 false 将取消默认操作，即重定向到表单的 action。如果您使用 onsubmit 事件，则无需再在提交按钮中放置 onclick 事件。

因此您可以将代码更改为

<form action="open" method="" onsubmit="SubmitFrm(); return false;">
    <input type="number" name="space" id="redir" placeholder="e.g. '32'"/>
    <input type="submit" value="open" class="radius button" style="font-family: Pacifico; font-size:2em">
</form>
<script type="text/javascript">
    function SubmitFrm(){
        console.log("function!")
        var space = document.getElementById("redir").value;
        console.log(space);
        window.location = "https://www.google.com/" + space; //for example.
    }
</script>

将浏览器重定向到表单输入。简单的JS

Redirect Browser to form input. Simple JS

javascript

html

url-redirection