Disabling an Input Field Using JavaScript Upon a Button Click.

0

While it's straightforward to disable an input field by directly adding the disabled attribute in HTML, we'll delve into a dynamic approach in this blog post: disabling an input field using JavaScript upon a button click.


disable input field using javascript on click.


JavaScript method.

setAttribute().


Let's disable the input field on click of button.

We'll create a function that disables the input field upon a button click. disabling the input field will be accomplished using JavaScript's setAttribute method.


See below code.

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>Disable Input Field | maketechstuff.com</title>
</head>

<body>

    <div class="box">
        <input type="text" class="input_field">
        <button type="button" class="button">Disable</button>
    </div>

</body>

</html>

CSS


        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100%;
            height: 100%;
        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            padding: 15px;
            text-align: center;
        }

        input {
            width: 100%;
            font-size: 30px;
        }

        button {
            font-size: 20px;
            padding: 6px 30px;
            margin: 10px 0px;
            cursor: pointer;
        }

JavaScript


    let input_field = document.querySelector(".input_field");
    let button = document.querySelector(".button");

    button.addEventListener("click", disable_input_field);

    function disable_input_field() {
        input_field.setAttribute("disabled", true);
    }

Output:


disable input field on click using javascript


You can also disable input field like this with out setAttribute() method.

JavaScript


    let input_field = document.querySelector(".input_field");
    let button = document.querySelector(".button");

    button.addEventListener("click", disable_input_field);

    function disable_input_field() {
        input_field.disabled = true;
    }


That's how you can disable an input field with a button click using JavaScript. If you have any questions or suggestions, feel free to leave them in the comments section below.


Thank you for your time and attention!


You may like:

  1. How to make input field to convert any text case to uppercase or lowercase instantly on input.
  2. How to clear input field using JavaScript.
  3. How to get the value of input field on click using JavaScript.
  4. How to enable or disable button based on input field value using HTML CSS and JavaScript.
  5. How to make input field value same as another input field on click using JavaScript.

Tags

Post a Comment

0Comments
Post a Comment (0)
To Top