Javascript 如何从文本框和其他 html 元素值中获取值到标签中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7963283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get values from textbox and other html elements values into label?
提问by Debugmode
Hi i have a form in my application where user can put their details. My form portion looks like this,
嗨，我的应用程序中有一个表单，用户可以在其中放置他们的详细信息。我的表格部分看起来像这样，
in this when user click on add school hyperlink, i want all values appended into label like,
在此当用户单击添加学校超链接时，我希望将所有值附加到标签中，例如，
School: 12th
学校：第12
School Name: St. Xavier's
学校名称：St. Xavier's
School Location: Banglore
学校地点：班加罗尔
Class Year: 2010
上课年份：2010
Branch: Science
分支：科学
This should be appended any no of time when user click on add school hyperlink.
当用户点击添加学校超链接时，这应该被附加到任何时间。
How can i do that using javascript/ jquery?
我如何使用 javascript/jquery 做到这一点？
回答by xbonez
The values in the text boxes can be accessed by document.getElementById('id').value
可以通过以下方式访问文本框中的值 document.getElementById('id').value
The remaining should be easy for you to figure out.
剩下的应该很容易让你弄清楚。
Here's how you could do it not using JQuery:
以下是不使用 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>
Add a spanor div with the id resultwherever you want the result to show.
Expand on the code above to display the other fields as well.
在您希望结果显示的任何位置添加span带有 id的或 div result。展开上面的代码以显示其他字段。
have a look at this: http://jsfiddle.net/GQdsD/
看看这个：http: //jsfiddle.net/GQdsD/
innerHTMLoverwrites what was held in the HTML container before. You can do this:
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;
OR, collect the values in a JS var and then write it to the HTML container:
或者，收集 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;
To allow multiple adds, change this line in your code:
要允许多次添加，请更改代码中的这一行：
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;
To this, so it adds the new information to the old information:
为此，它将新信息添加到旧信息中：
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;
回答by Sedat Ba?ar
You can add function to button and get values like...
您可以向按钮添加功能并获得诸如...
$('.profileupdateBod').click(function(){
$('#yourContainer').append('<div>School : '+$('select[name=schooldivision]').val()+'</div><div>School Name : '+$('#sch1').val().trim()+'</div>')
})
Also check jquery selectors http://api.jquery.com/category/selectors/
还要检查 jquery 选择器http://api.jquery.com/category/selectors/
回答by Mr.T.K
For Select Box:
对于选择框：
$('#select_box_id option:selected').text();
For Text Box:
对于文本框：
$('#text_box_id').val();
