Question

Hi i have a form in my application where user can put their details. My form portion looks like this,

http://jsfiddle.net/2MSXP/

in this when user click on add school hyperlink, i want all values appended into label like,

School: 12th

School Name: St. Xavier’s

School Location: Banglore

Class Year: 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?

Answer 1

The values in the text boxes can be accessed by document.getElementById('id').value

The remaining should be easy for you to figure out.

Here’s how you could do it not using 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 span or div with the id result wherever you want the result to show.
Expand on the code above to display the other fields as well.

have a look at this:
http://jsfiddle.net/GQdsD/

innerHTML overwrites what was held in the HTML container before. You can do this:

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:

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;