用存储的变量连接多个HTML文本输入 [英] Concatenate multiple HTML text inputs with stored variable
问题描述
我试图创建一个简单的html表单，要求用户提供一些细节，一旦提交，将文本添加到文本框中的某些预定文本。
示例...
文本框1 - 输入名称
文本框2 - 输入年龄
文本框3 - 输入位置
当提交这个文件时，我希望将它最好添加到文本框中，或者甚至只是在html页面上输出文本，其他文本已经存储，因此输出可能会像你好约翰，你25岁，来自伦敦。
我有很基本的东西：
< html>
< form>
名称：< input type =textname =name>< br>
年龄：< input type =textname =age>< br>
位置：< input type =textname =location>< br>
< input type =submitvalue =提交>
< / form>
< html>
除此之外，我不确定如何使用其他预定义文本将所有值存入另一个文本框。
任何帮助或方向在这将不胜感激。
这是一个解决方案，因此使用 document.getElementById（）获取元素，将事件处理程序附加到单击使用 element.onclick = function（）{} 和 alert（）来显示消息框。 >
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 +
'，你是'+ age.value +
'年龄和从'+ location.value;
alert（str）;
};
HTML
<标签>
输入名称：
< input id =name/>
< / label>
< br />
< label>
输入年龄：
< input id =age/>
< / label>
< br />
< label>
输入位置：
< input id =location/>
< / label>
< br />
< button id =test>测试< /按钮>
编辑
输出到页面使用 element.innerHTML 设置元素的内容。 jsFiddle
output.innerHTML = str;
I am trying to create a simple html form which asks for some details from a user and once this has been submitted will add the text to some predetermined text in a text box.
Example of this...
Text box 1 - Enter Name Text box 2 - Enter Age Text box 3 - Enter Location
When this is submitted I would like this to be added preferably into a text box or even just output has text on an html page with other text already stored so the output would maybe be something like "Hello John, you are 25 years old and from London".
What I have is very basic:
<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>
Beyond this I'm unsure how to get all the values into another text box with the other predetermined text.
Any help or direction in this would be appreciated.
Here is a solution, so get the elements using document.getElementById(), attach an event handler to the click event using element.onclick = function () {} and alert() to show a message box.
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>
Edit
To output it to the page use element.innerHTML to set the contents of an element.
output.innerHTML = str;
这篇关于用存储的变量连接多个HTML文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
