Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change Input box borders after filling the box using JavaScript?
The style.border property is used to change the element’s border, and it returns the three border-bottom properties, i.e., border-color, border-style, and border-width of the element. It is one of the HTML Style Object properties.
We use onchange event to make changes effective after filling the box. The onchange is one of the JavaScript attribute and it occurs when the value of an HTML element is changed. It also works with the radio buttons and checkboxes, when the checked state is changed.
The onchange event can also work with the <select> HTML element. The onchange event is quite similar to the oninput event. But oninput event occurs immediately after value of the element is changed, on the other hand onchange event occurs when the element loses its focus.
In this article, we will see how we can change the Input box borders after filling the box using JavaScript.
Syntax
The following is the syntax for the style.border property for changing the input box borders after filling the box −
object.style.border = "width style color|initial|inherit"
Parameters
width – Used to set the border width. We can pass width value as 'thick', 'thin', 'medium' or value in px (i.e., 10px).
style – Used to set the border style. We can pass style value as 'solid', 'dotted', 'double', etc.
color – Used to set the border color.
initial – Used to set the property to default value.
inherit – It is used to inherit the properties from the parent element.
Return Value
The style border returns a value of the string, which represents the color, width, and style of the border of the element.
Steps
We should follow the below-given steps to change input box borders after filling the box −
Step 1 − Define form element, which contains the input fields of text and button type.
Step 2 − The script code is defined where functionality of changing the borders of input box after filling the box.
Step 3 − In JavaScript section, onchange event is declared which occurs when the value of the element is changed.
Step 4 − The style.border is the HTML DOM background property uses to change the elements of the bottom border.
Step 5 − Whenever the user adds some value to the input value, the onchange event is triggered and when event is triggered the value checks whether it is null or not. If the value is present and it is not null, then border bottom will be changed to the dotted green color.
Example
In the below example, we change the first Input box borders after filling the box to "10px solid green" and the second box borders to "3px dotted red" using JavaScript.
<html>
<body style="text-align: center;">
<h2>Changing the Borders of Input Box after filling the Box</h2>
<!--defining the form-->
<form>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" value=""><br><br>
<label>Second Name:</label>
<input type="text" id="secondname" name="secondname" value=""><br><br>
<input type="button" value="submit">
</form>
<script>
var tp = document.getElementById("firstname");
var tp1 = document.getElementById("secondname");
tp.onchange = function (f) {
if (tp.value != '') {
f.target.style.border = "10px solid green";
}
};
tp1.onchange = function (g) {
if (tp1.value != '') {
g.target.style.border = "3px dotted red";
}
};
</script>
</body>
</html>
Example
Changing only the bottom border of the input box
In this example, we use style borderBottom property to change the bottom border of the input box. To make the changes effective we use onchange event attribute.
<html>
<body style="text-align: center;">
<h2>Changing the bottom border of Input Box after filling the box</h2>
<form>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" value=""><br><br>
<label>Second Name:</label>
<input type="text" id="secondname" name="secondname" value=""><br><br>
<input type="button" value="submit">
</form>
<script>
var tp = document.getElementById("firstname");
var tp1 = document.getElementById("secondname");
tp.onchange = function (f) {
if (tp.value != '') {
f.target.style.borderBottom = "thick solid #00ff00";
}
};
tp1.onchange = function (g) {
if (tp1.value != '') {
g.target.style.borderBottom = "3px dotted green";
}
};
</script>
</body>
</html>
Conclusion
In this article, we have demonstrated how we can change the borders of Input box after filling the box along with examples. We have seen tan example, where the bottom border is changed to green color whenever we enter the text in the two input fields. If the value is null in the two input fields then color will not be changed, it changes only when the value is existing.
1K+ Views
