Variablen addieren und Ergebnis automatisch in einem Textfeld anzeigen lassen

H

hanna765

Grünschnabel
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:

Code: 
<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.
 
<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
 
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:

Code: 
</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:

Code: 
<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.
 
Würde dir sowieso JQuery empfehlen.
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>

Grüße
Patrick
 
Vielen Dank für die schnelle Antwort.

Ich werde mich in die Thematik JQuery mal einarbeiten.
 
Zuletzt bearbeitet:
Hi,

oder ohne jQuery:
Code: 
   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
 
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:

Code: 
<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?
 
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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück