stackoom
  简体   繁体   中英

Javascript - enable/disable elements and text box based on drop down not working

 原文  2017-03-24 04:18:08  7   4    javascript/ html

Question

This code demo here is taken from this question . But I wanted to make the text box enable when the value "Others" is chosen from the drop down.

This is the code that I edited from the jsfiddle. 

<html>
<head>
<title> Submit a Contract </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function toggleExternal() {
    document.getElementById("extText").disabled = false;

    var divis_el = document.getElementById("division");
    for (var i = 0; i < divis_el.children.length; i++) {
        divis_el.children[i].disabled = true;
    }
}
function toggleDivision() {
    document.getElementById("extText").disabled = true;z
    var divis_el = document.getElementById("division");
    for (var i = 0; i < divis_el.children.length; i++) {
        divis_el.children[i].disabled = false;
    }
}

function enableTextbox() {
var val = document.getElementById("mySelect").selectedIndex;
if (val == 0 || val == 1 ||val == 2 ||val == 3 ||val == 4 ||) { document.getElementById("otherTxt").disabled = true}
if (val == 5) { document.getElementById("otherTxt").disabled = true; }
}
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
    ID:<br>
    <input type="hidden" name="id" value="50" />

    <label for = "client1">
    <input type="radio" name="client_type" id = "client1" value="Division" checked onclick="toggleDivision()"/> Division
    </label>
    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
    <label for ="client2">
    <input type="radio" name="client_type" id = "client2" value="External"  onclick="toggleExternal()"/> External
    </label>
    &nbsp 
    <input disabled type="text" id="extText" name="client_details2" value=""/> 
    <br><br>

    <div id="division">
    Division:
    <select id="mySelect" name="client_details" onchange="enableTextbox()">
        <option value="Choose">Choose Division...</option>
        <option value="Distribution">Distribution</option>
        <option value="Transmission">Transmission</option>
        <option value="Generation">Generation</option>
        <option value="Procument">Procument</option>
        <option value="Other">Others</option>
    </select>   
    <br><br>
    Others:<input type="text" id="otherTxt" name="client_details1" value="" disabled/>
    <br>
    </div>
    <br>
    <input type="submit" name="submit" value="Submit"/>
</form>     
</body>

I added the function enableTextBox and then the disabled/enabled elements suddenly didn't work. Why is that?

4 answers

solution1
 1  2017-03-24 04:27:11

Here is working code 

    <html>
<head>
<title> Submit a Contract </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
    ID:<br>
    <input type="hidden" name="id" value="50" />

    <label for = "client1">
    <input type="radio" name="client_type" id = "client1" value="Division" checked onclick="toggleDivision()"/> Division
    </label>
    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
    <label for ="client2">
    <input type="radio" name="client_type" id = "client2" value="External"  onclick="toggleExternal()"/> External
    </label>
    &nbsp 
    <input disabled type="text" id="extText" name="client_details2" value=""/> 
    <br><br>

    <div id="division">
    Division:
    <select id="mySelect" name="client_details" onchange="enableTextbox()">
        <option value="Choose">Choose Division...</option>
        <option value="Distribution">Distribution</option>
        <option value="Transmission">Transmission</option>
        <option value="Generation">Generation</option>
        <option value="Procument">Procument</option>
        <option value="Other">Others</option>
    </select>   
    <br><br>
    Others:<input type="text" id="otherTxt" name="client_details1" value="" disabled/>
    <br>
    </div>
    <br>
    <input type="submit" name="submit" value="Submit"/>
</form>  
<script>
    function toggleExternal() {
        document.getElementById("extText").disabled = false;

        var divis_el = document.getElementById("division");
        for (var i = 0; i < divis_el.children.length; i++) {
            divis_el.children[i].disabled = true;
        }
    }
    function toggleDivision() {
        alert('a')
        document.getElementById("extText").disabled = true;
        var divis_el = document.getElementById("division");
        for (var i = 0; i < divis_el.children.length; i++) {
            divis_el.children[i].disabled = false;
        }
    }

    function enableTextbox() {
    var val = document.getElementById("mySelect").selectedIndex;
    if (val == 0 || val == 1 ||val == 2 ||val == 3 ||val == 4) { document.getElementById("otherTxt").disabled = true}
    if (val == 5) { document.getElementById("otherTxt").disabled = false; }
    }
</script>   
</body>

solution2
 1 ACCPTED  2017-03-24 04:39:45

You make 1 mistake in this line. after val == 4 you putted "or" sign " || " which is not allow in JS.

your second mistake is " otherTxt " field already disabled and you trying to disable it. so change the value " disable = false " 

if (val == 0 || val == 1 ||val == 2 ||val == 3 ||val == 4) 
{
   document.getElementById("otherTxt").disabled = false
}

solution3
 1  2017-03-24 05:00:47

