Question

190

Enable and Disable input field using Javascript

rated 0 times [ 197] [ 7] / answers: 1 / hits: 16080 / 10 Years ago, sun, december 28, 2014, 12:00:00

I have write some simple code which would make input field enabled and disabled on button click but it is not responding.
please help me...!!!

<html>

<head>

    <script type=text/javascript>

        function toggleEnable(el1, el2) {

            document.getElementByID(el1).disabled = true;

            document.getElementByID(el2).disabled = true;

        }

    </script>

</head>

<body>

    <form>

        <table>

            <tr>

                <td><input id=input1 class=myText type=text placeholder=Row 1 /></td>

                <td><input id=input2 class=myText type=text placeholder=Row 1 /></td>

                <td><button onclick=toggleEnable('input1','input2')> Enable/Disable </button></td>

            </tr>

            <tr>

                <td><input id=input3 class=myText type=text placeholder=Row 3 /></td>

                <td><input id=input4 class=myText type=text placeholder=Row 4 /></td>

                <td><button onclick=toggleEnable('input3','input4')> Enable/Disable </button></td>

            </tr>

        </table>

    </form>

</body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

draven

Add To Favorites

Follow

Total Points: 641

Total Questions: 101

Total Answers: 110

Location: Nicaragua

Member since Mon, Sep 26, 2022

2 Years ago

draven questions

1 HTML to PDF convert in react js using jsPDF not working

Tue, Apr 12, 22, 00:00, 2 Years ago

1 How to properly install a Pinia Store?

Thu, Feb 17, 22, 00:00, 2 Years ago

1 Format currency input field with dollar sign & commas

Tue, Nov 30, 21, 00:00, 3 Years ago

1 Material-UI datepicker invalid date format issue

Tue, Oct 19, 21, 00:00, 3 Years ago

1 how to show a floating action button always in bottom of screen

Tue, Jan 12, 21, 00:00, 3 Years ago

View All

answered 10 Years ago kileyr · Accepted Answer

Your buttons are submitting the form the are in, to not submit the form you'll have to use a type=button button, also you've spelt getElementByID incorrectly its getElementById

<form>

    <table>

        <tr>

            <td><input id=input1 class=myText type=text placeholder=Row 1 /></td>

            <td><input id=input2 class=myText type=text placeholder=Row 1 /></td>

            <td><button type=button onclick=toggleEnable('input1','input2')> Enable/Disable </button></td>

        </tr>

        <tr>

            <td><input id=input3 class=myText type=text placeholder=Row 3 /></td>

            <td><input id=input4 class=myText type=text placeholder=Row 4 /></td>

            <td><button type=button onclick=toggleEnable('input3','input4')> Enable/Disable </button></td>

        </tr>

    </table>

</form>

    function toggleEnable(el1, el2) {

        document.getElementById(el1).disabled = true;

        document.getElementById(el2).disabled = true;

    }

http://jsfiddle.net/mowglisanu/aam7jg9t/