Home Html How to display user entered information using HTML and JavaScript
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

How to display user entered information using HTML and JavaScript

Advertisement
We are going to describe How to display user entered information using HTML and JavaScript. First of all we have created HTML form with two text fields "FirstNames" and "LastName". A submit button is created that will be used to submit the information entered in first two text fields.

How to display user entered information using HTML and JavaScript.

We are going to describe How to display user entered information using HTML and JavaScript. First of all we have created HTML form with two text fields "FirstNames" and "LastName". A submit button is created that will be used to submit the information entered in first two text fields. We have used javaScript and document.getElementById("displayarea") method to get id. The id given to an HTML input helps in accessing the entered information in that field very quickly. It checks the text entered in the text field, gets the value and displays it.

Syntax:-

element = document.getElementById(id);

Example:-

<html>
<head>
<script>
function display()
{
document.getElementById("displayarea").innerHTML = document.getElementById("fname").value; 
document.getElementById("fname").value = "";
document.getElementById("displayarea1").innerHTML = document.getElementById("lname").value; 
document.getElementById("lname").value = "";

}
</script>
</head>

<body>
<table bgcolor="#FF00FF" border="1" align="center">
<tr>
<td>FirstNames</td>
<td><input type="text" name="fname" id="fname"></td>
</tr>
<tr>
<td>LastName</td>
<td><input type="text" name=lname" id="lname"></td>
</tr>

<tr>
<td>&nbsp</td>
<td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display()"/></td>
</tr>
</table>
<table width="400px" align="center" border=0> 

<tr style="background-color:#8FBC8F;">
<td align="center"><b>Fast Name</b></td>
<td align="center"><b>Last Name</b></td>
</tr> 
<tr>
<td align="center"><div id="displayarea"></div></td>
<td align="center"><div id="displayarea1"></div></td>
</tr>
</table>
</body>
</html>

output:-

Download Source Code

Advertisements

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: July 16, 2013

Ask Questions?    Discuss: How to display user entered information using HTML and JavaScript  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com