If you can select Others menu while clicking external and again division field, you will get others TextBox will enabled here. So this issues also fixed here. change the if condition like this. check the issue and fix it. This will helps you to better for you without issue. 

   <html>
    <head>
    <title> Submit a Contract </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript">
    function toggleExternal() {
        document.getElementById("extText").disabled = false;

        var divis_el = document.getElementById("division");
        for (var i = 0; i < divis_el.children.length; i++) {
            divis_el.children[i].disabled = true;
        }

    }
    function toggleDivision() {
        document.getElementById("extText").disabled = true; 
        var divis_el = document.getElementById("division");
        for (var i = 0; i < divis_el.children.length; i++) {
            divis_el.children[i].disabled = false;
        }
        var val = document.getElementById("mySelect").selectedIndex;
    if (val != 5 ) { document.getElementById("otherTxt").disabled = false}else{document.getElementById("otherTxt").disabled = true; }

    }

    function enableTextbox() {
    var val = document.getElementById("mySelect").selectedIndex;
    if (val == 0 || val == 1 ||val == 2 ||val == 3 ||val == 4 && val != 5 ) { document.getElementById("otherTxt").disabled = false}else{document.getElementById("otherTxt").disabled = true; }

    }
    </script>
    </head>
    <body>
    <form method="post" action="" enctype="multipart/form-data">
        ID:<br>
        <input type="hidden" name="id" value="50" />

        <label for = "client1">
        <input type="radio" name="client_type" id = "client1" value="Division" checked onclick="toggleDivision()"/> Division
        </label>
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
        <label for ="client2">
        <input type="radio" name="client_type" id = "client2" value="External"  onclick="toggleExternal()"/> External
        </label>
        &nbsp 
        <input disabled type="text" id="extText" name="client_details2" value=""/> 
        <br><br>

        <div id="division">
        Division:
        <select id="mySelect" name="client_details" onchange="enableTextbox()">
            <option value="Choose">Choose Division...</option>
            <option value="Distribution">Distribution</option>
            <option value="Transmission">Transmission</option>
            <option value="Generation">Generation</option>
            <option value="Procument">Procument</option>
            <option value="Other">Others</option>
        </select>   
        <br><br>
        Others:<input type="text" id="otherTxt" name="client_details1" value="" />
        <br>
        </div>
        <br>
        <input type="submit" name="submit" value="Submit"/>
    </form>     
    </body>

solution4
 1  2017-03-24 05:03:16

That's help you. 

<html>
    <head>
    <title> Submit a Contract </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">

        function clientDetails(){

            console.log(document.getElementById("client_details").value);
            if(document.getElementById("client_details").value == "Other"){
        document.getElementById("client_details1").disabled = false;
      }else{
        document.getElementById("client_details1").disabled = true;
      }
    }

    function toggleExternal() {
        document.getElementById("extText").disabled = false;
        var divis_el = document.getElementById("division");
        for (var i = 0; i < divis_el.children.length; i++) {
            divis_el.children[i].disabled = true;
        }
    }
    function toggleDivision() {
        document.getElementById("extText").disabled = true;
        var divis_el = document.getElementById("division");
        for (var i = 0; i < divis_el.children.length; i++) {
            divis_el.children[i].disabled = false;
        }
}
</script>
</head>
<body>
    <form method="post" action="" enctype="multipart/form-data">
        ID: 50<br>
        <input type="hidden" name="id" value="50" />

        <label for = "client1">
        <input type="radio" name="client_type" id = "client1" value="Division" checked onclick="toggleDivision()"/> Division
        </label>
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
        <label for ="client2">
        <input type="radio" name="client_type" id = "client2" value="External"  onclick="toggleExternal()"/> External
        </label>
        &nbsp 
        <input disabled type="text" id="extText" name="client_details2" value="rrrrrr"/> 
        <br><br>

        <div id="division">
        Division:
        <select name="client_details" id="client_details" onchange="clientDetails()">
            <option value="Choose"  />Choose Division...</option>
            <option value="Distribution"  />Distribution</option>
            <option value="Transmission"  />Transmission</option>
            <option value="Generation"  />Generation</option>
            <option value="Procument"  />Procument</option>
            <option value="Other"  />Others</option>
        </select>   
        <br><br>
        Others:<input type="text" name="client_details1" value="rrrrrr" id="client_details1" disabled/>
        <br>
        </div>
        <br>
        <input type="submit" name="submit" value="Submit"/>
    </form>     
</body>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to enable/disable drop down list box in HTML + Javascript/JQuery? How to enable or disable drop-down or text-box on selection other drop-down? Disable/Enable a text box based on radio/select option selected Javascript Enable/disable drop down list based on another drop down list Best way to enable/disable elements in the form based on selected value in drop down menu? how to show the sub elements text based on div>a like the select>option structure in a drop-down box using original javascript Enable an HTML form text box based on the value of a drop down menu in the same form? Populate text box based on drop down selection Populate Drop down from Text box in Javascript Enable and Disable button based on drop-down selection. - Bootstrap 3
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM