Enable and Disable input field using Javascript

Question

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>

possible duplicate http://stackoverflow.com/questions/2874688/how-to-disable-an-input-type-text — FrEaKmAn, Dec 28 '14 at 15:06

score 6 · Accepted Answer · answered Dec 28 '14 at 15:08

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/

score 0 · Answer 2 · answered Dec 08 '20 at 13:28

function toggleEnable(id) {
   var textbox = document.getElementById(id);
   
   if (textbox.disabled) {
      // If disabled, do this 
       document.getElementById(id).disabled = false;
    } else {
       // Enter code here
        document.getElementById(id).disabled = true;
     }
}

<form>
    <table>
        <tr>
            <td><input id="input1" class="myText" type="text" placeholder="Row 1" /></td>
            <td><button type="button" onclick="toggleEnable('input1')"> Enable/Disable </button></td>
        </tr>
        <tr>
            <td><input id="input2" class="myText" type="text" placeholder="Row 2" /></td>
            <td><button type="button" onclick="toggleEnable('input2')"> Enable/Disable </button></td>
        </tr>
    </table>
</form>

score 0 · Answer 3 · answered Jul 12 '22 at 00:14

 function toggleEnable(el1, el2) {
   var textbox = document.getElementById(el1, el2);
   
   if (textbox.disabled) {
      // If disabled, do this 
       document.getElementById(el1).disabled = false;
        document.getElementById(el2).disabled = false;
    } else {
       // Enter code here
        document.getElementById(el1).disabled = true;
        document.getElementById(el2).disabled = true;
     }
}

 <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 2" /></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>

Enable and Disable input field using Javascript

3 Answers3