javascript - 如何将文本框和其他 html 元素值获取到标签中？

Question

您好，我的应用程序中有一个表单，用户可以在其中输入他们的详细信息。我的表单部分如下所示，

http://jsfiddle.net/2MSXP/

在此，当用户单击“添加学校”超链接时，我希望将所有值附加到标签中，例如，

学校:12

学校名称:圣泽维尔学院

学校地点:类加罗尔

类(class)年份:2010

分支:科学

当用户单击“添加学校”超链接时，应随时附加此内容。

如何使用 javascript/jquery 做到这一点？

Answer 1

文本框中的值可以通过document.getElementById('id').value访问

剩下的应该很容易弄清楚。

以下是不使用 JQuery 的方法:

    <a href="javascript:show()">Add School</a>
    <script type="text/javascript">
        function show()
        {
            document.getElementById('result').innerHTML = "School Name: " + document.getElementById('sch1').value; 
        }
    </script>

在您想要显示结果的任意位置添加一个带有 id result 的 span 或 div。展开上面的代码以显示其他字段。

看看这个: http://jsfiddle.net/GQdsD/

innerHTML 覆盖 HTML 容器中之前保存的内容。你可以这样做:

document.getElementById('result').innerHTML = "School Name: " +
document.getElementById('sch1').value + "<br/>Location: " + 
document.getElementById('schloc1').value + "<br/>Year: " + 
document.getElementById('schoolyear').value + "<br/>Branch: " + 
document.getElementById('branch1').value;

或者，收集 JS var 中的值，然后将其写入 HTML 容器:

var result = "School Name: " + document.getElementById('sch1').value + 
"<br/>Location: " + document.getElementById('schloc1').value + 
"<br/>Year: " + document.getElementById('schoolyear').value + 
"<br/>Branch: " + document.getElementById('branch1').value;

document.getElementById('result').innerHTML = result;

要允许多次添加，请更改代码中的这一行:

var result = "School: " + document.getElementById('schools').value + "<br/>School Name: " + document.getElementById('sch1').value + "<br/>Location: " + document.getElementById('schloc1').value + "<br/>Year: " + document.getElementById('schoolyear').value + "<br/>Branch: " + document.getElementById('branch1').value; 
            document.getElementById('result').innerHTML = result;

为此，它将新信息添加到旧信息中:

var result = document.getElementById('result').innerHTML + "<br/>School: " + document.getElementById('schools').value + "<br/>School Name: " + document.getElementById('sch1').value + "<br/>Location: " + document.getElementById('schloc1').value + "<br/>Year: " + document.getElementById('schoolyear').value + "<br/>Branch: " + document.getElementById('branch1').value; 
            document.getElementById('result').innerHTML = result;