Javascript - Optionsfeld Aktivieren/Deaktivieren von Elementen nicht richtig

So versuche ich Aktivieren/Deaktivieren von Elementen basierend auf dem aktivierten Optionsfeld im Bearbeitungsformular.Javascript - Optionsfeld Aktivieren/Deaktivieren von Elementen nicht richtig

Wenn ich versuche, den Code auszuführen und das Formular zu testen, sieht es irgendwie lustig aus. Ich weiß nicht, wie ich es in Worten erklären soll, aber das ist die gif that would show the problem. Es hat die Elemente nicht richtig aktiviert und deaktiviert. Sieht irgendwie lustig aus.

Ich wollte auch die Elemente, die Elemente auf der Grundlage der überprüft Optionsfeld aktiviert und deaktiviert bleiben, wenn es um die Werte aus der Datenbank abrufen, aber es hat nicht funktioniert entweder

Dies ist mein Code

<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 toggleAlert2() { 
    toggleDisabled(document.getElementById("division")); 
    document.getElementById("extText").disabled = false; 
} 
    function toggleDisabled(el) { 
    try { 
    el.disabled = el.disabled ? false : true; 
    } 
    catch(E){ 
    } 
    if (el.childNodes && el.childNodes.length > 0) { 
     for (var x = 0; x < el.childNodes.length; x++) { 
     toggleDisabled(el.childNodes[x]); 
     } 
    } 
} 
function toggleAlert() { 
    document.getElementById("extText").disabled = true; 

} 
</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="toggleAlert()"/> 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="toggleAlert2()"/> External 
     </label> 
     &nbsp 
     <input type="text" id="extText" name="client_details2" value="rrrrrr"/> 
     <br><br> 

     <div id="division"> 
     Division: 
     <select name="client_details"> 
      <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" /> 
     <br> 
     </div> 
     <br> 
     <input type="submit" name="submit" value="Submit"/> 
    </form>  
</body>

Was sind die Alternativen, um meinen Code zu beheben? Vielen Dank!

Quelle

2017-03-23 MechaMetalHead

Ich fühle mich wie das gif in einer Comedy-Show gehört, wo eine alte Person etwas auf einer Website und seltsame Dinge zu tun, versucht immer wieder geschieht, lol. –

Aber die Hauptsache, die nicht hilft, ist die Veröffentlichung Ihres PHP zusammen mit Ihrem HTML-Code. Könnten Sie Ihre Seite öffnen, klicken Sie mit der rechten Maustaste, klicken Sie auf "Page Source" und kopieren Sie den HTML-Code hier zurück? Bonuspunkte für die Erstellung eines Snippets –

Entschuldigung wegen dieser php Sache! Ja, das gif sieht irgendwie lustig aus! Ich poste das HTML in einem Moment – MechaMetalHead

Versuchen Sie, es ohne Rekursion, try-catch und Einstellung für bestimmte Div-Klassen mit querySelector() neu schreiben. https://jsfiddle.net/Lsre6mfL/

können Sie auch

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

In Funktion falten.

Quelle

2017-03-23 05:21:48

Es funktioniert gut danke! – MechaMetalHead

Wow, schau, wie einfach es ist.

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

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

<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 onchange="toggleAlert()"/> 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" onchange="toggleAlert2()"/> External 
 
     </label> 
 
     &nbsp 
 
     <input type="text" id="extText" name="client_details2" value="rrrrrr"/> 
 
     <br><br> 
 

 
     <div id="division"> 
 
     Division: 
 
     <select id="client_details" name="client_details"> 
 
      <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 id="client_details1" type="text" name="client_details1" value="rrrrrr" /> 
 
     <br> 
 
     </div> 
 
     <br> 
 
     <input type="submit" name="submit" value="Submit"/> 
 
    </form>

Quelle

2017-03-23 06:04:28

Ich habe das schon versucht, aber es hat nicht funktioniert, also werde ich Унгамист Долматовs Methode als den Code nehmen, den er/sie mir gegeben hat. Danke trotzdem. :) – MechaMetalHead

Javascript - Optionsfeld Aktivieren/Deaktivieren von Elementen nicht richtig

Antwort

Verwandte Themen