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> </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:-
