form.html
<!doctype>
<html>
<head>
<title>Live Preview In Jquery</title>
<style>
body{
font-family:tahoma,arial;
font-size:16px;
}
.total{
width:800px;
margin:20px auto;
border:1px solid green;
}
.left{
margin-left:5px;
padding-left:5px;
float:left;
width:370px;
border:1px solid red;
}
.right{
margin-left:5px;
padding-left:5px;
float:left;
width:370px;
border:1px solid red;
background:#c1c1c1;
}
.hidden{
display:none;
}
.red{
color:red;
}
.footer{
width:100%;
float:left;
background-color:#c1c1c1;
}
.header{
width:100%;
float:left;
background-color:#c1c1c1;
color:#fff;
font-size:20px;
padding:5px;
}
</style>
</head>
<body>
<center><p class='header'>Simple Live Preview System In Jquery On KeyupEvent</center>
<div class='left'>
<h3>Fill the form</h3>
<form method='post' autocomplete='off' id='frm'>
<table>
<tr><td>Name:</td><td><input type='text' name='name' id='name' required maxlength='20'></td></tr>
<tr><td>Email:</td><td><input type='email' name='email' id='email' required></td></tr>
<tr><td>Mobile:</td><td><input type='text' name='mobile' id='mobile' required maxlength='10'></td></tr>
<tr><td>City:</td><td><input type='text' name='city' id='city' required maxlength='30'></td></tr>
<tr><td>State:</td><td><input type='text' name='state' id='state' required maxlength='20'></td></tr>
<tr><td>Pincode:</td><td><input type='text' name='pincode' id='pincode' required maxlength='6'></td></tr>
<tr><td>Area:</td><td><input type='text' name='area' id='area' required></td></tr>
<tr><td><input type='submit' name='Submit' value='Add Details'></td></tr>
</table>
</form>
</div>
<div class='right'>
<div class='prev'>
<h3>Live Preview</h3>
<p class='area_name hidden'>Name:- <span id='name_preview'></span></p>
<p class='area_email hidden'>Email:- <span id='email_preview'></span></p>
<p class='area_mobile hidden'>Mobile:- <span id='mobile_preview'></span></p>
<p class='area_city hidden'>City:- <span id='city_preview'></span></p>
<p class='area_state hidden'>State:- <span id='state_preview'></span></p>
<p class='area_pincode hidden'>Pincode:- <span id='pincode_preview'></span></p>
<p class='area_area hidden'>Area:- <span id='area_preview'></span></p>
</div>
<div class='confirmation hidden'>
<p>Form Submiited Successfully</p>
</div>
</div>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='preview.js'></script>
<center><p class='footer'>© - 2014. <font color='red'>Dhrubojyoti Das</font> production</p></center>
</body>
</html>
And this is our jquery file
preview.js
$(document).ready(function(){
//alert("Jquery Loaded");
$('#name').keyup(function(){
var name = $(this).val();
if(name != "")
{
$('.area_name').show();
$('#name_preview').html(name);
}
else{
$('.area_name').hide();
}
});
$('#email').keyup(function(){
var email = $(this).val();
if(email != "")
{
$('.area_email').show();
$('#email_preview').html(email);
}
else{
$('.area_email').hide();
}
});
$('#mobile').keyup(function(){
var mobile = $(this).val();
if(mobile != "")
{
$('.area_mobile').show();
$('#mobile_preview').html(mobile);
}
else{
$('.area_mobile').hide();
}
});
$('#city').keyup(function(){
var city = $(this).val();
if(city != "")
{
$('.area_city').show();
$('#city_preview').html(city);
}
else{
$('.area_city').hide();
}
});
$('#state').keyup(function(){
var state = $(this).val();
if(state != "")
{
$('.area_state').show();
$('#state_preview').html(state);
}
else{
$('.area_state').hide();
}
});
$('#pincode').keyup(function(){
var pincode = $(this).val();
if(pincode != "")
{
$('.area_pincode').show();
$('#pincode_preview').html(pincode);
}
else{
$('.area_pincode').hide();
}
});
$('#area').keyup(function(){
var area = $(this).val();
if(area != "")
{
$('.area_area').show();
$('#area_preview').html(area);
}
else{
$('.area_area').hide();
}
});
$('#frm').submit(function(){
alert("Form submitted successfully");
});
});
Live Demo
<!doctype>
<html>
<head>
<title>Live Preview In Jquery</title>
<style>
body{
font-family:tahoma,arial;
font-size:16px;
}
.total{
width:800px;
margin:20px auto;
border:1px solid green;
}
.left{
margin-left:5px;
padding-left:5px;
float:left;
width:370px;
border:1px solid red;
}
.right{
margin-left:5px;
padding-left:5px;
float:left;
width:370px;
border:1px solid red;
background:#c1c1c1;
}
.hidden{
display:none;
}
.red{
color:red;
}
.footer{
width:100%;
float:left;
background-color:#c1c1c1;
}
.header{
width:100%;
float:left;
background-color:#c1c1c1;
color:#fff;
font-size:20px;
padding:5px;
}
</style>
</head>
<body>
<center><p class='header'>Simple Live Preview System In Jquery On KeyupEvent</center>
<div class='left'>
<h3>Fill the form</h3>
<form method='post' autocomplete='off' id='frm'>
<table>
<tr><td>Name:</td><td><input type='text' name='name' id='name' required maxlength='20'></td></tr>
<tr><td>Email:</td><td><input type='email' name='email' id='email' required></td></tr>
<tr><td>Mobile:</td><td><input type='text' name='mobile' id='mobile' required maxlength='10'></td></tr>
<tr><td>City:</td><td><input type='text' name='city' id='city' required maxlength='30'></td></tr>
<tr><td>State:</td><td><input type='text' name='state' id='state' required maxlength='20'></td></tr>
<tr><td>Pincode:</td><td><input type='text' name='pincode' id='pincode' required maxlength='6'></td></tr>
<tr><td>Area:</td><td><input type='text' name='area' id='area' required></td></tr>
<tr><td><input type='submit' name='Submit' value='Add Details'></td></tr>
</table>
</form>
</div>
<div class='right'>
<div class='prev'>
<h3>Live Preview</h3>
<p class='area_name hidden'>Name:- <span id='name_preview'></span></p>
<p class='area_email hidden'>Email:- <span id='email_preview'></span></p>
<p class='area_mobile hidden'>Mobile:- <span id='mobile_preview'></span></p>
<p class='area_city hidden'>City:- <span id='city_preview'></span></p>
<p class='area_state hidden'>State:- <span id='state_preview'></span></p>
<p class='area_pincode hidden'>Pincode:- <span id='pincode_preview'></span></p>
<p class='area_area hidden'>Area:- <span id='area_preview'></span></p>
</div>
<div class='confirmation hidden'>
<p>Form Submiited Successfully</p>
</div>
</div>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='preview.js'></script>
<center><p class='footer'>© - 2014. <font color='red'>Dhrubojyoti Das</font> production</p></center>
</body>
</html>
And this is our jquery file
preview.js
$(document).ready(function(){
//alert("Jquery Loaded");
$('#name').keyup(function(){
var name = $(this).val();
if(name != "")
{
$('.area_name').show();
$('#name_preview').html(name);
}
else{
$('.area_name').hide();
}
});
$('#email').keyup(function(){
var email = $(this).val();
if(email != "")
{
$('.area_email').show();
$('#email_preview').html(email);
}
else{
$('.area_email').hide();
}
});
$('#mobile').keyup(function(){
var mobile = $(this).val();
if(mobile != "")
{
$('.area_mobile').show();
$('#mobile_preview').html(mobile);
}
else{
$('.area_mobile').hide();
}
});
$('#city').keyup(function(){
var city = $(this).val();
if(city != "")
{
$('.area_city').show();
$('#city_preview').html(city);
}
else{
$('.area_city').hide();
}
});
$('#state').keyup(function(){
var state = $(this).val();
if(state != "")
{
$('.area_state').show();
$('#state_preview').html(state);
}
else{
$('.area_state').hide();
}
});
$('#pincode').keyup(function(){
var pincode = $(this).val();
if(pincode != "")
{
$('.area_pincode').show();
$('#pincode_preview').html(pincode);
}
else{
$('.area_pincode').hide();
}
});
$('#area').keyup(function(){
var area = $(this).val();
if(area != "")
{
$('.area_area').show();
$('#area_preview').html(area);
}
else{
$('.area_area').hide();
}
});
$('#frm').submit(function(){
alert("Form submitted successfully");
});
});
Live Demo
No comments:
Post a Comment
Thank your for your comment..your submitted coment will be live after admin approval