2009-05-11 22 views
1

Ich bin Anfänger in HTML. Ich habe zwei Textfelder sagen t1 und t2 Wenn t1 mit einigen Daten gefüllt ist, dann sollte andere Textfeld t2 deaktiviert werden. Bitte lassen Sie mich wissen, heiß, es zu tun. Vielen Dank im VorausDeaktivieren Sie die Textfelder

+0

dieser Effekt soll, wenn in den Boxen-Typen der Benutzer arbeiten ? Wenn dies der Fall ist, müssen Sie dies angeben. Dafür verwenden Sie Javascript. – Anonymous

+0

Möchten Sie t1 deaktiviert haben, wenn einige Daten auch in t2 eingegeben werden? – rahul

Antwort

-5

Sie können dies nicht mit einfachem HTML erreichen.

Befolgen Sie die Richtlinien von progressive enhancement, Sie sollten zuerst einen serverseitigen Check implementieren, in welchem ​​Form-Handler Sie die übermittelten Daten verarbeiten.

Dann können Sie in Betracht ziehen, JavaScript für eine clientseitige Überprüfung hinzuzufügen. Etwas entlang der Linien von:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>Disabling form controls</title> 
    </head> 
    <body> 
     <form id="myForm" action="http://example.com/"> 
      <div> 
      <input name="t1"> 
      <input name="t2"> 
      </div> 
     </form> 
     <script type="text/javascript"> 
     (function() { 
      var t1 = document.forms.myForm.elements.t1; 
      var t2 = document.forms.myForm.elements.t2; 
      var handler = function handler() { 
      t2.disabled = (t1.value !== ""); 
      }; 
      t1.onchange = handler; 
     }()); 
     </script> 
    </body> 
</html> 

(Obwohl ich eine Bibliothek wie YUI oder jQuery verwenden würde Event-Handler in einer Art und Weise hinzuzufügen, die besser vor dem Überschreiben in einer cross kompatibele Weise geschützt ist).

Sie möchten vielleicht einige Tutorials auf JavaScript und the DOM, so dass dies sinnvoll ist.

+1

Ich habe dieses Snippet getestet, indem ich ein Formular mit der ID "myForm" in FF3, Chrome und IE8 erstellt habe und es nicht funktioniert hat. – ichiban

+0

Ich habe es mit einem vollständigen HTML-Dokument aktualisiert, da Sie nicht in der Lage zu verstehen, wie das Skript funktionieren soll. – Quentin

+0

Wenn "Wenn man den äußeren Funktionsblock in Joses Design umwandelt", deutet dies darauf hin, dass entweder (a) Sie den Code, den ich geschrieben habe, nicht setzen oder das Formular nicht erstellt wurde Das() am Ende der anonymen Funktion, die verwendet wird, um das Hinzufügen von Variablen zum globalen Namespace zu vermeiden. – Quentin

2

Basierend auf einfache Beschreibung des Szenarios, hier ist eine Implementierung, die Cross-Browser und ohne Fremd arbeitet JavaScript-Bibliothek:

<html> 
<head> 
<script type="text/javascript"> 
window.onload = function(){ 
    var t1 = document.getElementById("t1"); 
    var t2 = document.getElementById("t2"); 
    t1.onchange = function(){ 
    t2.disabled = t1.value.length > 0; 
    } 
} 
</script> 
</head> 
<body> 
<form> 
t1:<input type="text" id="t1" name="t1" /><br/> 
t2:<input type="text" id="t2" name="t2" /> 
</form> 
</body> 
</html> 
0
<head> 
<script type="text/javascript"> 
    function verify(){ 
    var t1 = document.getElementById ('first'); 
    var t2 = document.getElementById ('second'); 
    if (t1.value != '') { 
     t2.setAttribute('disabled','disabled'); 
     return true; 
    } 
    if (t2.value != '') { 
     t1.setAttribute('disabled','disabled'); 
     return true; 
    } 
    } 
</script> 
</head> 
<body> 
... 
<input type="text" id="first" onblur="verify()"> 
<input type="text" id="second" onblur="verify()"> 
... 
</body> 
Verwandte Themen