JS FormFields überprüfen

martinfre

Hallo zusammen,

ich habe drei FormFields und möchte, per JS, überprüfen, ob in allen dreien etwas eingegeben wurde. Dann erst soll das SubmitField von disabled = true auf disabled = false gesetzt werden. Für ein(!) FormField bekomme ich dies hin. Ist dies für mehrere überhaupt möglich?

Ich weiss nämlich nicht, wie ich dies, von der Logik her, aufbauen müsste. Alle drei müssten ja die selbe JS Funktion aufrufen und dort müsste immer überprüft werden, ob von allen drei FormFields ein true kommt.

Ich hoffe ihr versteht was ich meine und es kann mir jmd weiter helfen

Danke schon mal im vorraus!

martinfre

Ich kann ja mal posten was ich bisher schon habe.

Der Funktionsaufruf:

Code

<input type="text" name="username" value="" class="form_field" style="margin-bottom:10px; width:200px;" onkeyup="add_user_check_length(this,'username');" />

Die Funktion:

Code

function add_user_check_length(text,field) {
    var lenght = text.value.length;
    if (lenght >= 1) {
        document.getElementById("add_user_submit").disabled = false;    
    } else {
        document.getElementById("add_user_submit").disabled = true;    
    }
}

Den String username übergebe ich nur aus Testzwecken.

Ich bräuchte halt nun für das nächste FormFiled wieder den Aufruf, mit einer anderen Übergabe:

Code

<input type="text" name="password" value="" class="form_field" style="margin-bottom:10px; width:200px;" onkeyup="add_user_check_length(this,'password');" />

Und dann müsste die Funktion etwas lauten:
Wenn username.length >= 1 und password.length >= 1
dann disabled = flase

Hat da vll jmd ne Idee?

synaptic

liegt vielleicht daran dass montag is.. aber wat???
ich hab da jetzt nur bahnhof verstanden...
erkläre bitte genauer was du willst

martinfre

Ich kann irgendwie nicht gut, in schriftlicher Form, Dinge erklären

Ich versuche es nochmal..

Ich habe ein Formular, mit drei Formularfeldern. Der Submit-Button soll erst klickbar sein, wenn in allen drei Formularfeldern etwas eingetragen wurde. Dies möchte ich, mit Hilfe von JS, lösen.

Für ein Formularfeld habe ich dies hinbekommen. Ich rufe in input die JS Funktion auf und sage dort:

Zitat

function add_user_check_length(text) {
var lenght = text.value.length;
if (lenght >= 1) {
document.getElementById("add_user_submit").disabled = false;
} else {
document.getElementById("add_user_submit").disabled = true;
}
}

Alles anzeigen

Sobald etwas eingetragen wird, wird disabled auf flase gesetzt und man kann den submit Button anklicken.

Kann man dies auf für mehrere Formularfelder realisieren?

synaptic

klar
du schreibst ne funktion mit nem parameter, dieser parameter soll dann die id eines form-elements übernehmen.
dann fragste einfach nur nach ob der value dieses objektes != "" ist.
am besten du schreibst von anfang an nen wert da rein als initialwert, prüfst dann auf leerstring und diesen initialwert und wenn beides nich auf das feld zutrifft, sollte ja was drinstehen.
is das der fall gibste als return nen true zurück!
dann kannste eine if-abfrage machen in der du die funktion mit übergabe der textfelder aufrufst.

ungefähr so sollte die if dann aussehn:

Code

if(watDrin('feld1') && watDrin('feld2') && watDrin('feld3') ){
    auszuführender code
}

martinfre

Ich verstehe was du meinst, weiss nur nicht wie ich dies umsetzen kann.
Ich habe einmal meine beiden FormFields:

Code

<input type="text" name="username" value="" class="form_field" onkeyup="add_user_check_length(this,'username');" /><br />


<input type="text" name="password" value="" class="form_field" onkeyup="add_user_check_length(this,'password');" />

Meine JS Funktion sieht so aus:

Zitat

function add_user_check_length(text,field) {
var lenght = text.value.length;
if (lenght >= 1) {
document.getElementById("add_user_submit").disabled = false;
} else {
document.getElementById("add_user_submit").disabled = true;
}
}

Alles anzeigen

Jedoch wird in dem Fall das SubmitField freigegeben, wenn in nur einem der Beiden FormFields etwas eingegeben wird.

Könntest du mir vll mit etwas Quellcode weiterhelfen?

synaptic

naja obwohl du nicht das gemacht hast, was ich empfohlen habe, sehe ich ja dass du wenigstens was in eigener verantwortung probiert hast

hier haste was du suchst

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<html>
<head>
    <title>Untitled</title>
</head>
<script type="text/javascript">
function checkLength(obj) {
var target = document.getElementById(obj);
var laenge = target.value.length;
    if(laenge>=1){
        return true;
    }
    else{
        return false;
     }
} 


function checkFields(feld1, feld2){
var sbtn = document.getElementById("add_user_submit");
    if(checkLength(feld1) && checkLength(feld2)){
        sbtn.disabled=false;
    }
    else{
        sbtn.disabled=true;
    }
}


</script>
<body>
<form>
<input type="text" name="username" id="username" value="" class="form_field" onkeyup="checkFields('username', 'password');" /><br />


<input type="text" name="password" id="password" value="" class="form_field" onkeyup="checkFields('username', 'password');" />


<input type="submit" id="add_user_submit" disabled="disabled" />
</form>
</body>
</html>

Alles anzeigen

Tags