这段代码运行得很好,但我已经为名称和ID添加了两个不同的搜索框,可以根据输入的数据类型有一个搜索框重定向吗?

<html>
    <head>
        <style>
            body {
                background-color: yellow;
                text-align: center;
                font-family: 'Amatic SC', cursive;
                font-size: 24px;
                margin-left: 150px;
                margin-right: 150px;
            }
            h1 {
                font-size: 60px;
            }
            p {
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <h1>Welcome to Employee Database!</h1>
        <p>View <a href="http://localhost:8080/tyrrest/employees">Employee List</a>.</p>
        <p style="font-size: 20px;">Search Employee by ID</p>
        <form>
            <input id="id-input-text" type="text">
            <input class="thmas-button" type="button" value="Search" data-search-type="id">
        </form>
        <p style="font-size: 20px;">Search Employee by Name</p>
        <form>
            <input id="name-input-text" type="text">
            <input class="thmas-button" type="button" value="Search" data-search-type="name">
        </form>
        <p style="font-size:12px;"><br><br><br><br><br><br><a href="http://localhost:8080/tyrrest/employees?fields=name">Employee Name List</a></p>
        <p style="font-size:12px;"><a href="http://localhost:8080/tyrrest/employees?fields=id">Employee Id List</a></p>
        <script type="text/javascript">
            const thmasButtons = document.querySelectorAll('.thmas-button');
            thmasButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const searchType = button.getAttribute('data-search-type');
                    const inputValue = document.querySelector(`#${searchType}-input-text`).value;
                    const URL = `http://localhost:8080/tyrrest/employees?${searchType}=${inputValue}`;
                    const win = window.open(URL, '_blank');
                });
            });
        </script>
    </body>
</html>

如何根据数据类型进行?

推荐答案

您可以像这样判断JS中的输入类型: Number.isFinite(Number(inputValue))

基本上,我们将inputValue转换为number并判断它是否不是NaN(是的,因为JS NaN类型是一个number:)

带着这样的东西:const searchType = Number.isFinite(Number(inputValue)) ? 'id' : 'name';

  1. 键入‘abc’将重定向到employees?name=abc
  2. 键入‘123’将重定向到employees?id=123

您的body转换为1搜索框:

    <body>
        <h1>Welcome to Employee Database!</h1>
        <p>View <a href="http://localhost:8080/tyrrest/employees">Employee List</a>.</p>
        <p style="font-size: 20px;">Search Employee</p>
        <form>
            <input id="input-text" type="text">
            <input class="thmas-button" type="button" value="Search">
        </form>
        <p style="font-size:12px;"><br><br><br><br><br><br><a href="http://localhost:8080/tyrrest/employees?fields=name">Employee Name List</a></p>
        <p style="font-size:12px;"><a href="http://localhost:8080/tyrrest/employees?fields=id">Employee Id List</a></p>
        <script type="text/javascript">
            const thmasButtons = document.querySelectorAll('.thmas-button');
            thmasButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const inputValue = document.querySelector(`#input-text`).value;
                    const searchType = Number.isFinite(Number(inputValue)) ? 'id' : 'name';
                    const URL = `http://localhost:8080/tyrrest/employees?${searchType}=${inputValue}`;
                    const win = window.open(URL, '_blank');
                });
            });
        </script>
    </body>

Html相关问答推荐

弹性项在主轴方向溢出

将弹性容器设置为内容宽度

在iOS中调整HTML邮箱内容的大小

Div中的图像问题-(TailWind CSS中的网格)

在WooCommerce单一产品页面上使产品图片库粘滞(固定)

如何在R中渲染Quarto文档时动态设置html文件名

使用CSS Flexbox时,我的图像未对齐

创建特定的CSS网格布局

禁用所有行,但在16角中单击编辑按钮的行除外

为什么一个 CSS 网格框比其他网格框低?

如何在 Bootstrap 5 中将两个导航栏元素放在末尾?

Swift WKUserContentController 和 WKScriptMessageHandler 设置不正确

使用shinyjqui拖放到网格表中

如何用js和CSS在两点之间画一条线

一旦大于最大限制,JQuery 取消 Select 复选框

CSS 网格跨度行到所有行

我正在使用 NVDA 并多次读取关闭按钮,但它的读取非常完美

如何截断一些文本并用双引号引起来?

是否可以将文本添加到表格边框?

无法使用 flexbox 裁剪图像