HTML Check Textfeld Input Onclick?
Kann man irgendwie definieren, dass die Onclick aktion nur ausgeführt wird, wenn in 2 bestimmten textfeldern bestimmter text steht? Also, dass z.B. In Feld 1 "Test" steht und in Feld 2 "Tee" steht, dass man nur dann die Button onclick action ausführen kann und sonst nichts passiert? Möchte, dass wenn in beiden Textfeldern eine bestimmte sache steht, erst dann auf einen Button geclickt werden kann, welcher einen dann weiterleitet.
2 Antworten
<input class="inputForListener">
<input class="inputForListener">
<button class="enabledWhenFilled" disabled></button>
<script>
var inputs = document.getElementsByClassName("inputForListener");
inputs.addEventListener("change", ()=> {
if(inputs[0].value == "Test" && inputs[1].value == "Tee")
{
document.getElementsByClassName("enabledWhenFilled")[0].disabled = false;
}
else
{
document.getElementsByClassName("enabledWhenFilled")[0].disabled = true;
}
});
</script>
So oder so ungefair. Habe schon ewig kein JS mehr geschrieben ...
Das changed event wird gefeuert, wenn etwas eingegeben wird. Das Dann wird geprüft ob der text enhalten ist und je nachdem wird disabled auf true oder false für den button gesetzt.
EDIT: Um das Event am besten nochmal eine Schleife setzen, weil das event nicht auf ein array gesetzt werden darf
Natürlich lässt sich das integrieren:
https://www.w3schools.com/js/js_whereto.asp
Vorsagen ist Mist. Am besten du liest dich einfach mal ein
Ich will jetzt nicht geiern, arrogant wirken, oder irgendwie dreist sein, aber kannst du das (natürlich nur wenn du willst) machen? Ich als unerfahrener Anwender mache es zu 99% falsch.
Will jetzt nicht ungern respektlos o.a. rüberkommen, kann es nur halt einfach nicht :(
Ne, sorry. Übung macht den Meister. Versuch dich selber dran und wenn es schief geht, schau dir die Fehlermeldung an und/oder Google danach. Wenn du es trotzdem nicht hinbekommst, meldest du dich wieder damit. Wer nicht Probiert, der ... Ach keine Ahnung, du weißt, aber was ich meine ... Ohne Fleiß, kein Preis
Habe es versucht, allerdings kann ich den Button immer noch nicht drücken, selbst wenn beide eingaben getätigt sind. Hier der geänderte code: https://pastebin.com/sgZnYakk
Weißt du, was ich da falsch gemacht haben könnte?
Zeile 4 gibt einen Array zurück, siehe meine Antwort. Baue da eine Schleife drum herum. https://google.com/search?q=JS+For+Schleife
Also muss ich eine Schleife um Zeile 4-12 machen, wenn ich das richtig verstanden habe?
12, ja, aber achtung. Das </script> natürlich nicht mit in die Schleife
puh, ich mache mich gerade mal schlau über schleifen und checke so gut wie gar nix. Die schleife ist dafür da, dass sich der teil die ganze zeit wiederholt, oder wofür? Und wie baut man eine solche, bin mit meinem Latein komplett am ende...
Sorry wenn ich nerve
Habe es glaube ich mit einer anderen Variante hinbekommen, funktioniert aber immernoch noch nicht. So kurz davor aufzugeben
Updated: https://pastebin.com/KmAT9Cny
Alternativ kannst du die JQuery anschauen, dann sparst du dir viel Arbeit, da jQuery vieles vereinfacht
Du prüfst in deinem Eventlistener schlicht, ob die Inputs gesetz sind, bevor du weiter agierst:
function my_listener(){
if(input1 == "Test" && input2 == "Tee"){
//Do stuff or call original Eventlistener
}else{
//Do nothing or maybe even stop Event-Bubbling
}
}
kann man das hier irgendwie integrieren?
<div class="section-out">
<section class="login-section">
<div class="login">
<form action="">
<ul class="ul-list">
<li><input type="text" required class="input" placeholder="Server Admin" /><span class="icon"><i class="fa fa-user"></i></span></li>
<li><input type="password" required class="input" placeholder="Server Password" /><span class="icon"><i class="fa fa-lock"></i></span></li>
<li><span class="remember"><input type="checkbox" id="check"> <label for="check">An mich erinnern</label></span><span class="remember"><a href=""></a></span></li>
<li><input type="submit" onclick="location.href = './dashboard.html'" value="ANMELDEN" class="enabledWhenFilled" disabled></li>
</ul>
</form>
</div>
</section>
An der Stelle nicht, aber im Head in einem "script"-Element sollte es gehen.
Die Inputs holst du dir am besten so, wie in der Antwort von FaTech beschrieben.
Habe es jetzt im head integriert, aber irgendwie funktioniert es trotzdem nicht, sondern der button bleibt unklickbar, selbst wenn alle eingaben getätigt sind...
Hier der aktualisierte code: https://pastebin.com/sgZnYakk
Sieht man dort irgendwelche Fehler, die ich nicht bemerkt habe?
Kein Wunder, die Eventlistener können so nicht gesetzt werden, das hat FaTech auch in seiner Antwort erklärt, wieso das nicht geht.
Zudem hast du hier noch das Problem, dass der Code evtl. ausgeführt wird, bevor das DOM geladen hat, also solltest du das setzen der Eventlistener in einem Listener für DOMonload packen:
function init(){
//Set Eventlisteners here
}
document.addEventListener("DOMContentLoaded", init);
P.S.: Ein Blick in die Browserkonsole kann helfen...
uff, ähm. Schwierig zu verstehen für einen code-noob
Ersteinmal zu dem teil, den ich dir hier noch gepostet habe:
Dein HTML-Dokument lädt. Evtl. wird das Script aber ausgeführt, bevor das Dokument fertig geladen hat. Dann kann es sein, dass dein Script die Elemente nicht findet, auf die es zugreifen möchte.
Mit dem hier geposteten Code kannst du warten, bis das Script geladen ist, bevor du z.B. die Registrierung der Eventlistener ausführst.
Zu dem, was FaTec schrieb:
"addEventListener" arbeitet auf einzelnen Elementen. "inputs" ist hier aber ein Array aus mehreren Elementen. Entsprechend musst du über den Array iterieren und für jedes Element daraus den Listener einzeln setzen.
Dann noch zur Browserkonsole: In Chrome und Firefox öffnest du diese mit F12.
Und ansonsten zum Unterschied vom Code von FaTech und mir: Mein Code wird nur beim Klick des Buttons ausgelöst, seiner bei jeder Änderung der Textfelder.
Zudem kann man in meiner Lösung leicht Bubbeling ausschalten.
Lässt sich das irgendwie hier integrieren?
https://pastebin.com/xzukLVEP
Bin sehr unerfahren, das ist das Problem