# Variablen addieren und Ergebnis automatisch in einem Textfeld anzeigen lassen



## hanna765 (17. März 2014)

Hallo, ich möchte 2 Variablen die aus einer Dropdown Liste übergeben werden addieren, und das Ergebnis in einem Textfeld anzeigen lassen.

Dazu habe ich folgenden Code erstellt:


```
<script type="text/javascript"> 
function update() {
val1 = document.forms['testform'].elements['num1'].value;
val2 = document.forms['testform'].elements['num2'].value;
result = val1/1 + val2/1;
document.forms['testform'].elements['num3'].value = result;
}
</script>
</head>
<body>
<form name="testform" action="test.php" method="post">
  <select onChange="this.form.num1.value=this.options[this.selectedIndex].value;">
    <option value="">Anzahl waehlen</option>
    <option value="2.50">1x</option>
    <option value="5.00">2x</option>
    <option value="7.50">3x</option>
    <option value="10.00">4x</option>
    <option value="12.50">5x</option>
  </select>
<input type="text" name="num1" oninput="update()"><br>
  <select onChange="this.form.num2.value=this.options[this.selectedIndex].value;">
    <option value="">Anzahl waehlen</option>
    <option value="2.50">1x</option>
    <option value="5.00">2x</option>
    <option value="7.50">3x</option>
    <option value="10.00">4x</option>
    <option value="12.50">5x</option>
  </select>
<input type="text" name="num2" oninput="update()"><br>
<input type="text" name="num3">
</form>
</body>
</html>
</script>
```

Das Problem ist, dass die Lösung erst nach manueller Eingabe der Zahlen bzw. nach verändern der übergebenen Werte, im Textfeld angezeigt wird.

Es wäre super wenn mir jemand erklären könnte wo der Fehler liegt.


----------



## BocaSpanky (17. März 2014)

<input type="text" name="num2" oninput="update()"><br>

zu:

<input type="text" name="num2"><br>

und

<select onChange="this.form.num1.value=this.options[this.selectedIndex].value; update();">
<select onChange="this.form.num2.value=this.options[this.selectedIndex].value; update();">


Grüße
BocaSpanky


----------



## hanna765 (17. März 2014)

Vielen Dank! funktioniert bestens


----------



## hanna765 (18. März 2014)

Eine Frage habe ich noch...

ich kann den Select Tag meines Dropdown feldes in meinem Formular nicht editieren, daher kann ich 

<select onChange="this.form.num1.value=this.options[this.selectedIndex].value; update();">

nicht einbinden.

Gibt es eine andere Möglichkeit den Wert zu übergeben?

Das ist mein vorhandenes Dropdownfeld:


```
</head>
<body>
<form name="m4jForm" method="post">
<select id="m4j-188" class="m4jSelection" lang="0" style="width: 125px;" name="m4j-188">
option value="">Anzahl waehlen</option>
    <option value="2.50">1x</option>
    <option value="5.00">2x</option>
    <option value="7.50">3x</option>
    <option value="10.00">4x</option>
    <option value="12.50">5x</option>
  </select>
<input type="text" id="m4-j373" name="m4j-373"><br>
```

Und mein Ansatz ist dieser:


```
<script type="text/javascript"> 
   var sel = document.getElementById('m4j-188');
   sel.onchange = function() {
      var show = document.getElementById('m4j-373').innerHTML = val;
      show.m4jForm.m4j-373 = this.value;
   }
</script>
</head>
<body>
<form name="m4jForm" method="post">
<select id="m4j-188" class="m4jSelection" lang="0" style="width: 125px;" name="m4j-188">
option value="">Anzahl waehlen</option>
    <option value="2.50">1x</option>
    <option value="5.00">2x</option>
    <option value="7.50">3x</option>
    <option value="10.00">4x</option>
    <option value="12.50">5x</option>
  </select>
<input type="text" id="m4j-373" name="m4j-373"><br>
</form>
</body>
</html>
```

Funktioniert leider nicht wie gewünscht.


----------



## BocaSpanky (18. März 2014)

Würde dir sowieso JQuery empfehlen.

```
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript"> 
	$(document).ready(function() {
		$('#m4j-188').change(function() { // WENN SELECT CHANGED
			$('#m4j-373').val(''); // TEXTFELD LEEREN
			var selectValue = $(this).val(); // VALUE AUS SELECT
			$('#m4j-373').val(selectValue); // TEXTFELD FÜLLEN 
		});
	});
</script>
</head>
<body>
<form name="m4jForm" method="post">
<select id="m4j-188" class="m4jSelection" lang="0" style="width: 125px;" name="m4j-188">
	<option value="">Anzahl waehlen</option>
    <option value="2.50">1x</option>
    <option value="5.00">2x</option>
    <option value="7.50">3x</option>
    <option value="10.00">4x</option>
    <option value="12.50">5x</option>
  </select>
<input type="text" id="m4j-373" name="m4j-373" value=""/><br>
</form>
</body>
</html>
```

