Alle inputs in einer Form finden

[Christian M.]

Hallo,

ich habe auf einer Seite zwei Formulare. Bevor das Formular abgesendet wird, wird mit 'onsubmit="return check_form()"' geprüft, ob auch alle Felder ausgefüllt wurden.
Zum Auffinden aller Textfelder habe ich bisher immer mit
document.getElementsByTagName("input");
gearbeitet. Allerdings tritt dann ein Fehler auf, wenn auf einer Seite (wie oben beschrieben) 2 Formulare vorhanden sind, weil er dann auch die Inputs des anderen Formulars prüft.

Kurz:
Wie kann ich alle inputs innerhalb meiner Form (anstatt des ganzen Dokuments) finden?
Unter http://de.selfhtml.org/javascript/objekte/forms.htm werden zwar schon verschiedene Varianten aufgezeigt, allerdings finde ich zu meinem Problem keine passende.
Deshalb hoffe ich, dass ihr mir weiterhelfen könnt. - evtl. stehe ich auch nur am Schlauch...

Danke.

Gruß,
Christian M.

[uwiworld]

hi,

also sowas hier in der art könnte dein problem lösen.
nur ausm kopf hingeschrieben.. ungetestet.

  
  // welches formular soll ausgelesen werden  
  var FORMY   = document.forms['mein_formular_1'];  
  var alle    = FORMY.length;  
  var i;  
  
  // ganze form durlaufen  
  for(i=0; i<alle; i++)  
     {  
       if( FORMY.elements[i].type == 'input' )  
          {  
            if( FORMY.elements[i].value == "" )  
                alert('feld nicht ausgefüllt');  
          }  
     }  

hoffe das hilft
uwi

uwiworld.net | phphotline.de

[hotti]

hi,

Wie kann ich alle inputs innerhalb meiner Form (anstatt des ganzen Dokuments) finden?

Es gibt mehrere Möglichkeiten, siehe SELFHTML. Eine der Möglichkeiten ist der Zugriff über das Name-Attribut des Forms, das musst Du also erst Deinem Formular vergeben.

Hotti

[Gunnar Bittersmann]

@@Christian M.:

nuqneH

Bevor das Formular abgesendet wird, wird mit 'onsubmit="return check_form()"' geprüft, ob auch alle Felder ausgefüllt wurden.

HTML5 bietet dafür @required, damit geht’s in modernen Browsern auch ohne JavaScript.

Für ältere Browser dann ein Script (bspw. Modernizr), das – wenn nötig – die Eingabefelder auf vorhandene @required-Attibute und ggfs. den Wert prüft.

Für Screenreader: @aria-required="true" [ALA]

Qapla'

[Felix Riesterer]

Liebe(r) Christian,

document.getElementsByTagName("input");
[...]
Wie kann ich alle inputs innerhalb meiner Form (anstatt des ganzen Dokuments) finden?

Du hast die Lösung fast selbst schon gegeben. Dein obiger Code verwendet das document-Objekt, von dem er eine Methode aufruft. Was Du wahrscheinlich noch nicht ganz verinnerlicht hast, ist der Umstand, dass die Methode mit dem Objekt, zu dem sie gehört, zwingend verbunden ist. Wenn Du document.methode() notierst, dann wird methode() im Kontext von document angewandt.

Interessanterweise kennt jedes HTML-Elementobjekt diese Methode! Du kannst also anstatt des document-Objektes auch das Elementobjekt Deines Formulars nehmen:

var myForm = document.getElementById("MeineFormularID");  
var zuPruefendeInputs = myForm.getElementsByTagName("input");

Wenn Du das im Rahmen eines onsubmit-Eventhandlers tust, dann ist die Referenz auf Dein Formular bereits im Schlüsselwort "this" enthalten. Folgende Funktion soll das zeigen (die Funktion selbst kann erst nach dem vollständigen Laden der Seite ausgeführt werden!):

function alleFormulareAusruesten () {  
    var i;  
  
    for (i = 0; i < document.forms.length; i++) {  
        document.forms[i].onsubmit = function (e) {  
            // "this" ist das <form>-Elementobjekt,  
            // in dem das onsubmit-Event aufgetreten ist.  
            var inputs = this.getElementsByTagName("input");  
  
            // prüfen  
  
            if (!ok) {  
                return false; // Fehler!  
            }  
        };  
}

Liebe Grüße,

Felix Riesterer.