我的表单根据用户输入重定向到特定 URL 时遇到问题答案

【问题标题】：I am having trouble with my form redirecting to a specific URL based on user input我的表单根据用户输入重定向到特定 URL 时遇到问题
【发布时间】：2020-02-02 09:32:19
【问题描述】：

我有一个表单，我试图根据文本字段中的输入将用户重定向到不同的 URL。因此，如果他们输入“string1”，它会将他们重定向到“./string1.html”，如果他们输入“string2”，它将重定向到“./string2.html”，如果他们输入“string3”，它将重定向到“ ./string3.html"

当我单击“提交表单”按钮时，它会将我带到“./default.html”页面，而不是使用表单输入的相应页面。

代码如下：

<!DOCTYPE html>
<html>

<head>
    <title>redirect</title>
    <meta content="noindex, nofollow" name="robots">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='redirect_form.css' rel='stylesheet' type='text/css'>
    <!--== Include CSS File Here ==-->

    <script type="text/javascript" src="validate.js"></script>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <div class="main">
        <div class="first">
            <center><img src="hrhclogo.png" alt="Har"></center>
            <br>
            <form class="form-inline">
                <div class="form-group">
                    <input type="text">
                    <button id="submit-form" type="button">Go!</button>
                </div>
            </form>
            <script type="text/javascript">
                var urlMapping = {
                    "fiftytwenty": "https://www.google.com",
                    "fiftysixty": "https://www.yahoo.com",
                    "fiftyeighty": "https://www.gmail.com"
                }

                $("#submit-form").click(function () {
                    var input = $("input").val().trim();
                    if (urlMapping.hasOwnProperty(input)) {
                        window.location = urlMapping[input];
                    } else {
                        //if url not found, redirect to default url
                        window.location = "./default.html";
                    }
                });
            </script>

        </div>
        <!---- Including PHP File Here ---->
        <?php
            include "insert.php";
            include "autoload.php";
        ?>
    </div>
</body>

</html>

【问题讨论】：

为什么是toUpperCase()？你应该使用toLowerCase()。
我改了，还是一样的问题。

标签： javascript html

【解决方案1】：

您必须在此文件中包含 JQuery。

<script
  src="http://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

也需要toLowercase()

【讨论】：

我在文件中有 JQuery，我只是没有将它包含在代码 sn-p 中。我的错。我把它改成了“toLowerCase()”，还是一样的问题。
它在我的电脑上运行良好。你能清楚实际的错误是什么吗？

【解决方案2】：

只需删除.toUpperCase() 调用

var urlMapping = {
    "string1" : "./string1.html",
    "string2" : "./string2.html",
    "string3" : "./string3.html"
}

$("#submit-form").click(function(){
    var input = $("input").val().trim();
    if (urlMapping.hasOwnProperty(input)){
        console.log('IN REDIRECT');
        window.location = urlMapping[input];
    }
    else {
        //if url not found, redirect to default url
        window.location = "./default.html";
    }
});

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<form class="form-inline">
    <div class="form-group" />
         <input type="text" />
<button id="submit-form" type="button">Go!</button>
</form>

【讨论】：

我删除了“toUpperCase”调用，但还是一样。
我的 sn-p 工作正常，在这里它重定向到输入，你能添加一个完整的例子来看看是否缺少什么吗？
我在下面的答案中发布了它。不知道这是否是我应该添加它的方式。但是，是的。顺便谢谢你的帮助。并原谅凌乱的代码。

【解决方案3】：

我在 Codepen 上尝试了您的 sn-ps，我唯一更改的是 toLowerCase() 并删除了 <div> 没有关闭 </div> 标记。它按预期运行。那么也许还有其他一些代码会影响此代码？

Check the snippets here

单击按钮时检查控制台以查看输入值。

【讨论】：