Grüße
Patrick


----------



## hanna765 (18. März 2014)

Vielen Dank für die schnelle Antwort.

Ich werde mich in die Thematik JQuery mal einarbeiten.


----------



## Quaese (20. März 2014)

Hi,

oder ohne jQuery:

```
var sel = document.getElementById('m4j-188');
   sel.onchange = function() {
      var show = document.getElementById('m4j-373'),
          val = sel.options[sel.selectedIndex].value;
       
      show.value = val;
   }
```
Wegen einer so trivialen Berechnung ein derart großes Framework wie jQuery zu laden, finde ich übertrieben.

Ciao
Quaese


----------



## BocaSpanky (20. März 2014)

Quaese hat gesagt.:


> Hi,
> Wegen einer so trivialen Berechnung ein derart großes Framework wie jQuery zu laden, finde ich übertrieben.



Richtig wenn es bei dieser Berechnung bleibt. Grundsätzlich ist es aber nicht falsch sich mit jQuery auseinanderzusetzen.


----------



## hanna765 (20. März 2014)

Hallo, ich muss noch mal stören

Ich habe 4 Dropdownfelder und gebe den addierten Wert von den ersten 2 Feldern in ein Textfeld aus.
Das gleiche mache ich mit den anderen 2 Dropdownfeldern.

Nun habe ich 2 Textfelder mit Werten (Zahlen), die abermals addiert, und in ein 3. Textfeld ausgegeben werden sollen.

Mein Code gibt beim 3. Feld nur wirre Zahlen aus:


```
<script type="text/javascript">
function update() {
val1 = document.forms['m4jForm'].elements['m4j809'].value;
val2 = document.forms['m4jForm'].elements['m4j810'].value;
val3 = document.forms['m4jForm'].elements['m4j811'].value;
val4 = document.forms['m4jForm'].elements['m4j812'].value;
val5 = document.forms['m4jForm'].elements['m4j820'].value;
val6 = document.forms['m4jForm'].elements['m4j821'].value;
result = val1/1 + val2/1;
result2 = val3/1 + val4/1;
result3 = val5/1 + val6/1;
document.forms['m4jForm'].elements['m4j820'].value = result.toFixed(2).toString();
document.forms['m4jForm'].elements['m4j821'].value = result2.toFixed(2).toString();
document.forms['m4jForm'].elements['m4j822'].value = result3.toFixed(2).toString().replace('.', ',');
}
</script>
```

Könntet Ihr mir noch einmal helfen?


----------



## Quaese (20. März 2014)

Hi,

du musst z.B. mit *parseInt* die Werte in float-Werte konvertieren. Weiterhin erfolgt der Zugriff auf einzelne Optionen einer Select-Gruppe über *options* und *selectedIndex*.

Hier findest du ein Beispiel: http://jsfiddle.net/Quaese/dUQHq/

@BocaSpanky
Es spricht gar nichts dagegen, sich mit jQuery auseinander zu setzen - wichtiger finde ich jedoch, die nativen Bestandteile einer Script-/Programmiersprache zu beherrschen, ehe man sich mit zugehörigen Frameworks beschäftigt. Wie soll man sonst wissen, was das Framework einem letztendlich abnimmt.

Weiterhin stellen sich mir die Nackenhaare auf, wenn auf eine simple Frage nach einer Berechnung mit "Kanonen auf Spatzen geschossen wird". Das eigentliche Problem wird damit häufig nicht gelöst, was die letzte Fragestellung deutlich zeigt.

Ciao
Quaese


----------



## hanna765 (20. März 2014)

Hallo Quaese,

Danke für deine Hilfe 

im Prinzip hätte ich in meinem Script nur:

result3 = val5/1 + val6/1;

mit:

result3 = result + result2;

ersetzen müssen oder?

Funktionieren tut es danach nämlich auch.


----------



## Vader (24. März 2014)

Hallo,
ein Thema was ich gerade gut gebrauchen kann

Ich habe eine Frage zu dem von BocaSpanky geposteten Code:


