rab3: onsubmit mit zwei Funktionen

Hi, ich habe schon wieder ein Problem mit JS:

Ich habe ein Formular, das aus einem Feld besteht, in dem man eine Altersangabe machen soll.
Diese Angabe wird dann auf eine andere Seite weitergeschickt (im gleichen Frame).
Davor will ich aber überprüfen, dass in dem Feld auch wirklich nur eine Zahl steht.

Dazu habe ich mir folgendes Script zusammengebastelt (alles in html):

<html lang="de">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<title>Test</title>  
<script type="text/javascript">  
function chkFormular ()  
{  
var chkZ = 1;  
for (i = 0; i < document.forms.formular.elements.jah.value.length; ++i)  
if (document.forms.formular.elements.jah.value.charAt(i) < "0" ||  
document.forms.formular.elements.jah.value.charAt(i) > "9")  
chkZ = -1;  
if (chkZ == -1) {  
alert("Bitte geben Sie eine Zahl an!");  
document.forms.formular.elements.jah.focus();  
return false;  
}  
}  
function uebergabe () {  
parent.jahl = document.forms.formular.elements.jah.value;  
location.href = "jahr2.html";  
return false;  
}  
</script></head>  
<body style="color: rgb(255, 255, 0); background-color: rgb(0, 0, 85);"  
 alink="#ff9900" link="#ffcc33" vlink="#ff6600">  
<div style="text-align: center; font-family: Helvetica,Arial,sans-serif;">  
<form name="formular" action="" onsubmit="?????">  
<p>Geben Sie Ihr Alter ein:</p>  
<p><label for="jah">Alter:</label>  
<input name="jah" id="jah" size="10" type="text"></p>  
<p><input value="Weiter &gt;" type="submit"></p>  
</form><br>  
</div>  
</body>  
</html>

Ich weiß nicht, was ich hinter das onsubmit schreiben muss.

Nochmal kurz, falls es oben nicht richtig angekommen ist:
Das Formular soll nur, wenn chkFormular() es "zulässt", das Alter an die nächste Seite weiterleiten.

Muss ich da noch irgendwas mit "if..." im <head>-Tag einbauen?

Wie ihr seht, habe ich leider (immer noch) keine Ahnung von JS, ich hoffe, dass ich bald mal dazukomme, mich da reinzuarbeiten...

Vielen Dank!

  1. Liebe(r) rab3,

    Dein Code liest sich ohne Einrückungen extrem schwer! Ich korrigiere das einmal für Dich, da Du offensichtlich noch ein Anfänger bist.

    <html lang="de">  
        <head>  
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
            <title>Test</title>  
            <script type="text/javascript">
    
            function chkFormular () {  
                var chkZ = 1;  
                for (i = 0; i < document.forms.formular.elements.jah.value.length; ++i) {  
                    if (  
                        document.forms.formular.elements.jah.value.charAt(i) < "0" ||  
                        document.forms.formular.elements.jah.value.charAt(i) > "9"  
                    ) {  
                        chkZ = -1;  
                    }  
                }  
      
                if (chkZ == -1) {  
                    alert("Bitte geben Sie eine Zahl an!");  
                    document.forms.formular.elements.jah.focus();  
                    return false;  
                }  
            }  
      
            function uebergabe () {  
                parent.jahl = document.forms.formular.elements.jah.value;  
                location.href = "jahr2.html";  
                return false;  
            }
    
            </script>  
        </head>  
        <body style="color: rgb(255, 255, 0); background-color: rgb(0, 0, 85);" alink="#ff9900" link="#ffcc33" vlink="#ff6600">  
            <div style="text-align: center; font-family: Helvetica,Arial,sans-serif;">  
                <form name="formular" action="" onsubmit="?????">  
                    <p>Geben Sie Ihr Alter ein:</p>  
                    <p><label for="jah">Alter:</label> <input name="jah" id="jah" size="10" type="text"></p>  
                    <p><input value="Weiter &gt;" type="submit"></p>  
                </form>  
                <br>  
            </div>  
        </body>  
    </html>
    

    So. Schon besser. Und jetzt entrümpele ich das Ding auf genau das, was wir zur Fehleranalyse wirklich brauchen:

    <html lang="de">  
        <head>  
            <title>Test</title>  
            <script type="text/javascript">
    
            function chkFormular () {  
                var chkZ = 1;  
                for (i = 0; i < document.forms.formular.elements.jah.value.length; ++i) {  
                    if (  
                        document.forms.formular.elements.jah.value.charAt(i) < "0" ||  
                        document.forms.formular.elements.jah.value.charAt(i) > "9"  
                    ) {  
                        chkZ = -1;  
                    }  
                }  
      
                if (chkZ == -1) {  
                    alert("Bitte geben Sie eine Zahl an!");  
                    document.forms.formular.elements.jah.focus();  
                    return false;  
                }  
            }  
      
            function uebergabe () {  
                parent.jahl = document.forms.formular.elements.jah.value;  
                location.href = "jahr2.html";  
                return false;  
            }
    
            </script>  
        </head>  
        <body>  
             <form name="formular" action="" onsubmit="?????">  
                <p><label for="jah">Alter:</label> <input name="jah" id="jah" size="10" type="text"></p>  
                <p><input value="Weiter &gt;" type="submit"></p>  
            </form>  
        </body>  
    </html>
    

    Dazu habe ich mir folgendes Script zusammengebastelt (alles in html):

    Nein, Du hast in Deinem HTML-Dokument einen JavaScript-Bereich notiert, in welchem in JavaScript Anweisungen (Funktionen) notiert sind. Aber das ist nur spitzfindig von mir...

    Das Formular soll nur, wenn chkFormular() es "zulässt", das Alter an die nächste Seite weiterleiten.

    Na, dann schauen wir doch eimal, was Du bisher erreicht hast:

    1.) Du hast ein Formular notiert, das keine Ziel-Angabe (action-Attribut) enthält.
        Der Browser wird raten müssen, wohin die Informationen gesendet werden sollen.
        Und deshalb wird er sie an das HTML-Dokument zurück schicken (siehe neue URL).
    2.) Du hast Funktionen notiert, die nirgendwo aufgerufen werden.
    3.) Du hast im onsubmit-Attribut ungültigen JavaScript-Code notiert, was zu einer Fehlermeldung im Browser führt!

    Was man in so einen Eventhandler eintragen kann, <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onsubmit@title=steht doch in SELFHTML>!

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Hallo,

      Dein Code liest sich ohne Einrückungen extrem schwer! Ich korrigiere das einmal für Dich, da Du offensichtlich noch ein Anfänger bist.

      Ja, danke.

      Dazu habe ich mir folgendes Script zusammengebastelt (alles in html):

      Nein, Du hast in Deinem HTML-Dokument einen JavaScript-Bereich notiert, in welchem in JavaScript Anweisungen (Funktionen) notiert sind. Aber das ist nur spitzfindig von mir...

      Ok, ich wollte damit ja nur sagen, dass ich kein PHP o.ä. benutze.

      Das Formular soll nur, wenn chkFormular() es "zulässt", das Alter an die nächste Seite weiterleiten.

      Na, dann schauen wir doch eimal, was Du bisher erreicht hast:

      1.) Du hast ein Formular notiert, das keine Ziel-Angabe (action-Attribut) enthält.
          Der Browser wird raten müssen, wohin die Informationen gesendet werden sollen.
          Und deshalb wird er sie an das HTML-Dokument zurück schicken (siehe neue URL).

      Klar hat es keine Ziel-Angabe, da das Formular selbst nichts tun soll.
      Es sollte nur über die Funktion uebergabe() bei onsubmit das Alter an die Seite jahr2.html übergeben.
      Das funktioniert auch super (dann heißt es eben onsubmit="return uebergabe();" )

      2.) Du hast Funktionen notiert, die nirgendwo aufgerufen werden.

      Weil ich nicht weiß, wie ich sie aufrufen muss.
      Sinn der Funktionen ist natürlich, sie durch onsubmit auszulösen, aber eben in der oben genannten Reihenfolge.

      3.) Du hast im onsubmit-Attribut ungültigen JavaScript-Code notiert, was zu einer Fehlermeldung im Browser führt!

      Dass "????" kein JS-Code ist, habe sogar ich verstanden. Da ich aber nicht weiß, was ich da hinschreiben muss, habe ich einfach mal die Fragezeichen als Platzhalter reingeschrieben.
      Wenn ich eine der Funktionen einzeln reinschreibe, funktioniert diese perfekt.

      Dass die Fragezeichen nur als Platzhalter dienen sollten und nicht von mir ernsthaft so von mir als funktionierend gehalten werden, wollte ich eigentlich noch drunterschreiben, habe ich dann aber wohl doch in meiner Müdigkeit gestern vergessen...

      Was man in so einen Eventhandler eintragen kann, <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onsubmit@title=steht doch in SELFHTML>!

      Ja schon, aber ich finde dort nicht, wie das mit zwei Funktionen geht.

      Liebe Grüße aus Ellwangen,

      Felix Riesterer.

      Danke schonmal und ebenfalls schöne Grüße, rab

      1. Hi,

        Das funktioniert auch super (dann heißt es eben onsubmit="return uebergabe();" )

        Das ist wohl die bessere Methode, da man so das Formular auch mit abgeschaltetem JS abschicken kann.

        Sinn der Funktionen ist natürlich, sie durch onsubmit auszulösen, aber eben in der oben genannten Reihenfolge.

        Ja schon, aber ich finde dort nicht, wie das mit zwei Funktionen geht.

        Du kannst dir eine neue Funktion definieren, die dann die beiden anderen Funktionen aufruft. Diese kannst du dann mit onsubmit=" return neueFunktion()" aufrufen.

        Wobei du die Funktion mit location.href eh vermeiden solltest und lieber den return-Wert auswerten.

        Das sieht dann so aus (Pseudocode):
        function checkFunktion()
        {
          if(allesKorrekt)
          {
            return true;
          }
          else
          {
            ausgabe was falsch ist (am einfachsten mit alert('fehler bei ...')
            return false;
          }
        }

        Wenn du das dann mit onsubmit="return checkFunktion()" aufrufst wird das Formular nur abgeschickt, wenn true zurückgegeben wurde.

        mfG,
        steckl

        1. Hi,

          Du kannst dir eine neue Funktion definieren, die dann die beiden anderen Funktionen aufruft. Diese kannst du dann mit onsubmit=" return neueFunktion()" aufrufen.

          Und wie "verbinde" ich zwei Funktionen in einer?

          Wobei du die Funktion mit location.href eh vermeiden solltest und lieber den return-Wert auswerten.

          Das sieht dann so aus (Pseudocode):

          Kommt die Funktion in den <head>, oder?

          function checkFunktion()
          {
            if(allesKorrekt)

          Was muss ich da statt "allesKorrekt" schreiben?

          {
              return true;
            }
            else
            {
              ausgabe was falsch ist (am einfachsten mit alert('fehler bei ...')

          also z.B. "alert("Bitte geben Sie eine Zahl an!")", oder?

          return false;
            }
          }

          Wenn du das dann mit onsubmit="return checkFunktion()" aufrufst wird das Formular nur abgeschickt, wenn true zurückgegeben wurde.

          Aber mein Formular sendet die Daten ja durch die oben stehende uebergabe()-Funktion. Wie geht das dann in dieser Methode?
          Nochmal zur Erklärung: Das Formular soll nur das Alter (das nur eine Zahl sein darf) auf die nächste Seite (jahr2) im gleichen Frame weitergeben, mehr nicht.

          PS: Was mir noch gerade eingefallen ist: Die User dürfen auch keine "0" an erster Stelle haben (also z.B. nicht 025). Kann ich das auch mit JavaScript kontrollieren?

          Vielen Dank

          1. Hi,

            Hi,

            Du kannst dir eine neue Funktion definieren, die dann die beiden anderen Funktionen aufruft. Diese kannst du dann mit onsubmit=" return neueFunktion()" aufrufen.
            Und wie "verbinde" ich zwei Funktionen in einer?

            function pr1()
            {
            alert(1);
            }

            function pr2()
            {
            alert(2)
            }

            function ueberPr()
            {
            pr1();
            pr2();
            }

            Wenn du jetzt ueberPr() aufrufst werden pr1() und pr2() aufgerufen.

            Wobei du die Funktion mit location.href eh vermeiden solltest und lieber den return-Wert auswerten.

            Das sieht dann so aus (Pseudocode):
            Kommt die Funktion in den <head>, oder?

            Ja, zum Beispiel.

            function checkFunktion()
            {
              if(allesKorrekt)
            Was muss ich da statt "allesKorrekt" schreiben?

            In deinem Fall die Funktion, die Prüft ob die Eingabe richtig war. also: if(chkFormular())
            Diese Bedingung ist dann erfüllt, wenn chkFormular() true zurück gibt.

            {
                return true;
              }
              else
              {
                ausgabe was falsch ist (am einfachsten mit alert('fehler bei ...')
            also z.B. "alert("Bitte geben Sie eine Zahl an!")", oder?

            Ja

            return false;
              }
            }

            Wenn du das dann mit onsubmit="return checkFunktion()" aufrufst wird das Formular nur abgeschickt, wenn true zurückgegeben wurde.
            Aber mein Formular sendet die Daten ja durch die oben stehende uebergabe()-Funktion. Wie geht das dann in dieser Methode?
            Nochmal zur Erklärung: Das Formular soll nur das Alter (das nur eine Zahl sein darf) auf die nächste Seite (jahr2) im gleichen Frame weitergeben, mehr nicht.

            Deine Methode sendet den Wert an den Eltern-Frame, nicht aber an die Seite die anschließend aufgerufen wird.
            Wenn du das Formular ganz normal senden lässt (ohne davor location.href zu ändern) sendet es alle Formularwerte an die Seite, die du bei action angegeben hast.
            Folgendes sendet den Wert von alter an jahr2.html, wenn checkFunction() true zurück-gibt und die aktuelle Seite nicht verändert:

            <form action="jahr2.html" onsubmit="return checkFunktion()">
            <input type="text" name="alter">
            </form>

            PS: Was mir noch gerade eingefallen ist: Die User dürfen auch keine "0" an erster Stelle haben (also z.B. nicht 025). Kann ich das auch mit JavaScript kontrollieren?

            Du könntest mit isNaN() überprüfen, ob es sich um eine Zahl handelt und dann mit parseInt die Zahl in eine Ganzzahl umwandeln. Wenn der User dann 012.25 eingibt wird das dann in 12 umgewandelt.

            mfG,
            steckl

            1. Du kannst dir eine neue Funktion definieren, die dann die beiden anderen Funktionen aufruft. Diese kannst du dann mit onsubmit=" return neueFunktion()" aufrufen.
              Und wie "verbinde" ich zwei Funktionen in einer?

              function pr1()
              {
              alert(1);
              }

              function pr2()
              {
              alert(2)
              }

              function ueberPr()
              {
              pr1();
              pr2();
              }

              Wenn du jetzt ueberPr() aufrufst werden pr1() und pr2() aufgerufen.

              Ich habe das mal versucht:

              function ChkUeber ()
              {
              chkFormular();
              uebergabe();
              }

              dann onsubmit="return ChkUeber();" , aber es funktioniert wieder nur die erste Funktion, also in diesem Fall die chkFormular(), es wird aber nichts weitergegeben.

              Nochmal zur Erklärung: Das Formular soll nur das Alter (das nur eine Zahl sein darf) auf die nächste Seite (jahr2) im gleichen Frame weitergeben, mehr nicht.

              Deine Methode sendet den Wert an den Eltern-Frame, nicht aber an die Seite die anschließend aufgerufen wird.

              Aaahh, ich verstehe es langsam... ;)

              Wenn du das Formular ganz normal senden lässt (ohne davor location.href zu ändern) sendet es alle Formularwerte an die Seite, die du bei action angegeben hast.
              Folgendes sendet den Wert von alter an jahr2.html, wenn checkFunction() true zurück-gibt und die aktuelle Seite nicht verändert:

              <form action="jahr2.html" onsubmit="return checkFunktion()">
              <input type="text" name="alter">
              </form>

              Und wie "empfange" ich dann auf jahr2.html die Werte, kann ich da einfach die Variablen benutzen?

              PS: Was mir noch gerade eingefallen ist: Die User dürfen auch keine "0" an erster Stelle haben (also z.B. nicht 025). Kann ich das auch mit JavaScript kontrollieren?

              Du könntest mit isNaN() überprüfen, ob es sich um eine Zahl handelt und dann mit parseInt die Zahl in eine Ganzzahl umwandeln. Wenn der User dann 012.25 eingibt wird das dann in 12 umgewandelt.

              Klingt schonmal gut, versuche ich dann.

              mfG,
              steckl

              Danke, ebenfalls

              1. Hi,

                function ChkUeber ()
                {
                chkFormular();
                uebergabe();
                }

                dann onsubmit="return ChkUeber();" , aber es funktioniert wieder nur die erste Funktion, also in diesem Fall die chkFormular(), es wird aber nichts weitergegeben.

                Was heißt es funktioniert, bzw. es funktioniert nicht?
                ab location.href wird die Seite neu geladen und es kann sein, dass das restliche Script nichtmehr abgearbeitet wird.
                Das return vor ChkUeber macht nur sinn, wenn ChkUeber true und false zurückgeben kann. Dann wird das Formular nur abgeschickt, wenn true zurückgegeben wird (oder JS deaktiviert ist).

                Deine Methode sendet den Wert an den Eltern-Frame, nicht aber an die Seite die anschließend aufgerufen wird.
                Aaahh, ich verstehe es langsam... ;)

                Du solltest eigentlich schon verstehen, was dein eigener Code macht.

                Und wie "empfange" ich dann auf jahr2.html die Werte, kann ich da einfach die Variablen benutzen?

                Nein, das ist etwas komplizierter.
                Am besten wäre es mit einer serverseitigen Sprache wie Perl, PHP, ... aber wenn das Formular per GET (was Standard ist) abgeschickt wird, werden die Formular-Werte an die URL gehängt und du kannst sie auch mit JS von der nächsten Seite aus wieder auslesen.

                mfG,
                steckl

                1. Hi,

                  Problem gelöst, siehe ganz unten!

                  function ChkUeber ()
                  {
                  chkFormular();
                  uebergabe();
                  }

                  dann onsubmit="return ChkUeber();" , aber es funktioniert wieder nur die erste Funktion, also in diesem Fall die chkFormular(), es wird aber nichts weitergegeben.

                  Was heißt es funktioniert, bzw. es funktioniert nicht?

                  Ich hätte besser "wird ausgeführt" schreiben sollen, das meinte ich.

                  Deine Methode sendet den Wert an den Eltern-Frame, nicht aber an die Seite die anschließend aufgerufen wird.
                  Aaahh, ich verstehe es langsam... ;)

                  Du solltest eigentlich schon verstehen, was dein eigener Code macht.

                  Ja, das ist klar, ich dachte auch, dass ich es verstehen würde, aber ich habs wohl falsch verstanden...

                  Und wie "empfange" ich dann auf jahr2.html die Werte, kann ich da einfach die Variablen benutzen?

                  Nein, das ist etwas komplizierter.
                  Am besten wäre es mit einer serverseitigen Sprache wie Perl, PHP, ...

                  steht mir leider nicht zur Verfügung.

                  aber wenn das Formular per GET (was Standard ist) abgeschickt wird, werden die Formular-Werte an die URL gehängt und du kannst sie auch mit JS von der nächsten Seite aus wieder auslesen.

                  Das war die rettende Idee!
                  So habe ichs gemacht, funktioniert perfekt.

                  Dann habe ich noch parseInt eingebaut, jetzt ist es genau so, wie ich es wolte!!

                  Vielen Dank, du hast mir mal wieder aus der Klemme geholfen :)

              2. Wenn du jetzt ueberPr() aufrufst werden pr1() und pr2() aufgerufen.
                Ich habe das mal versucht:

                function ChkUeber ()
                {
                chkFormular();
                uebergabe();
                }

                dann onsubmit="return ChkUeber();" , aber es funktioniert wieder nur die erste Funktion, also in diesem Fall die chkFormular(), es wird aber nichts weitergegeben.

                Du musst in der Funktion auch die beiden Rückgabewerte kombinieren:
                return chkFormular() && uebergabe();

                Struppi.