How to change input box borders after filling the box using javascript ?

In this article, we will change the input border after filling the text on the input text field using JavaScript. The onchange event attribute works when the value of the element changes and selects the new value from the list.

1. Code:

<!DOCTYPE html>
<html>
<body style="text-align: center;">
    <h2>Soltuts.com</h2>
    <h2> Change input borders after filling data </h2>
    <form>
        <label> NAME</label>
        <input type="text" id="fname" name="fname" value="">
        <input type="submit" value="submit">
    </form>
    <script>
        var gfg = document.getElementById("fname");
          gfg.onchange = function (e) {
            if (gfg.value != '') {
                e.target.style.borderBottom = "3px dotted red";
            }
        };
    </script>
</body>
</html>

2. Example:

Run the program to get the result.

JavaScript