```
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript"> 
    $(document).ready(function() {
        $('#m4j-188').change(function() { // WENN SELECT CHANGED
            $('#m4j-373').val(''); // TEXTFELD LEEREN
            var selectValue = $(this).val(); // VALUE AUS SELECT
            $('#m4j-373').val(selectValue); // TEXTFELD FÜLLEN 
        });
    });
</script>
</head>
<body>
<form name="m4jForm" method="post">
<select id="m4j-188" class="m4jSelection" lang="0" style="width: 125px;" name="m4j-188">
    <option value="">Anzahl waehlen</option>
    <option value="2.50">1x</option>
    <option value="5.00">2x</option>
    <option value="7.50">3x</option>
    <option value="10.00">4x</option>
    <option value="12.50">5x</option>
  </select>
<input type="text" id="m4j-373" name="m4j-373" value=""/><br>
</form>
</body>
</html>
```

In dieser Form übergibt er mir die Werte 2.50, 5.00, 7.50 usw. an das Textfeld.

Was muss man ändern, damit er 1x, 2x, 3x usw. übergibt (ohne die value Zahlen entfernen zu müssen)?


----------



## sheel (26. März 2014)

Eben das value wird ja übergeben...das muss geändert werden.
Man könnte höchstens beim Absenden (onsubmit) das ganze mit JS noch ändern.


----------



## Vader (26. März 2014)

Danke sheel.

Ich habe es hinbekommen:

```
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</script>
<script type="text/javascript"> 
    $(document).ready(function() {
        $('#m4j-188').change(function() { // WENN SELECT CHANGED
            $('#m4j-373').val(''); // TEXTFELD LEEREN
            var selectValue = $('select#m4j-188 :selected').text(); // TEXT AUS SELECT
            $('#m4j-373').val(selectValue); // TEXTFELD FÜLLEN 
            $('#m4j-373').value; update(); // TEXTFELD UPDATE
                    });
    });
</script>
```

Bleibt nur noch ein Problem:

Er schreibt die Option

```
<option value="">Anzahl waehlen</option>
```
mit in das Textfeld.

Kann man irgendwie verhindern, dass die Option "Anzahl waehlen" in das Textfeld übertragen wird?
Ich möchte nämlich nicht, dass diese Option beim Absenden des Formulars mit gesendet wird.


----------



## BocaSpanky (27. März 2014)

Hi, poste dochmal deinen ganzen Code incl. Html.


----------



## Vader (27. März 2014)

OK.


```
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</script>
<script type="text/javascript"> 
    $(document).ready(function() {
        $('#m4j-188').change(function() { // WENN SELECT CHANGED
            $('#m4j-373').val(''); // TEXTFELD LEEREN
            var selectValue = $('select#m4j-188 :selected').text(); // TEXT AUS SELECT
            $('#m4j-373').val(selectValue); // TEXTFELD FÜLLEN 
            $('#m4j-373').value; update(); // TEXTFELD UPDATE
                    });
    });
</script>
</head>
<body>
<form name="m4jForm" method="post">
<select id="m4j-188" class="m4jSelection" style="width: 125px;" name="m4j-188">
    <option value="">Anzahl waehlen</option>
    <option value="2.50">1x</option>
    <option value="5.00">2x</option>
    <option value="7.50">3x</option>
    <option value="10.00">4x</option>
    <option value="12.50">5x</option>
  </select>
<input type="text" id="m4j-373" name="m4j-373" value=""/><br>
</form>
</body>
</html>
```


----------



## BocaSpanky (27. März 2014)

Hi,

grundsätzlich übergibt mann eigentlich die Value aus dem Dropdown:

var selectValue = $('select#m4j-188 :selected').text(); // TEXT AUS SELECT
geändert in:
var selectValue = $('select#m4j-188 :selected').val(); // VALUE AUS SELECT


```
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</script>
<script type="text/javascript"> 
    $(document).ready(function() {
        $('#m4j-188').change(function() { // WENN SELECT CHANGED
			$('#m4j-373').val(''); // TEXTFELD LEEREN
            var selectValue = $('select#m4j-188 :selected').val(); // TEXT AUS SELECT
            $('#m4j-373').val(selectValue); // TEXTFELD FÜLLEN 
            $('#m4j-373').value; // TEXTFELD UPDATE
        });
    });
</script>
</head>
<body>
<form name="m4jForm" method="post">
<select id="m4j-188" class="m4jSelection" style="width: 125px;" name="m4j-188">
    <option value="">Anzahl waehlen</option>
    <option value="2.50">1x</option>
    <option value="5.00">2x</option>
    <option value="7.50">3x</option>
    <option value="10.00">4x</option>
    <option value="12.50">5x</option>
  </select>
<input type="text" id="m4j-373" name="m4j-373" value=""/><br>
</form>
</body>
</html>
```

Ich weiß zwar nicht ob das in deinem Sinn istm aber so würds ich machen.

Natürlich kann mann auch den text() übergeben. Muss dann aber im Scriptteil abfragen ob der Wert dann z.B. ne bestimmte länge hat oder nem String gleicht.

So z.B.

```
<script type="text/javascript"> 
    $(document).ready(function() {
        $('#m4j-188').change(function() { // WENN SELECT CHANGED
	    $('#m4j-373').val(''); // TEXTFELD LEEREN
            var selectValue = $('select#m4j-188 :selected').text(); // TEXT AUS SELECT
            
            if(selectValue == 'Anzahl waehlen') {
                selectValue = '';
            }

            $('#m4j-373').val(selectValue); // TEXTFELD FÜLLEN 
            $('#m4j-373').value; // TEXTFELD UPDATE
        });
    });
</script>
```

Grüße


----------



## Vader (27. März 2014)

Ist genau was ich gebraucht habe


----------



## Kent94 (5. Dezember 2014)

Guten Tag,

habe ein Problem und zwar möchte ich mehre Select Felder zusammen gerechnet haben sprich z.B Feld 1 Ram 1 Core (2,50 €) + Feld 2 GB 1 GB (2,50 €) = 5 € jedoch berechnet er nicht 5 sondern lässt 2 € stehen er nimmt immer nur Feld 1 oder Feld 2 ..

Code


```
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#m4j-188, #m4j-189').change(function() { // WENN SELECT CHANGED
            $('#m4j-373').val(''); // TEXTFELD LEEREN
            var selectValue = $(this).val(); // VALUE AUS SELECT
            $('#m4j-373').val(selectValue); // TEXTFELD FÜLLEN
        });
    });
</script>
<form name="m4jForm" method="post">

<table style="text-align: left; width: 100%;" border="1"
cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td>Core&acute;s</td>
      <td>
<select id="m4j-188" class="m4jSelection" lang="0" style="width: 125px;" name="m4j-188">
    <option value="">Anzahl waehlen</option>
    <option value="2.50">1 Core (2,50 €)</option>
    <option value="5.00">2 Core (5,00 €)</option>
    <option value="7.50">3 Core (7,50 €)</option>
    <option value="10.00">4 Core</option>
    <option value="12.50">5 Core</option>
    </select>
      </td>
    </tr>
    <tr>
      <td>RAM</td>
      <td>
<select id="m4j-189" class="m4jSelection" lang="0" style="width: 125px;" name="m4j-189">
    <option value="">Anzahl waehlen</option>
    <option value="2.50">1 GB (2,50 €)</option>
    <option value="5.00">2 GB (5,00 €)</option>
    <option value="7.50">3 GB (7,50 €)</option>
    <option value="10.00">4 GB</option>
    <option value="12.50">5 GB</option>
    </select>
      </td>
    </tr>
    <tr>
      <td>SWAP</td>
      <td></td>
    </tr>
    <tr>
      <td>Speicher</td>
      <td></td>
    </tr>
    <tr>
      <td>IP-Adressen</td>
      <td></td>
    </tr>
    <tr>
      <td>Traffic</td>
      <td></td>
    </tr>
  </tbody>
</table>
</form>

<input type="text" id="m4j-373" name="m4j-373" value=""/><br>

</form>
```


----------



## Quaese (6. Dezember 2014)

Hi,

du könntest ein Array erstellen, in dem die IDs aller Felder enthalten sind, die in die Berechnung einfließen sollen. Tritt ein change-Event ein, wird dieses Array durchlaufen und die Werte der Felder addiert.

Beispiel:


```
$(document).ready(function() {
    // ID der Felder, die in die Berechnung einfließen sollen
    var calcFields = ['#m4j-188', '#m4j-189'];

    $('#m4j-188, #m4j-189').change(function() { // WENN SELECT CHANGED
        var result = 0;

        $.each(calcFields, function(index, value) {
            var val = Number($(value).val());

            // Werte der Felder addieren
            result += isNaN(val) ? 0 : val;
        });

        // Ergebnis in Textfeld schreiben
        $('#m4j-373').val(result);
    });
});
```

Ciao
Quaese


----------



## Kent94 (29. Dezember 2014)

Hallo,

ich habe noch eine Frage wie bekomme ich das hin das er SUMME + 19% mwst = Ergebniss ausgibt ?


----------



## ComFreek (29. Dezember 2014)

Ich habe jetzt nur grob die vorherigen Beiträge gelesen, aber vielleicht hilft dir schon "Ergebnis = Summe * 1,19" weiter.


----------

