Now i will show you how to display form field validation before form submission. This is one of the simple concept and also useful one for our projects. This concept will done by using the JavaScript and Jquery.
In this example form i am used two different form field one is firstname and another one is give your location. when you enter the location it shows your entered firstname value before the label. In this example haves the demo page. Check out the demo page you will get to know the result of this concept. you also download the script from download page below. I hope this example is really helpful.
<!DOCTYPE html>
<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>
<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>
0 Comments