Online Training Spring Hibernate Training in Delhi R Programming Training Course Big Data and Hadoop Training Java Training

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.

Ads

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

Share on Google+Share on Google+

How to display user entered information using HTML and JavaScript

Posted on: July 16, 2013 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Advertisements

 

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

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0

Ads

 

Ads