Alex Justesen Karlsen Alex Justesen Karlsen - 6 months ago 33
Javascript Question

Enable and disable text with radio buttons with javascript?

I have 4 different text boxes the first text box should be enable if the user chooses to enter the volume. The other 3 text boxes (length, width and depth) should be enabled when the user wants to enter dimension. So far this is what I've got.

<form>
<input type="radio" name="r" id="radio1" checked="checked" onclick="enableTxtBox1()">
<input type="text" id="text1" disabled="disabled" placeholder="Volume m^3">
<input type="radio" name="r" id="radio2" onclick="enableTxtBox1()">
<input type="text" id="text2" disabled="disabled" placeholder="Lenght">
<input type="text" id="text3" disabled="disabled" placeholder="Width">
<input type="text" id="text4" disabled="disabled" placeholder="Depth">
</form>


The following javascript where I try to enable and disable. I have two different solutions. I've tried both but I'm suspecting that the javascript is never called.




/*
function enableTxtBox1()
{
document.GetElementById("text1").disabled = !document.GetElementById("radio1").checked;

document.GetElementById("text2").disabled = document.GetElementById("radio1").checked;
document.GetElementById("text3").disabled = document.GetElementById("radio1").checked;
document.GetElementById("text4").disabled = document.GetElementById("radio1").checked;

}
*/
function enableTxtBox()
{
if(document.GetElementById("radio1").checked)
{
document.GetElementById("text1").disabled = false;

document.GetElementById("text2").disabled = true;
document.GetElementById("text3").disabled = true;
document.GetElementById("text4").disabled = true;

}
else if(document.GetElementById("radio2").checked)
{
document.GetElementById("text1").disabled = true;

document.GetElementById("text2").disabled = false;
document.GetElementById("text3").disabled = false;
document.GetElementById("text4").disabled = false;

}
}






Answer
This is just a small mistake use document.getElementById  place of document.GetElementById

<form>
        <input type="radio" name="r" id="radio1" checked="checked" onclick="enableTxtBox1()">
        <input type="text" id="text1" disabled="disabled" placeholder="Volume m^3">
        <input type="radio" name="r" id="radio2" onclick="enableTxtBox1()">
        <input type="text" id="text2" disabled="disabled" placeholder="Lenght"> 
        <input type="text" id="text3" disabled="disabled" placeholder="Width">  
        <input type="text" id="text4" disabled="disabled" placeholder="Depth">  
    </form>
    <script>
        function enableTxtBox1()
        {
            document.getElementById("text1").disabled = !document.getElementById("radio1").checked;

            document.getElementById("text2").disabled = document.getElementById("radio1").checked;
            document.getElementById("text3").disabled = document.getElementById("radio1").checked;
            document.getElementById("text4").disabled = document.getElementById("radio1").checked;

        }

        function enableTxtBox()
        {
            if (document.getElementById("radio1").checked)
            {
                document.getElementById("text1").disabled = false;

                document.getElementById("text2").disabled = true;
                document.getElementById("text3").disabled = true;
                document.getElementById("text4").disabled = true;

            }
            else if (document.getElementById("radio2").checked)
            {
                document.getElementById("text1").disabled = true;

                document.getElementById("text2").disabled = false;
                document.getElementById("text3").disabled = false;
                document.getElementById("text4").disabled = false;

            }
        }
    </script>