Tutorial Formular mit automatischer Addition der Artikel-Werte

Ich habe dieses Formular mit dem Formular-Generator von Webbausteine.de erstellt und das Skript von Webbausteine.de an mein Formular angepasst.

Bitte fügt diese JavaScript-Funktion in die HTML Eurer Seite ein, beachtet dabei die Feldnamen und den Namen des Formulars.

> Layout markieren > Fenster “Layout-Eigenschaften” > “Zwischen Head Tags

<script>
    // Zahlen automatisch addieren
    function zaehler() {
       var WertA = document.Form.artikel_1.value;
       var WertB = document.Form.artikel_2.value;
       var WertC = document.Form.artikel_3.value;
       document.Form.summe.value=WertA*1 + WertB*1 + WertC*1;
    }
</script>

Nun habe ich lediglich den Typ der Felder, die ich bereits mit dem Formular-Generator angelegt hatte, mit den entsprechenden HTML5-Attributen auf ‘number’ gesetzt und mit dem Event ‘onChange’ auf die Funktion ‘zaehler();’ aus dem JavaScript (oben) verwiesen. Das Feld ‘summe’ habe ich auf ‘readonly’ gesetzt, damit man dort keine Eingaben machen kann. Natürlich könnte man die Werte auch multiplizieren, dividieren oder subtrahieren.

<p>
 <label> Artikel 1 (0-10):
<br>
  <input type='number' placeholder='Zahl von 0-10' required min='0' max='10' name='artikel_1' value='" . $artikel_1 . "' size='20' onChange='zaehler();'>
 </label>
</p>

<p>
 <label> Artikel 2 (0-8):
<br>
  <input type='number' placeholder='Zahl von 0-8' required min='0' max='8' name='artikel_2' value='" . $artikel_2 . "' size='20' onChange='zaehler();'>
 </label>
</p>

<p>
 <label> Artikel 3 (0-3):
<br>
  <input type='number' placeholder='Zahl von 0-3' required min='0' max='3' name='artikel_3' value='" . $artikel_3 . "' size='20' onChange='zaehler();'>
 </label>
</p>

<p>
 <label> Summe:
<br>
  <input id=’summe’ type='number' placeholder='0' readonly name='summe' value='" . $summe . "' size='20'>
 </label>
</p>

CSS vom Formular > in die HTML vom Layout > “Zwischen Head Tags”:

<style>
  span.pflichtfeld {
   font-size: 12px;
   color: Red;
  }

  span.hilfetext {
   font-size: 10px;
   font-style: Oblique;
  }

  blockquote {
   width: 385px;
   color: blue;
  }
 
  #summe {
   background-color: #f5f5f5;
  }
 
  input[type="number"] {
   width:145px;
  }
</style>

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik