✔ Berechnungsscript

W

weedo

Erfahrenes Mitglied
Hallo,

ich suche nach einem Script, was mir bei Eingabe einer Stückzahl sofort ausrechnet, was ich an Rabatte gebe und diese hinter einer Radiobox schreibt.

Mir fehlt leider komplett die Idee, wie ich an so ein Script rangehe.

Ich präsentiere zur Verständigung mal genau was ich meine:

Code: 
<tr>
  <td>Anzahl: <input type=\"text\" name=\"anzahl\" style=\"width:35px\"/></td>
</tr>

Hier wird die anzahl eingegeben.

Code: 
<td>
  <input type=\"radio\" name=\"druckart\" value=\"1farbig\"/> Einfarbig <i>(+ 5 €)</i><br>
  <input type=\"radio\" name=\"druckart\" value=\"2farbig\"/> Zweifarbig <i>(+ 10 €)</i><br>
  <input type=\"radio\" name=\"druckart\" value=\"3farbig\"/> Dreifarbig <i>(+ 15 €)</i>
</td>

Hier sollen anstatt dann 5, 10 und 15 dann die dynamischen zahlen stehen.

Wie kann ich sowas realisieren?
 
Moin,

Überwache den onclick-Event der TD.
Tritt er ein, durchlaufe alle Inputs innerhalb der <td> in einer Schleife.
Ist das aktuelle Input "checked", kannst du dem passenden <i>-Element den gewünschten Inhalt geben, andernfalls entfernst du den Inhalt daraus.

Um den passenden Rabatt zum Input zu erhalten, könntest du den Wert bspw. im Title-Attribut des <i> vermerken.

Den Zugriff in der Schleife auf <input> und <i> kannst du bequem per getElementsByTagName() bewerkstelligen :)

Falls du nicht weiterkommst, sag Bescheid :)
 
Naja mein Problem ist, dass ich nicht sonderlich viel Erfahrung mit Javascript habe.

Als erstes würde ich halt schonmal gerne wissen, wie ich die informationen aus dem Eingabefeld auslese, ohne die Seite neu laden zu müssen.

Ich habe mir das so gedacht. Der Benutzer gibt seine Stückzahl in das Eingabefeld und klickt auf einen Button. Dann rechnet das Script automatisch aus, was für Druckkosten er hat.

Z.B.: Ich bestelle 250 stück, dann habe ich Druckkosten von 3,50€ für einen einfachen, 4,50€ für einen zweifarbigen und 5,50€ für einen dreifachen. Das soll halt direkt angezeigt werden.

Ich hab einfach gerade mal etwas rumgespielt, jedoch funktioniert es wie erwartet nicht.

Code: 
<script type="text/javascript">
function calc_druckpreis()
  var calc_zahl = document.Form1.anzahl.value;
  if(calc_zahl > 250) {
    var einfarbig = 5;
    var zweifarbig = 10;
    var dreifarbig = 15;
  }
  if(calc_zahl < 250) {
    var einfarbig = 15;
    var zweifarbig = 110;
    var dreifarbig = 115;
  }
 }
</script>
<?
print "<form name=\"form1\">
<table>
  <tr>
    <td>Anzahl: <input type=\"text\" name=\"anzahl\" /><input type=\"button\" value=\"berechnen\" onClick=\"calc_druckpreis()\" /></td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>
            <input type=\"radio\" name=\"druckart\" value=\"1farbig\"/> Einfarbig <i>(+ <script type=\"text/javascript\">document.write(einfarbig);</script> €)</i><br>
            <input type=\"radio\" name=\"druckart\" value=\"2farbig\"/> Zweifarbig <i>(+ <script type=\"text/javascript\">document.write(zweifarbig);</script> €)</i><br>
            <input type=\"radio\" name=\"druckart\" value=\"3farbig\"/> Dreifarbig <i>(+ <script type=\"text/javascript\">document.write(dreifarbig);</script> €)</i>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</form>";

?>
 
ich bin mitlerweile soweit, dass ich die funktion aufrufe, variablen lokal gespeichert bekomme und innerhalb der funktion verarbeiten kann. aber ich will die ja an einem ganz anderen punkt ausgeben....da hänge ich momentan noch :/

wie gibt man den variablen, die man in einer funktion gespeichert hat aus?
 
Zuletzt bearbeitet:
Super!

Danke für deine Hilfe. Ich hab das Script komplett erstellt, getestet und es funktioniert ;).

Hier ist meine Lösung für alle die das gleiche brauchen:
(Bitte beachten, dass es in eine Phpdatei eingebaut ist und deshalb der htmlcode in php geschrieben ist)

JS Teil:
Code: 
<html>
<head>
</head>
<body>
<script type="text/javascript">
var einfarbig = 10;
var zweifarbig = 15;
var dreifarbig = 20;
function calc_druckpreis() {
  var anzahl_post = document.form1.anzahl.value;
  if(anzahl_post <= 250) {
    var einfarbig = 15;
    var zweifarbig = 20;
    var dreifarbig = 25;
    document.all.einfarbig.innerHTML = einfarbig;
    document.all.zweifarbig.innerHTML = zweifarbig;
    document.all.dreifarbig.innerHTML = dreifarbig;
  }
  if(anzahl_post >= 250) {
    var einfarbig = 10;
    var zweifarbig = 15;
    var dreifarbig = 20;
    document.all.einfarbig.innerHTML = einfarbig;
    document.all.zweifarbig.innerHTML = zweifarbig;
    document.all.dreifarbig.innerHTML = dreifarbig;
  }
  if(anzahl_post >= 500) {
    var einfarbig = 5;
    var zweifarbig = 10;
    var dreifarbig = 15;
    document.all.einfarbig.innerHTML = einfarbig;
    document.all.zweifarbig.innerHTML = zweifarbig;
    document.all.dreifarbig.innerHTML = dreifarbig;
  }
}
</script>

Tabelle:
PHP: 
<?
print "<form name=\"form1\">
<table>
  <tr>
    <td>Anzahl: <input type=\"text\" name=\"anzahl\" /><input type=\"button\" value=\"berechnen\" onClick=\"calc_druckpreis()\" /></td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>
            <input type=\"radio\" name=\"druckart\" value=\"1farbig\"/> Einfarbig <i>(+ <span id=\"einfarbig\">10</span> €)</i><br>
            <input type=\"radio\" name=\"druckart\" value=\"2farbig\"/> Zweifarbig <i>(+ <span id=\"zweifarbig\">15</span> €)</i><br>
            <input type=\"radio\" name=\"druckart\" value=\"3farbig\"/> Dreifarbig <i>(+ <span id=\"dreifarbig\">20</span> €)</i>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</form></body></html>";

?>

lg weedo
 
klar :) so hab ich mir php auch beigebracht...nur das problem ist, dass wenn man die funktionen nicht kennt, man ja nicht weiß wie man damit arbeitet
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück