当前位置： 文江博客话题详情

有没有办法在 HTML 表单中多次跨越 ID？

发布于 2025-01-11 08:44:02 字数 3938 浏览 0 评论 0原文

如果我没有使用正确的术语，请提前原谅，我对编程的理解非常基础。但本质上我正在尝试用 HTML 和 Javascript 编写一个程序，该程序将根据用户输入自动在表单中填充 ID。我的问题是，当我需要在多个位置打印 ID 时，我只能在表单中打印一次 ID。这是突出显示我的问题的代码片段：

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <script language="JavaScript">
        
    function showInput(){       
        document.getElementById('@userVLAN').innerHTML = document.getElementById("!userVLAN").value;
        document.getElementById('@voiceVLAN').innerHTML = document.getElementById("!voiceVLAN").value;
        document.getElementById('@mgmtVLAN').innerHTML = document.getElementById("!mgmtVLAN").value;
        document.getElementById('@printerVLAN').innerHTML = document.getElementById("!printerVLAN").value;
    }
    </script>
    
    <FONT FACE="COURIER NEW" SIZE="2">
    <body>
    <form>
    <TABLE><TR>
    <TD align="right" style="height:20px">VLAN TAGS:</TD>
    <TD><input style="font-family:Courier New; font-size:12px;width:100px;height:15px" type="text" name="!userVLAN" placeholder="USER_VLAN ID" id="!userVLAN" oninput="userVLANfunction()"></TD>
    <TD><input style="font-family:Courier New; font-size:12px;width:100px;height:15px" type="text" name="!voiceVLAN" placeholder="VOICE_VLAN ID" id="!voiceVLAN" oninput="voiceVLANfunction()"></TD>
    <TD><input style="font-family:Courier New; font-size:12px;width:100px;height:15px" type="text" name="!mgmtVLAN" placeholder="MANAGEMENT_VLAN ID" id="!mgmtVLAN" oninput="mgmtVLANfunction()"></TD>
    <TD><input style="font-family:Courier New; font-size:12px;width:100px;height:15px" type="text" name="!printerVLAN" placeholder="PRINTER_VLAN ID" id="!printerVLAN" oninput="printerVLANfunction()"></TD>
    </TABLE>
    </form>
    
    <script>
    function userVLANfunction() {var x = document.getElementById("!userVLAN").value;document.getElementById('@userVLAN').innerHTML = x;}
    function voiceVLANfunction() {var x = document.getElementById("!voiceVLAN").value;document.getElementById('@voiceVLAN').innerHTML = x;}
    function mgmtVLANfunction() {var x = document.getElementById("!mgmtVLAN").value;document.getElementById('@mgmtVLAN').innerHTML = x;}
    function printerVLANfunction() {var x = document.getElementById("!printerVLAN").value;document.getElementById('@printerVLAN').innerHTML = x;}
    </script>
    
    vlan <span id='@userVLAN' style="background-color: #00FF00"></span><BR>
    name USER_VLAN<BR>
    vlan <span id='@voiceVLAN' style="background-color: #00FF00"></span><BR>
    name VOICE_VLANx<BR>
    vlan <span id='@mgmtVLAN' style="background-color: #00FF00"></span><BR>
    name MANAGEMENT_VLAN<BR>
    vlan <span id='@printerVLAN' style="background-color: #00FF00"></span><BR>
    name PRINTER_VLAN<BR>
    
    ip dhcp snooping vlan <span id='@userVLAN' style="background-color: #00FF00"></span>,<span id='@voiceVLAN' style="background-color: #00FF00"></span>,<span id='@mgmtVLAN' style="background-color: #00FF00"></span>,<span id='@printerVLAN' style="background-color: #00FF00"></span><BR>
    
    ip arp inspection vlan <span id='@userVLAN' style="background-color: #00FF00"></span>,<span id='@voiceVLAN' style="background-color: #00FF00"></span>,<span id='@mgmtVLAN' style="background-color: #00FF00"></span>,<span id='@printerVLAN' style="background-color: #00FF00"></span><BR>
    
    </FONT>
    </body>
