我该如何使用 <form> 标签将数据发送到javascript函数？

Question

我正在测试，并尝试制作一个小的表格，以便当用户输入他们的姓名时，它将使用该姓名并将其显示在屏幕上。

<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分开。 任何帮助表示赞赏。

Answer 1

您无需将数据发送到JavaScript函数，但是JavaScript函数可以检索表单数据。

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

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

我知道我可以在一个HTML文件中执行此操作，但是我想尝试将js和HTML分开。

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

Answer 2

在文本框上使用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)
}

我该如何使用 <form> 标签将数据发送到javascript函数？

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-11-08 11:33:57

解决方案2
0 2015-11-16 11:08:06

我该如何使用 <form> 标签将数据发送到javascript函数？

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-11-08 11:33:57

解决方案2 0 2015-11-16 11:08:06

解决方案1
0 已采纳 2014-11-08 11:33:57

解决方案2
0 2015-11-16 11:08:06