Welcome back to shortlearner.com, in our previous post we learn how to read and display a txt file with the help of JavaScript.
today in this post we will see how to Copy Text From One Field To Another using JavaScript.
Also Read :
Get Domain name from URL
How to Send Attachment on mail using PHP.
PHP Login Script With Remember me.
Unable to create a directory a wordpress error
Change password using javascript, php and mysqli.
Password and Confirm Password Validation Using JavaScript
Check Email is Already Registered in Database using Ajax and JavaScript.
How to hide extension of html and php file.?
so most of the time we need to Copy Text From One Field To Another using Check Box with JavaScript.
for example if we are creating an e-commerce platform and we want to make it user friendly.
so we are creating a check box which will hep user to copy all the fields of billing address to shipping address.
in the below example there are two buyers , buyer 1 and buyer 2.
we take name, email and contact number information from buyer 1 and put it into buyer 2 by clicking on the checkbox
<html lang="en">
<head>
<title>Shortlearner</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form>
<div>
<h1 style="color:green">Shortlearner</h1>
<h3>Copy Text From One Field To Another using CheckBox with JavaScript </h3>
<hr/>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>BUYER: </label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>Buyer Name: </label>
<input type="text" class="form-control" id="usercity" name="b_name" placeholder="Enter Name" required>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Contact Person: </label>
<input type="text" class="form-control" id="userstate" name="b_contact_person" placeholder="Enter Person Name" required>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Phone No: </label>
<input type="text" class="form-control" id="usercity" name="b_phone" placeholder="Enter Phone No." required>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Email: </label>
<input type="text" class="form-control" id="userstate" name="b_email" placeholder="Enter Email" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
<label style="color:blue;">Check this box if Billing Address and Shipping Address are the same.</label>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>BUYER 2: </label>
<label> </label>
</div>
</div>
<!-- /.col -->
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>Name: </label>
<input type="text" class="form-control" id="usercity" name="c_name" placeholder="Enter Name" required>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Contact Person: </label>
<input type="text" class="form-control" id="userstate" name="c_contact_person" placeholder="Enter Person Name" required>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Phone No: </label>
<input type="text" class="form-control" id="usercity" name="c_phone" placeholder="Enter Phone No." required>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Email: </label>
<input type="text" class="form-control" id="userstate" name="c_email" placeholder="Enter Email" required>
</div>
</div>
</div>
</form>
</div>
<script>
function FillBilling(f) {
if(f.billingtoo.checked == true) {
f.c_name.value=f.b_name.value ;
f.c_contact_person.value = f.b_contact_person.value ;
f.c_phone.value = f.b_phone.value ;
f.c_email.value = f.b_email.value ;
}
else
{
f.c_name.value = "";
f.c_contact_person.value = "";
f.c_phone.value = "";
f.c_email.value = "";
}
}</script>
</body>
</html>hope this post will help you.
keep coding, keep learning