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" >
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.