如何使用<表单>标记将数据发送到javascript函数

How do I use the <form> tag to send data to a javascript function?

本文关键字：数据 javascript 函数 lt 何使用 表单 gt      更新时间：2023-09-26

我正在测试并试图制作一个小表单，当用户输入他们的名字时，它会使用这个名字并将其显示在屏幕上。

<html>
<head>
    <center><h1>Test-Page</h1></center>
</head>
<body>
    <div class="someRandomStuff">
    <h2 id="testingID">What is your first name?</h2>
    <form name="input" action="login.js" method="post">
        Name: <input type="text" name="userID"/>
        <input type="submit" value="Submit"/>
    </form>
    </div>
</body>

这是js文件

function displaySystem(name) {
    document.getElementById("testingID").innerHTML("Ah, hello there" + name)
}

我知道我可能可以在一个HTML文件中做到这一点，但我想尝试将js和HTML分开。感谢您的帮助。

您不向JavaScript函数发送数据，但JavaScript函数可以检索表单数据。

例如，类型为text的输入可以使用其value属性检索：

var input = document.getElementById("userID");
var value = input.value;

我知道我可能可以在一个HTML文件中完成这项工作，无论我想要什么尝试将js和HTML分离。

迈出了漂亮的一步。事实上，从内联脚本或使用<script src=...元素包含的脚本中检索表单数据或操作文档并没有实际区别。主要区别是嵌入HTML文档中的脚本不会被缓存，而作为单独文件包含的脚本会被缓存（显然，如果我们谈论良好的关注点分离，还有其他原因！）。

在文本框上使用onkeypress事件，并传递该事件以显示该值，并在函数中使用该参数以显示

   <div class="someRandomStuff">
        <h2 id="testingID">What is your first name?</h2>
        <form name="input" action="login.js" method="post">
            Name: <input type="text" name="userID" onkeypress="displaySystem(this)"/>
            <input type="submit" value="Submit"/>
        </form>
        </div>

//javascript函数

function displaySystem(name) {
    document.getElementById("testingID").innerHTML("Ah, hello there" + name.value)
}
相关文章：