Copy content of one textbox to another textbox using HTML,CSS and JavaScript
<html>
<head>
<title>Copy Billing Address To Shipping Address</title>
<style>
input[type=text]{
padding: 8px 10px;
border: 2px solid #4CAF50;
border-radius: 20px;
}
label {
color:red;
font-size:15px;
}
h3 {
color:#0000ff;
}
.button {
display: block;
width: 100%;
border: none;
background-color: #4CAF50;
color: white;
padding: 14px 28px;
font-size: 16px;
}
body {
background-color: red;
}
</style>
<script>
function copyAddress(form)
{
form.sstreet.value = form.bstreet.value;
form.scity.value = form.bcity.value;
form.sstate.value = form.bstate.value;
form.spcode.value = form.bpcode.value;
form.scountry.value = form.bcountry.value;
}
</script>
</head>
<body>
<form>
<table style="width:60%" align = "center" bgcolor="yellow" cellpadding="8" cellspacing="8">
<tr>
<td><h3><b>Billing Address</b></h3></td>
<td><td><h3><b>Shipping Address</b></h3></td></td>
</tr>
<tr>
<td><label><b>Billing Street</b></label></td>
<td><input type="text" name="bstreet" ></td>
<td><label><b>Shipping Street</b></label></td>
<td><input type="text" name="sstreet" ></td>
</tr>
<tr>
<td><label><b>Billing City</b></label></td>
<td><input type="text" name="bcity" ></td>
<td><label><b>Shipping City</b></label></td>
<td><input type="text" name="scity" ></td>
</tr>
<tr>
<td><label><b>Billing State</b></label></td>
<td><input type="text" name="bstate" ></td>
<td><label><b>Shipping State</b></label></td>
<td><input type="text" name="sstate" ></td>
</tr>
<tr>
<td><label><b>Billing Postal Code</b></label></td>
<td><input type="text" name="bpcode" ></td>
<td><label><b>Shipping Postal Code</b></label></td>
<td><input type="text" name="spcode" ></td>
</tr>
<tr>
<td><label><b>Billing Country</b></label></td>
<td><input type="text" name="bcountry" ></td>
<td><label><b>Shipping Country</b></label></td>
<td><input type="text" name="scountry" ></td>
</tr>
<tr>
<td>
<td><input type="button" class = "button" value="Copy Address" onclick="copyAddress(this.form);"></td>
<td></td>
<td><button class="button" >Submit</button></td>
</td>
</tr>
</table>
</form>
</body>
</html>
<head>
<title>Copy Billing Address To Shipping Address</title>
<style>
input[type=text]{
padding: 8px 10px;
border: 2px solid #4CAF50;
border-radius: 20px;
}
label {
color:red;
font-size:15px;
}
h3 {
color:#0000ff;
}
.button {
display: block;
width: 100%;
border: none;
background-color: #4CAF50;
color: white;
padding: 14px 28px;
font-size: 16px;
}
body {
background-color: red;
}
</style>
<script>
function copyAddress(form)
{
form.sstreet.value = form.bstreet.value;
form.scity.value = form.bcity.value;
form.sstate.value = form.bstate.value;
form.spcode.value = form.bpcode.value;
form.scountry.value = form.bcountry.value;
}
</script>
</head>
<body>
<form>
<table style="width:60%" align = "center" bgcolor="yellow" cellpadding="8" cellspacing="8">
<tr>
<td><h3><b>Billing Address</b></h3></td>
<td><td><h3><b>Shipping Address</b></h3></td></td>
</tr>
<tr>
<td><label><b>Billing Street</b></label></td>
<td><input type="text" name="bstreet" ></td>
<td><label><b>Shipping Street</b></label></td>
<td><input type="text" name="sstreet" ></td>
</tr>
<tr>
<td><label><b>Billing City</b></label></td>
<td><input type="text" name="bcity" ></td>
<td><label><b>Shipping City</b></label></td>
<td><input type="text" name="scity" ></td>
</tr>
<tr>
<td><label><b>Billing State</b></label></td>
<td><input type="text" name="bstate" ></td>
<td><label><b>Shipping State</b></label></td>
<td><input type="text" name="sstate" ></td>
</tr>
<tr>
<td><label><b>Billing Postal Code</b></label></td>
<td><input type="text" name="bpcode" ></td>
<td><label><b>Shipping Postal Code</b></label></td>
<td><input type="text" name="spcode" ></td>
</tr>
<tr>
<td><label><b>Billing Country</b></label></td>
<td><input type="text" name="bcountry" ></td>
<td><label><b>Shipping Country</b></label></td>
<td><input type="text" name="scountry" ></td>
</tr>
<tr>
<td>
<td><input type="button" class = "button" value="Copy Address" onclick="copyAddress(this.form);"></td>
<td></td>
<td><button class="button" >Submit</button></td>
</td>
</tr>
</table>
</form>
</body>
</html>
Comments
Post a Comment