时间戳

首页 > 解决方案 > 我的表单根据用户输入重定向到特定 URL 时遇到问题

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

问题描述

我有一个表单，我试图根据文本字段中的输入将用户重定向到不同的 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>

标签： javascripthtml

解决方案

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

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

还需要toLowercase()

推荐阅读