2

我正在尝试创建一个简单的 html 表单，它要求用户提供一些详细信息，一旦提交，就会将文本添加到文本框中的某些预定文本中。

这个例子...

文本框 1 - 输入姓名 文本框 2 - 输入年龄 文本框 3 - 输入位置

提交时，我希望最好将其添加到文本框中，或者甚至只是输出在 html 页面上有文本，并且已经存储了其他文本，因此输出可能类似于“你好约翰，你 25 岁，从伦敦”。

我所拥有的是非常基本的：

    <html>
    <form>
    Name: <input type="text" name="name"><br>
    Age: <input type="text" name="age"><br>
    Location: <input type="text" name="location"><br>
    <input type="submit" value="Submit">
    </form>
    <html>

除此之外，我不确定如何将所有值与其他预定文本一起放入另一个文本框中。

对此的任何帮助或指导将不胜感激。

4

2 回答 2

4

这是一个解决方案，因此使用 获取元素document.getElementById()，使用 将事件处理程序附加到click事件element.onclick = function () {}并alert()显示消息框。

jsFiddle

JavaScript

var button = document.getElementById('test');
var name = document.getElementById('name');
var age = document.getElementById('age');
var location = document.getElementById('location');

button.onclick = function () {
    var str = 'Hello ' + name.value + 
        ', you are ' + age.value +
        ' years old and from ' + location.value;
    alert(str);
};

HTML

<label>
    Enter name: 
    <input id="name" />
</label>
<br />
<label>
    Enter age: 
    <input id="age" />
</label>
<br />
<label>
    Enter location: 
    <input id="location" />
</label>
<br />
<button id="test">Test</button>

编辑

要将其输出到页面，请使用element.innerHTML设置元素的内容。

jsFiddle

output.innerHTML = str;
于 2013-03-31T15:34:20.257 回答
0 

function yes() {
var button = document.getElementById('test');
var name = document.getElementById('name');
var age = document.getElementById('age');
var location = document.getElementById('location');
    var str = 'Hello ' + name.value + 
        ', you are ' + age.value +
        ' years old and from ' + location.value;
    document.getElementById('test').innerHTML=str;
};
<html>
<body>
<label>
    Enter name: 
    <input id="name" />
</label>
<br />
<label>
    Enter age: 
    <input id="age" />
</label>
<br />
<label>
    Enter location: 
    <input id="location" />
</label>
<br />
<button onclick="yes()">Test</button>
<p id="test"></p>
</body>
</html>

于 2019-05-28T11:39:43.123 回答