</html>

因此，当用户在文本框中输入 ID 时，它会填充 VLAN，但不会填充 dhcp 监听或 arp 检查。当前的解决方法是让用户将 VLAN 输入到多个文本框中，并为每个条目创建多个实例，但我更希望用户只需键入一次。谢谢。

原文

Excuse me in advance if I am not using correct terminology, my understanding of programming is very basic. But essentially I am trying to write a program in HTML and Javascript that will automatically fill IDs in a form based on user input. My problem is that I can only print the ID once in the form, when I need it to print in multiple locations. Here is a snippet of the code that highlights my issue:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <script language="JavaScript">
        
    function showInput(){       
        document.getElementById('@userVLAN').innerHTML = document.getElementById("!userVLAN").value;
        document.getElementById('@voiceVLAN').innerHTML = document.getElementById("!voiceVLAN").value;
        document.getElementById('@mgmtVLAN').innerHTML = document.getElementById("!mgmtVLAN").value;
        document.getElementById('@printerVLAN').innerHTML = document.getElementById("!printerVLAN").value;
    }
    </script>
    
    <FONT FACE="COURIER NEW" SIZE="2">
    <body>
    <form>
    <TABLE><TR>
    <TD align="right" style="height:20px">VLAN TAGS:</TD>
    <TD><input style="font-family:Courier New; font-size:12px;width:100px;height:15px" type="text" name="!userVLAN" placeholder="USER_VLAN ID" id="!userVLAN" oninput="userVLANfunction()"></TD>
    <TD><input style="font-family:Courier New; font-size:12px;width:100px;height:15px" type="text" name="!voiceVLAN" placeholder="VOICE_VLAN ID" id="!voiceVLAN" oninput="voiceVLANfunction()"></TD>
    <TD><input style="font-family:Courier New; font-size:12px;width:100px;height:15px" type="text" name="!mgmtVLAN" placeholder="MANAGEMENT_VLAN ID" id="!mgmtVLAN" oninput="mgmtVLANfunction()"></TD>
    <TD><input style="font-family:Courier New; font-size:12px;width:100px;height:15px" type="text" name="!printerVLAN" placeholder="PRINTER_VLAN ID" id="!printerVLAN" oninput="printerVLANfunction()"></TD>
    </TABLE>
    </form>
    
    <script>
    function userVLANfunction() {var x = document.getElementById("!userVLAN").value;document.getElementById('@userVLAN').innerHTML = x;}
    function voiceVLANfunction() {var x = document.getElementById("!voiceVLAN").value;document.getElementById('@voiceVLAN').innerHTML = x;}
    function mgmtVLANfunction() {var x = document.getElementById("!mgmtVLAN").value;document.getElementById('@mgmtVLAN').innerHTML = x;}
    function printerVLANfunction() {var x = document.getElementById("!printerVLAN").value;document.getElementById('@printerVLAN').innerHTML = x;}
    </script>
    
    vlan <span id='@userVLAN' style="background-color: #00FF00"></span><BR>
    name USER_VLAN<BR>
    vlan <span id='@voiceVLAN' style="background-color: #00FF00"></span><BR>
    name VOICE_VLANx<BR>
    vlan <span id='@mgmtVLAN' style="background-color: #00FF00"></span><BR>
    name MANAGEMENT_VLAN<BR>
    vlan <span id='@printerVLAN' style="background-color: #00FF00"></span><BR>
    name PRINTER_VLAN<BR>
    
    ip dhcp snooping vlan <span id='@userVLAN' style="background-color: #00FF00"></span>,<span id='@voiceVLAN' style="background-color: #00FF00"></span>,<span id='@mgmtVLAN' style="background-color: #00FF00"></span>,<span id='@printerVLAN' style="background-color: #00FF00"></span><BR>
    
    ip arp inspection vlan <span id='@userVLAN' style="background-color: #00FF00"></span>,<span id='@voiceVLAN' style="background-color: #00FF00"></span>,<span id='@mgmtVLAN' style="background-color: #00FF00"></span>,<span id='@printerVLAN' style="background-color: #00FF00"></span><BR>
    
    </FONT>
    </body>
