In this article you'll learn how to show button when input field value is entered. A simple yet effective way to improve the user experience of your website.
Input field only shows button when, it has value and if input field is empty than button disappear. we going to make this functionality using HTML, CSS & JavaScript.
As you can see in the below image that one input field is empty, so button is hidden and in their is a value in second input field so button is visible. It is easy to make it. I used javascript to show button when input field has value and hide button when input field is empty.
Video Tutorial on Show Button based on Input value:
Show Button When Input Field Has Value.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
I’ve integrated javascript within the html file inside the script tag. You can create a separate file and link it to an html file.
Step 1: Create a simple input field and button within.
So let's first create simple input field and a button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="input_box">
<form action="#">
<div class="box">
<input type="text" class="input" placeholder="Message..." required>
<Button class="button">
<img class="image" src="images/send.png">
</Button>
</div>
</form>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg , #1432bb , #240464);
}
.container .input_box{
width: 450px;
}
.container .input_box .box{
width: 100%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 200px;
}
.box .input{
width: 100%;
border: none;
outline: none;
border-radius: 200px;
padding: 15px;
font-size: 35px;
}
.box .button{
background-color: #dadaff;
border-radius: 50px;
margin: 0px 8px;
padding: 6px;
cursor: pointer;
border: none;
transition: 0.2s;
}
.box .button .image{
width: 35px;
height: 35px;
display: block;
margin: 5px 5px 3px 2px;
transition: 0.2s;
}
Output:
Basic design complete!. Now we'll hide the button initially. Because we only have to show button according to input field value. If its empty we hide it and if it has value we show it.
Step 2: Hide button initially.
Now to hide the button we'll remove the width and hight of button image and add pointer-events: none and opacity: 0 to both button and its image.
By doing this button will initially hidden.
CSS
.box .button{
background-color: #dadaff;
border-radius: 50px;
margin: 0px 8px;
padding: 6px;
pointer-events: none;
opacity: 0;
cursor: pointer;
border: none;
transition: 0.2s;
}
.box .button .image{
width: 0px;
height: 0px;
display: block;
margin: 5px 5px 3px 2px;
pointer-events: none;
opacity: 0;
transition: 0.2s;
}
Output:
Button is hidden. Now we'll show and hide this button dynamically based on input field value using JavaScript.
If input field empty, we'll hide button. If input field has value we'll show the button.
Step 3: Add javascript to show and hide button based to input value.
To show and hide the button I have used CSS opacity property and pointer-events propery for removing mouse pointer interferance on a button hidden state.
As you have seen above that i have also removed width and height of button. Thats just for animation purpose while button is appearing.
The styling done within the javascript. You can toggle the class or add and remove class for show and hide button.
JavaScript
let input = document.querySelector('.input');
let button = document.querySelector('.button');
let image = document.querySelector('.image');
To hide the button we have added width: 0px , height: 0px, opacity: 0 and pointer-events: none to image and opacity: 0 and pointer-events: none to button.
We'll run the function on input event. That checks for input field value.
If input field not empty we'll add styling width: 35px , height: 35px, opacity: 1 and pointer-events: auto to image and opacity: 1 and pointer-events: auto to button.
If input field empty we'll add styling width: 0px , height: 0px, opacity: 0 and pointer-events: none to image and opacity: 0 and pointer-events: none to button.
JavaScript
input.oninput = function () {
if (input.value != '') {
image.style.width = '35px';
image.style.height = '35px';
image.style.opacity = '1';
image.style.pointerEvents = 'auto';
button.style.opacity = '1';
button.style.pointerEvents = 'auto';
}else{
image.style.width = '0px';
image.style.height = '0px';
image.style.opacity = '0';
image.style.pointerEvents = 'none';
button.style.opacity = '0';
button.style.pointerEvents = 'none';
}
}Full code:
So that's it, show and hide button according to input field value using HTML, CSS and JavaScript is ready. If you have any question or suggestion you can leave a comment in comment section.
You may like:
- How to get input field value using JavaScript.
- How to disable input field using JavaScript.
- How to Enable button dynamically based on input field value using JavaScript.
- Input field focus animation.
- How to enable and disable button using both HTML and JavaScript.
Share your thoughts.