代码之家 › 专栏 › 技术社区 › drmscp

将多个HTML文本输入与存储的变量连接起来

string-concatenation forms html

drmscp · 技术社区 · 13 年前

我正在尝试创建一个简单的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>

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

如有任何帮助或指导,我们将不胜感激。

2 回复 | 直到 13 年前

Daniel Imms 13 年前

这里有一个解决方案,所以使用 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;

Sharp Mouse 7 年前

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>