You may have seen on websites when the user needs to fill out a field such as a mailing address, as well as a billing address. Instead of having your customers fill out the form twice, here we will use the checkbox to copy the form’s data from one field to another.
So, In this tutorial “Copying text from one field to another using CheckBox with javaScript and PHP”, we are going to learn how to implement jQuery that automatically copy and fill out text input fields from another text input fields. Useful to prevent from having to fill out the form twice or more.
Table of Contents
Main Screen
This page will appear whenever a user opens the site, this page contains a simple web interface where the user has to enter the buyers’ address and then just click to checkbox then the consignee address is automatically filled.
Create a PHP file named “index.php” and paste the following code inside of it
Index.php
<html lang="en">
<head>
<title>Techjunkgigs</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>
<script>
function FillBilling(f) {
if(f.billingtoo.checked == true) {
f.c_name.value=f.b_name.value ;
f.c_add_line1.value = f.b_add_line1.value;
f.c_add_line2.value = f.b_add_line2.value;
f.c_add_line3.value = f.b_add_line3.value ;
f.c_gstn.value = f.b_gstn.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_add_line1.value = "";
f.c_add_line2.value = "";
f.c_add_line3.value = "";
f.c_gstn.value = "";
f.c_contact_person.value = "";
f.c_phone.value = "";
f.c_email.value = "";
}
}</script>
</head>
<body>
<div class="container">
<form>
<div>
<h1 style="color:green">Techjunkgigs</h1>
<h3>Copy Text From One Field To Another using CheckBox with JavaScript and PHP</h3>
<hr/>
</div>
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label>BUYER: </label>
</div>
</div>
<div class="col-sm-2">
<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>
<!-- /.col -->
<div class="col-sm-2">
<div class="form-group">
<label>Address Line 1: </label>
<input type="text" class="form-control" id="usercity" name="b_add_line1" placeholder="Enter Line 1" required>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Address Line 2: </label>
<input type="text" class="form-control" id="usercity" name="b_add_line2" placeholder="Enter Line 2" required>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Address Line 3: </label>
<input type="text" class="form-control" id="usercity" name="b_add_line3" placeholder="Enter Line 3" required>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>GSTN No: </label>
<input type="text" class="form-control" id="usercity" name="b_gstn" placeholder="Enter GSTN No." required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<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-4">
<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-4">
<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-4">
<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-2">
<div class="form-group">
<label>CONSIGN: </label>
<label> </label>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Name: </label>
<input type="text" class="form-control" id="usercity" name="c_name" placeholder="Enter Name" required>
</div>
</div>
<!-- /.col -->
<div class="col-sm-2">
<div class="form-group">
<label>Address Line 1: </label>
<input type="text" class="form-control" id="usercity" name="c_add_line1" placeholder="Enter Name" required>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Address Line 2: </label>
<input type="text" class="form-control" id="usercity" name="c_add_line2" placeholder="Enter Name" required>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Address Line 3: </label>
<input type="text" class="form-control" id="usercity" name="c_add_line3" placeholder="Enter Name" required>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>GSTN No: </label>
<input type="text" class="form-control" id="usercity" name="c_gstn" placeholder="Enter Name" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<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-4">
<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-4">
<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>
</body>
</html>
JavaScript Code
To add more fields, just add to the parameters shown…like this:
<script>
function FillBilling(f) {
if(f.billingtoo.checked == true) {
f.c_name.value=f.b_name.value ;
f.c_add_line1.value = f.b_add_line1.value;
f.c_add_line2.value = f.b_add_line2.value;
f.c_add_line3.value = f.b_add_line3.value ;
f.c_gstn.value = f.b_gstn.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_add_line1.value = "";
f.c_add_line2.value = "";
f.c_add_line3.value = "";
f.c_gstn.value = "";
f.c_contact_person.value = "";
f.c_phone.value = "";
f.c_email.value = "";
}
}</script>
Demo Image
- Image
Here the user has to enter the Buyers address and then just click to the checkbox.
2. Image
Demo Video
You can also check
Convert Realtime Digit or number into word by Using PHP and JavaScript
Live Username Availability Check using PHP
I hope this article “Copying text from one field to another using CheckBox with javaScript and PHP”. helped you to understand how to copy data from one field to another field. To get the latest news and updates follow us on twitter & facebook, subscribe to our YouTube channel. And If you have any query then please let us know by using the comment form.
Hi Abhishek,
Nice article, It is very useful to use in any billing receipt to reduce the effort of users.
And it looks very simple codes, so, it is not difficult to add in our script.
Thank you for sharing this code!
Hey Ashutosh,
its pleasure for me that you like this post.
Thanks for visiting techjunkgigs 🙂
Very helpful article. Keep up the good work !
i’ had strated to learn php a year ago but left because no comprehensive tutorial blog was there.. now it seems got a nice site to follow …hope it’s a responsive and really up to date site
Wow Amazing Article. Thanks for sharing us this knowledge. Your Article is really helpful for me. Thank you so much
I went through your posts and what I found in your posts was truly amazing and keep up the good work.