<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<title>Display Form Field data before Form submit</title>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(window).load(function(){
$( “input” )
.keyup(function() {
var value = $( this ).val(),
dataViewId = $( this ).data( “view-id” ); // get your data-attribute value
// use this value as a selector:
$( dataViewId ).text( value );
})
.keyup();
});
</script>
<style>
.swc
{
height:35px;
border:1px solid green;
}
</style>
</head>
<body>
<h2 style=”text-align:center;”>Display Form Field data before Form submit</h2>
<table style=”width:480px; margin:0 auto;”>
<tr>
<td>First Name:</td>
<td><input type=”text” data-view-id=”#firstname” class=”swc”/></td>
</tr>
<tr>
<td>Hello <span id=”firstname”> </span> <span id=”lastname”> </span> Give your Location:</td>
<td> <input type=”text” data-view-id=”#location” class=”swc” /></td>
</tr>
<br/><br/>
<h3><a href=”http://www.sanwebcorner.com/”>www.sanwebcorner.com </a></h3>
</body>
</html>
