How to Make Same Input Values as other Input Field on Click Using JavaScript

In this blog post, you'll learn how to implement a common feature seen in many web forms, where the value of one input field is automatically copied to another input field based on the state of a checkbox and also you'll learn how to edit two input fields simultaneously.

add same input value as other input field on click

You may have seen this type of technique address fields in forms, where users can opt to have the same information populated in multiple fields.

This guide will walk you through the process of creating a simple form with checkbox and two input fields. You'll learn how to dynamically update the value of one input field based on the checkbox state, and how to edit two input field simultaneously. We going to make it using HTML CSS and JavaScript.

Video Tutorial on Linking Input Fields for Simultaneously Editing:

Basic Description

First, we create two input fields and checkbox in the middle, first we going to check on click event of JavaScript that the checkbox is checked or not. If checked then we make the second input field value same as firsts input field else, we remove the value from second input field. See the demo in above YouTube video.

And if checkbox is already selected by user before it begins writing with first input field, then we enable simultaneous editing in both the input field. You can see demo in above YouTube video.

First let’s create simple input fields and checkbox with html and CSS.

HTML


<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Same as above input value | maketechstuff.com</title>
    <link rel="stylesheet" href="index.css">

</head>

<body>

    <div class="box">
        <form action="#">
            <div class="input_box">
                <input type="text" class="input_field1" placeholder="Name">
            </div>
            <label class="checkbox_box">
                <input type="checkbox" class="checkbox">
                <p>Same as above</p>
            </label>
            <div class="input_box">
                <input type="text" class="input_field2" placeholder="Nick name">
            </div>
        </form>
    </div>
    
</body>
<script>

</script>

</html>

CSS


* {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box{
    width: 400px;
    background-color: #f1f1f1;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}
.input_box{
    width: 100%;
    text-align: center;
    background-color: #fff;
    margin: 10px 0px;
}
input[type="text"]{
    width: 90%;
    font-size: 25px;
    padding: 10px 0px;
    border: none;
    outline: none;
}
label{
    font-size: 20px;
    margin-top: 20px;
    display: flex;
    cursor: pointer;
}
label p{
    margin-left: 10px;
}

Output:

As you can see in above image, that there is two input fields and one checkbox in middle of them. So we going to add functionality that, when user select checkbox we make second input field value same as the first one.

Add functionality to add one input field value to another input field.

To add one input field value to another by adding single line of code.

JavaScript


    let input_field1 = document.querySelector(".input_field1");
    let input_field2 = document.querySelector(".input_field2");
    let checkbox = document.querySelector(".checkbox");
    let checkbox_box = document.querySelector(".checkbox_box");

    checkbox_box.onclick = function(){
        if(checkbox.checked){
            input_field2.value = input_field1.value;
        }else{
            input_field2.value = "";
        }
    }

So now when user select the checkbox then the second input field value get the value of first input field.

Enabling simultaneous inputs in both input fields.

But what if user select the checkbox before writing in first input field ?. Then we add values in both the input fields simultaneously.

JavaScript


    input_field1.oninput = function(){
        if(checkbox.checked){
            input_field2.value = input_field1.value;
        }
    }

So that’s how you can make one input field value same as another input field on click or by checking checkbox status. You can see demo and whole video tutorial on above mentioned youtube video. If you have any question or suggestion you can write in comment section.

You may like:

How to Make Same Input Values as other Input Field on Click Using JavaScript

Video Tutorial on Linking Input Fields for Simultaneously Editing:

Basic Description

Add functionality to add one input field value to another input field.

Enabling simultaneous inputs in both input fields.

Post a Comment

Contact form

How to Make Same Input Values as other Input Field on Click Using JavaScript

Video Tutorial on Linking Input Fields for Simultaneously Editing:

Basic Description

Add functionality to add one input field value to another input field.

Enabling simultaneous inputs in both input fields.

You may like these posts

Post a Comment

Contact form