CODEWITHSUNDEEP
javascriptcssforms
Harsh Kanakhara
Harsh Kanakhara

Reputation: 1153

Enable and Disable input field using Javascript

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>

Upvotes: 1

Views: 25922

Answers (3)

GoodNews Carrier
GoodNews Carrier

Reputation: 35

 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>

Upvotes: 0

Aashish Kumar
Aashish Kumar

Reputation: 2879

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>

Upvotes: 0

Musa
Musa

Reputation: 97672

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/

Upvotes: 6

Related Questions