</html>

So when the user enters the IDs into the textbox it fills the vlan but not the dhcp snooping or arp inspection. The currently workaround is to have the user enter the vlans into multiple textboxes and creating severally instances of every entry, but I would prefer to have the user only have to type it once. Thank you.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

叫思念不要吵 2025-01-18 08:44:02

您可以使用 html class 因为 html id 必须是唯一的。

然后您可以使用 for 来迭代它们。

为了使事情变得更简单，您可以使用 querySelector() 和 querySelectorAll() 按 ID 或类过滤 DOM 元素。

var x = document.querySelector("#yourid"); // filtering by ID
var x = document.querySelector(".yourclass"); // filtering by class (only first one is selected)
var arr = document.querySelector(".yourclass"); // filtering by class (all element of such class)

这是根据您的代码片段编辑的示例：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
    
function showInput(){       
    var elements = document.querySelectorAll(".show");
    for(var i=0; i<elements.length; i++) {
        elements[i].innerHTML = document.querySelector(".yourinput").value;
    }
}
</script>

<FONT FACE="COURIER NEW" SIZE="2">
<body>
<form>
<TABLE><TR>
<TD align="right" style="height:20px">VLAN TAGS:</TD>
<TD><input style="font-family:Courier New; font-size:12px;width:100px;height:15px" type="text" name="!userVLAN" placeholder="USER_VLAN ID" class='yourinput' oninput="showInput()"></TD>

</TABLE>
</form>

input: <span class='show' style="background-color: #00FF00"></span><BR>

ip dhcp snooping vlan 
<span class='show' style="background-color: #00FF00"></span>,
<span class='show' style="background-color: #00FF00"></span>,
<span class='show' style="background-color: #00FF00"></span>,
<span class='show' style="background-color: #00FF00"></span><BR>

ip arp inspection vlan 
<span class='show' style="background-color: #00FF00"></span>,
<span class='show' style="background-color: #00FF00"></span>,
<span class='show' style="background-color: #00FF00"></span>,
<span class='show' style="background-color: #00FF00"></span><BR>

</FONT>
</body>
</html>

You can use html class since html id must be unique.

Then you can use for to iterate through them.

To make things easier, you can use querySelector() and querySelectorAll() to filter DOM element by their ID or class.

var x = document.querySelector("#yourid"); // filtering by ID
var x = document.querySelector(".yourclass"); // filtering by class (only first one is selected)
var arr = document.querySelector(".yourclass"); // filtering by class (all element of such class)

Here's an example edited from your code snippet:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
    
function showInput(){       
    var elements = document.querySelectorAll(".show");
    for(var i=0; i<elements.length; i++) {
        elements[i].innerHTML = document.querySelector(".yourinput").value;
    }
}
</script>

<FONT FACE="COURIER NEW" SIZE="2">
<body>
<form>
<TABLE><TR>
<TD align="right" style="height:20px">VLAN TAGS:</TD>
<TD><input style="font-family:Courier New; font-size:12px;width:100px;height:15px" type="text" name="!userVLAN" placeholder="USER_VLAN ID" class='yourinput' oninput="showInput()"></TD>

</TABLE>
</form>

input: <span class='show' style="background-color: #00FF00"></span><BR>

ip dhcp snooping vlan 
<span class='show' style="background-color: #00FF00"></span>,
<span class='show' style="background-color: #00FF00"></span>,
<span class='show' style="background-color: #00FF00"></span>,
<span class='show' style="background-color: #00FF00"></span><BR>

ip arp inspection vlan 
<span class='show' style="background-color: #00FF00"></span>,
<span class='show' style="background-color: #00FF00"></span>,
<span class='show' style="background-color: #00FF00"></span>,
<span class='show' style="background-color: #00FF00"></span><BR>

</FONT>
</body>
</html>

回复 原文
~没有更多了~

关于作者

花辞树

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文