Question

您好我的应用程序中有一个表单，用户可以在其中输入详细信息。我的表单部分看起来像这样，

http://jsfiddle.net/2MSXP/

当用户点击添加学校超链接时，我希望所有值都附加到标签中，如

学校：12日

学校名称：St. Xavier's

学校位置：Banglore

课程年份：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>

在您希望显示结果的位置添加span或ID为result的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;

OR，收集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;

Answer 2

您可以向按钮添加功能并获取类似...的值

$('.profileupdateBod').click(function(){
    $('#yourContainer').append('<div>School : '+$('select[name=schooldivision]').val()+'</div><div>School Name : '+$('#sch1').val().trim()+'</div>')
})

同时检查jquery选择器http://api.jquery.com/category/selectors/

Answer 3

对于选择框：

$('#select_box_id option:selected').text();

对于文本框：

$('#text_box_id').val();

如何将文本框和其他html元素值中的值添加到标签中？

3 个答案: