Benrd: Formularwerte on the fly prüfen

Hallo!

Untenstehendes Script funktioniert prinzipiell, aber mit zwei Dingen habe ich noch Schwierigkeiten:

1.) Wenn keine Ganzzahl eingegeben wird, soll es ein Alert geben. Das tut es jetzt auch schon, aber es bricht dann nicht ab, sondern berechnet trotzdem den Wert.

2.) Ich werde sehr viele Formulare haben (ca. 50 Stück), nun soll aber immer das Ergebnis "erg" aus "Menge" * "Wert" von z.B. Form1 auch Form1 zugeordnet werden. Momentan wird (im Beispiel) bei Form2 nichts errechnet.

Der Code:

<head>
<script type="text/javascript">
<!--

function check(){

var menge = document.getElementById('menge').value;
  if(menge !== "7"){
 alert("nur zahlen");
 return;
  }

}

function calcSum() {

var preis = document.getElementById('preis').value;
  var menge = document.getElementById('menge').value;
  var erg =  preis * menge;

//document.form1.summe.value = erg;
  document.form1.summe.value = erg;
  document.getElementById('erg').innerHTML = erg;

}
//-->
</script>
</head>
<form name="form1">
<input type="hidden" id="preis" name="preis" value="33.23">
<input onKeyUp="check();calcSum();" type="text" id="menge" name="menge" value="" size="3"><span id="erg" name="erg"></span><br>
<input type="text" name="summe" value="0" readOnly><br>
</form>

<hr>

<form name="form2">
<input type="hidden" id="preis" name="preis" value="2">
<input onKeyUp="check();calcSum();" type="text" id="menge" name="menge" value="" size="3"><span id="erg" name="erg"></span><br>
<input type="text" name="summe" value="0" readOnly><br>
</form>

Vielen Dank!!

Bernd

  1. hi,

    1.) Wenn keine Ganzzahl eingegeben wird, soll es ein Alert geben. Das tut es jetzt auch schon, aber es bricht dann nicht ab, sondern berechnet trotzdem den Wert.

    Gebe aus der Funktion heraus true oder false zurück, je nach Ergebnis der Prüfung.

    2.) Ich werde sehr viele Formulare haben (ca. 50 Stück), nun soll aber immer das Ergebnis "erg" aus "Menge" * "Wert" von z.B. Form1 auch Form1 zugeordnet werden. Momentan wird (im Beispiel) bei Form2 nichts errechnet.

    Übergebe die referenz auf das "aufrufende" Feld (this) oder dessen Formular (this.form) als Parameter an die Funktion, und greife dann auf dessen Elemente zu.
    Oder übergebe den Formularnamen, und greife damit auf das Formular zu.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
  2. Untenstehendes Script funktioniert prinzipiell, aber mit zwei Dingen habe ich noch Schwierigkeiten:

    1.) Wenn keine Ganzzahl eingegeben wird, soll es ein Alert geben. Das tut es jetzt auch schon, aber es bricht dann nicht ab, sondern berechnet trotzdem den Wert.

    Wo soll denn was abbrechen? Du musst dafür sorgen, dass das passiert.

    2.) Ich werde sehr viele Formulare haben (ca. 50 Stück), nun soll aber immer das Ergebnis "erg" aus "Menge" * "Wert" von z.B. Form1 auch Form1 zugeordnet werden. Momentan wird (im Beispiel) bei Form2 nichts errechnet.

    Du verwendest IDs für deine Felder, dass ist in dem Falle ungünstig, es darf immer nur eine ID mit dem glechen Wert geben.
    Einfacher ist es mit name zu arbeiten, dann musst du einfach nur die Referenz auf das aktuelle Formular übergeben.

    function check(){

    var menge = document.getElementById('menge').value;
      if(menge !== "7"){
    alert("nur zahlen");
    return;
      }
    }

    Die Funktion ist ganz falsch. Auf Zahlen kannst mit Number isNaN oder durch Vergleich mit parseInt() oder parseFloat() testen, je nachdem was du erreichen willst.

    <form name="form1">
    <input type="hidden" id="preis" name="preis" value="33.23">
    <input onKeyUp="check();calcSum();" type="text" id="menge" name="menge" value="" size="3"><span id="erg" name="erg"></span><br>

    du kannst hier in den Eventhandler die Referenz auf das Formular übergeben.

    <input onkeyup="check(this.form);calcSum(this.form);" name="menge" value="" size="3">

    function calcSum(f)
    {

    var preis = f.preis.value;
      var menge = f.menge.value;
      var erg =  preis * menge;

    f.summe.value = erg;
      // Hier musst du dir was anderes überlegen.
      //document.getElementById('erg').innerHTML = erg;

    }

    Struppi.

    --
    Javascript ist toll (Perl auch!)
  3. moin Benrd :)

    Du hast da einige Fehler in deiner Lösung. Hab sie mal so umgeändert, dass sie funktioniert.

    1. Ids sollten nicht doppelt vorhanden sein. Schon gar nicht, wenn du versuchst mit getElementById auf Elemente zuzugreifen. Woher soll dein script denn wissen, ob du nun das erste oder zweite meinst ;)

    2. Wenn du eine Funktion in Abhängigkeit eines Wertes aufrufen möchtest - warum tust du das nicht direkt in der If-Verzweigung?

    3. Wenn du den Ids Eindeutigkeit verleihst, indem du ihnen Nummern gibst, kannst du deine Funktionen auch super mit der entsprechenden Nummer aufrufen und sie wissen, welche Elemente sie gerade ansprechen sollen.

    <script type="text/javascript">
    <!--

      
    function check(form){  
      var menge = document.getElementById('menge'+form).value;  
    //Ich nehme an, du willst nicht nur auf "7" prüfen sondern auf numerischen Wert  
    //Falls es doch die 7 sein soll - überdenke zwingend deine Fehlermeldung ;)  
      if(isNaN(menge)){  
       alert("nur zahlen");  
      }  
      else{  
    //Aufruf der Berechnungsfunktion - nur wenn es sich um eine Zahl handelt  
        calcSum(form);  
      }  
    }  
      
    function calcSum(form) {  
      //Die Berechnungsform kennt die Formularnummer und spricht die jetzt eindeutigen Elemente damit an  
      var preis = document.getElementById('preis'+form).value;  
      var menge = document.getElementById('menge'+form).value;  
      var erg =  preis * menge;  
      document.forms[form].summe.value = erg;  
      document.getElementById('erg'+form).innerHTML = erg;  
      
    }  
    
    

    //-->
    </script>

      
    </head>  
    <form name="form1">  
    <input type="hidden" id="preis0" name="preis" value="33.23">  
    <!-- nur die Funktion check aufrufen... sie übernimmt den Rest-->  
    <input onKeyUp="check(0);" type="text" id="menge0" name="menge" value="" size="3"><span id="erg0" name="erg"></span><br>  
    <input type="text" name="summe" value="0" readOnly><br>  
    </form>  
      
    <hr>  
      
    <form name="form2">  
    <input type="hidden" id="preis1" name="preis" value="2">  
    <!-- Funktion check aufrufen - als Parameter übergibst du die Nummer des Formulars-->  
    <input onKeyUp="check(1);" type="text" id="menge0" name="menge" value="" size="3"><span id="erg1" name="erg"></span><br>  
    <input type="text" name="summe" value="0" readOnly><br>  
    </form>  
    
    

    liebe Grüße aus Berlin
    lina-

    --
    Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)
    1. Vielen Dank,

      Ihr seid echt klasse!!!

      (Vor allem trägt das wieder mal zum besseren Verständnis v. javascript bei)

      Gruß,

      Benrd

      <script type="text/javascript">
      <!--
      function check(form){
        var menge = document.getElementById('menge'+form).value;
      //Ich nehme an, du willst nicht nur auf "7" prüfen sondern auf numerischen Wert
      //Falls es doch die 7 sein soll - überdenke zwingend deine Fehlermeldung ;)
        if(isNaN(menge)){
         alert("nur zahlen");
        }
        else{
      //Aufruf der Berechnungsfunktion - nur wenn es sich um eine Zahl handelt
          calcSum(form);
        }
      }

      function calcSum(form) {
        //Die Berechnungsform kennt die Formularnummer und spricht die jetzt eindeutigen Elemente damit an
        var preis = document.getElementById('preis'+form).value;
        var menge = document.getElementById('menge'+form).value;
        var erg =  preis * menge;
        document.forms[form].summe.value = erg;
        document.getElementById('erg'+form).innerHTML = erg;

      }

      //-->
      </script>
      </head>
      <form name="form1">
      <input type="hidden" id="preis0" name="preis0" value="33.23">
      <!-- nur die Funktion check aufrufen... sie übernimmt den Rest-->
      <input onKeyUp="check(0);" type="text" id="menge0" name="menge0" value="" size="3"><span id="erg0" name="erg"></span><br>
      <input type="text" name="summe" value="0" readOnly><br>
      </form>

      <hr>

      <form name="form2">
      <input type="hidden" id="preis1" name="preis1" value="2">
      <!-- Funktion check aufrufen - als Parameter übergibst du die Nummer des Formulars-->
      <input onKeyUp="check(1);" type="text" id="menge1" name="menge1" value="" size="3"><span id="erg1" name="erg"></span><br>
      <input type="text" name="summe" value="0" readOnly><br>
      </form>

      1. habe noch was vergessen: in linas Korrektur befand sich in "form2" noch ein kleiner Fehlerteufel, deshalb habe ich das Script nochmals gepostet.

      2. Ihr seid echt klasse!!!

        (Vor allem trägt das wieder mal zum besseren Verständnis v. javascript bei)

        Du willst wirklich den umständlichsten Vorschlag nehmen?

        Struppi.

        --
        Javascript ist toll (Perl auch!)
      1. Wenn du den Ids Eindeutigkeit verleihst, indem du ihnen Nummern gibst, kannst du deine Funktionen auch super mit der entsprechenden Nummer aufrufen und sie wissen, welche Elemente sie gerade ansprechen sollen.

      Wenn du die Funktion, mit der Formulareferenz aufrufst, brauchst du noch nicht mal mehr eine ID und kannst die Elemente mit ihren Namen ansprechen.

      Struppi.

      --
      Javascript ist toll (Perl auch!)