Programming Examples

JQuery Program to Copy local address to permanent address


address copy

Jquery Script to Copy the local address to Permanent address

<html>
	<head>
		<title>Copy Permanent Address to Local Address</title>
		<style>
			h1
			{
				text-align:center;
			}
			.main-box
			{
				width:608px;
				min-height:308px;
				margin:auto;
				border:2px solid red;
				padding:5px;
			}
			.main-box textarea
			{
				padding:5px;
				width:100%
				
			}
			label
			{
				font-weight:bolder;
			}
		</style>
		<script language="javascript" src="jquery.min.js"></script>
	</head>
	<body>
		<h1>Copy Permanent Address to Local Address </h1>
		<div class="main-box">
			<fieldset>
				<legend>Permanent Address</legend>
				<table width="100%">				
					<tr>
						<td><label>Address line 1</label></td>
						<td><input type="text" id="t1"/></td>					
						<td><label>Address line 2</label></td>
						<td><input type="text" id="t2"/></td>
					</tr>
					<tr>
						<td><label>City</label></td>
						<td><input type="text" id="t3"/></td>					
						<td><label>State</label></td>
						<td><input type="text" id="t4"/></td>
					</tr>
					<tr>
						<td><label>Pin Code</label></td>
						<td><input type="text" id="t5"/></td>					
						<td><label>Country</label></td>
						<td><input type="text" id="t6"/></td>
					</tr>
				</table>
			</fieldset>
			<br/>
			<fieldset>
				<legend>Local Address</legend>
				<table width="100%">
					<tr>
						<td colspan="4"><label for="ch1">Same As Permanent Address</label><input id="ch1" type="checkbox"/><br/><br/></td>
					</tr>
					<tr>
						<td><label>Address line 1</label></td>
						<td><input type="text" id="t_1"/></td>					
						<td><label>Address line 2</label></td>
						<td><input type="text" id="t_2"/></td>
					</tr>
					<tr>
						<td><label>City</label></td>
						<td><input type="text" id="t_3"/></td>					
						<td><label>State</label></td>
						<td><input type="text" id="t_4"/></td>
					</tr>
					<tr>
						<td><label>Pin Code</label></td>
						<td><input type="text" id="t_5"/></td>					
						<td><label>Country</label></td>
						<td><input type="text" id="t_6"/></td>
					</tr>
				</table>
			</fieldset>
		</div>
	
		<script>
			$(document).ready(function()
			{
			
				$("#ch1").change(function(){
					
					if (this.checked) 
					{						
						$('#t_1').val($("#t1").val());
						$('#t_2').val($("#t2").val());
						$('#t_3').val($("#t3").val());
						$('#t_4').val($("#t4").val());
						$('#t_5').val($("#t5").val());
						$('#t_6').val($("#t6").val());
										else 
					{
						$('#t_1').val("");
						$('#t_2').val("");
						$('#t_3').val("");
						$('#t_4').val("");
						$('#t_5').val("");
						$('#t_6').val("");
					}
				});
				
			});
		</script>
	</body>
</html>
Output

CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Best Java Training Institute in Prayagraj (Allahabad) Best Python Training Institute in Prayagraj (Allahabad) O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Sarkari Naukari Notification Best Website and Software Company in Allahabad Website development Company in Allahabad