Skip to content Skip to sidebar Skip to footer

Javascript - Radio Button Enable/disable Elements Not Right

So i'm trying to make enable/disabled elements based on the checked radio button in the edit form. When I try to run the code and test the form, it looks kinda funny. I don't know

Solution 1:

Try rewrite it without recursion, try-catch and setting disabled for specific div classes using querySelector(). https://jsfiddle.net/Lsre6mfL/

You can also fold

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

In function.

Solution 2:

Wow, look how simple it is.

functiontoggleAlert2() {
    document.getElementById("extText").disabled = false;
    document.getElementById("client_details").disabled = true;
    document.getElementById("client_details1").disabled = true;
    
}

functiontoggleAlert() {
    document.getElementById("extText").disabled = true;
    document.getElementById("client_details").disabled = false;
    document.getElementById("client_details1").disabled = false;
}
<formmethod="post"action=""enctype="multipart/form-data">
        ID: 50<br><inputtype="hidden"name="id"value="50" /><labelfor = "client1"><inputtype="radio"name="client_type"id = "client1"value="Division"checkedonchange="toggleAlert()"/> Division
        </label>
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
        <labelfor ="client2"><inputtype="radio"name="client_type"id = "client2"value="External"onchange="toggleAlert2()"/> External
        </label>
        &nbsp 
        <inputtype="text"id="extText"name="client_details2"value="rrrrrr"/><br><br><divid="division">
        Division:
        <selectid="client_details"name="client_details"><optionvalue="Choose"  />Choose Division...</option><optionvalue="Distribution"  />Distribution</option><optionvalue="Transmission"  />Transmission</option><optionvalue="Generation"  />Generation</option><optionvalue="Procument"  />Procument</option><optionvalue="Other"  />Others</option></select><br><br>
        Others:<inputid="client_details1"type="text"name="client_details1"value="rrrrrr" /><br></div><br><inputtype="submit"name="submit"value="Submit"/></form>

Post a Comment for "Javascript - Radio Button Enable/disable Elements Not Right"