Java Script

[anupama385]

I have a HTML form and I would like to display the values in the form on the same page below the form itself .
My question is how can I display the values entered in the form above .I would like to use a javascript.

Please help.....

[Luckychap]

0. Create a container html element like <div id="content"></div>
1. Get the form element. There are many ways, please refer
2. With form element get input elements
3. With input elements get there values and show them on some container element

Hope I have help you

[anupama385]

Thanks for the reply....I am not clear with the 3rd point...can you tell me how to do it? I have done 0,1,2....

[Luckychap]

Ok let say you have input fields named as 'firstname', 'lastname' and 'age'.
Now as you said you have form element, lets call it 'formEl'. Then you can get values of above input fields values in following way:-

var fName = formEl.firstName.value;
var lName = formEl.lastName.value;
var age = formEl.age.value;

Now as all the values are captured you can show it in container element the we have created in step 0.

<form id="myForm">
        <input type="text" name="firstname"/>
        <input type="text" name="lastname"/>
        <input type="text" name="age"/>

        <input type="button" onclick="showValues();" value="Show values"/>
    </form>
    <div id="container">Form values will be shown here...</div>
   
   <script type="text/javascript">
        function showValues() {
            var formEl = document.getElementById("myForm"); // Get Form element
            var container = document.getElementById("container"); // Get Container element
            // Now get form inputs value
            var fName = formEl.firstName.value;
            var lName = formEl.lastName.value;
            var age = formEl.age.value;
            
            // Now create a string with form inputs value
            var str = "";
            str += "First Name : " + fName + "\n";
            str += "Last Name : " + lName + "\n";
            str += "Age : " + age + "\n";
            
            // Now show above string in the container 
            container.innerHTML = str;
        }
   
    </script>

This is a complete example. If you find any bug then resolve them.

[anupama385]

Ok let say you have input fields named as 'firstname', 'lastname' and 'age'.
Now as you said you have form element, lets call it 'formEl'. Then you can get values of above input fields values in following way:-

var fName = formEl.firstName.value;
var lName = formEl.lastName.value;
var age = formEl.age.value;

Now as all the values are captured you can show it in container element the we have created in step 0.

<form id="myForm">
        <input type="text" name="firstname"/>
        <input type="text" name="lastname"/>
        <input type="text" name="age"/>

        <input type="button" onclick="showValues();" value="Show values"/>
    </form>
    <div id="container">Form values will be shown here...</div>
   
   <script type="text/javascript">
        function showValues() {
            var formEl = document.getElementById("myForm"); // Get Form element
            var container = document.getElementById("container"); // Get Container element
            // Now get form inputs value
            var fName = formEl.firstName.value;
            var lName = formEl.lastName.value;
            var age = formEl.age.value;
            
            // Now create a string with form inputs value
            var str = "";
            str += "First Name : " + fName + "\n";
            str += "Last Name : " + lName + "\n";
            str += "Age : " + age + "\n";
            
            // Now show above string in the container 
            container.innerHTML = str;
        }
   
    </script>

This is a complete example. If you find any bug then resolve them.

-----------------

Thanks for the example...but now my add button is not displaying anything on the user interface :( can you help?

[anupama385]

-----------------

Thanks for the example...but now my add button is not displaying anything on the user interface :( can you help?

-----------------------------

This is the html pgm I am using:
------
<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript">
function display() {
//DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
message = "<ULul><LIli><b>NAME: </b>" + document.form1.yourname.value;
message += "<LIli><b>ADDRESS: </b>" + document.form1.address.value;
message += "<LIli><b>PHONE: </b>" + document.form1.phone.value + "</ULul>";
document.write(message);
}
</script>
</head>
<body>
<h1>Form Example</h1>
Enter the following information.
<form name="form1">
<p><b>Name:</b> <input TYPE="TEXT" LENGTH="20" NAME="yourname">
<P/p>
<p><b>Address:</b> <input TYPE="TEXT" LENGTH="30" NAME="address">

</pP>
<p><b>Phone: </b> <input TYPE="TEXT" LENGTH="15" NAME="phone">
</pP>
<p><input TYPE="BUTTON" VALUE="Display" onClick="display();"></p>
</form>
</body>
</html>
----------

When I am pressing display button the values are displayed in another screen....instead I wnat the values to be displayed in the form itself(below the boxes).....