# In HTML Formular zwei Felder mit Javascript addieren



## skyhi (2. Januar 2005)

Hallo zusammen,

bin ein absoluter Anfänger und benötige für Übungszwecke einen Quellcode, in dem ich zwei Input-Felder addiere und das Ergebnis nach drücken eines Buttons im dritten Feld angezeigt wird.
Ihr würdet mir sehr helfen.

Vielen Dank


----------



## con-f-use (2. Januar 2005)

```
<html><head><title>Forumalfeld Addition</title>
 
 </head><body>
 
 	<form action=""><div>
 		<input type="text" id="input1" size="15" value="Eingabe 1" /><br />
 		<input type="text" id="input2" size="15" value="Eingabe 2" /><br />
 		<input type="button" value="Addieren!" onclick="output.value = parseFloat(input1.value) + parseFloat(input2.value)" /><br />
 		<input type="text" id="output" size="15" value="Ausgabe" /><br />
 	</div></form>
 
 </body></html>
```
 Ist die einfachste Variante. 
 Wenn eines der Eingabefelder keine Zahl enthält wird im Ausgabefeld "NaN" (*N*ot *a* *N*umber) angezeigt.


----------



## skyhi (2. Januar 2005)

super nett, danke


----------



## skyhi (2. Januar 2005)

wie klappt das mit zwei Berägen? xx,xx €?


----------



## con-f-use (2. Januar 2005)

Wenn du das Script von oben verwenden willst musst du das englische Dezimalzeichen (den Punkt) statt des Kommas benutzten oder in nem etwas koplizierteren JavaScript interen jedes Komma in einen Punkt umwandeln.


----------



## skyhi (2. Januar 2005)

Wäre das sehr aufwändig und müsste ich dann die Formeln auch in eine Javascriptfunktion setzen?


----------



## con-f-use (2. Januar 2005)

Nicht wirklich ist ne Sache von 5 Minuten

```
<html><head><title>Forumalfeld Addition</title>
 
 <script type="text/javascript"><!--
 
 function calculate() {
 	input1 = parseFloat( document.formu.input1.value.replace(/,/ , ".") );
 	input2 = parseFloat( document.formu.input2.value.replace(/,/ , ".") );
 	
 	document.formu.output.value = (input1 + input2).toString().replace(/\./ , ",");
 }
 
 //--></script>
 
 </head><body>
 	<form name="formu" action=""><div>
 		<input type="text" name="input1" size="15" value="Eingabe 1" /><br />
 		<input type="text" name="input2" size="15" value="Eingabe 2" /><br />
 		<input type="button" value="Addieren!" onclick="calculate()" /><br />
 		<input type="text" name="output" size="15" value="Ausgabe" /><br />
 	</div></form>
 </body></html>
```


----------



## pikantes (12. Juli 2013)

Hallo erts mal,

Hat auch jemand eine lösung wenn ich das ganze ohne submit button machen möchte

ich habe 3 Felder in die was eingegeben werden kann

wenn ich in einem der 3 felder was eingebe soll unten ein ergebnis ausgegeben werden


----------



## hendl (12. Juli 2013)

Hi 
Eine Möglichkeit wäre es so zu lösen


```
<html><head><title>Forumalfeld Addition</title>
 
 <script type="text/javascript"><!--
 
 function calculate() {
 	input1 = parseFloat( document.formu.input1.value.replace(/,/ , ".") );
 	input2 = parseFloat( document.formu.input2.value.replace(/,/ , ".") );
 	
 	document.formu.output.value = (input1 + input2).toString().replace(/\./ , ",");
 }
 
 //--></script>
 
 </head><body>
 	<form name="formu" action=""><div>
 		<input type="text" name="input1" size="15" value="Eingabe 1" onkeyup="calculate()"/><br />
 		<input type="text" name="input2" size="15" value="Eingabe 2" onkeyup="calculate()"/><br />
 		<input type="text" name="output" size="15" value="Ausgabe" /><br />
 	</div></form>
 </body></html>
```

Lg hendl


----------



## pikantes (12. Juli 2013)

genjal kann man die ausgabe auch zb.: als <span id="output"></span>


----------



## hendl (12. Juli 2013)

Das würde dann per diesem Code funktionieren 


```
<!-- just put your html code here -->
<html><head><title>Forumalfeld Addition</title>
 
 <script type="text/javascript"><!--
 
 function calculate() {
 	input1 = parseFloat( document.formu.input1.value.replace(/,/ , ".") );
 	input2 = parseFloat( document.formu.input2.value.replace(/,/ , ".") );
 	
 	document.getElementById("output").innerHTML= (input1 + input2).toString().replace(/\./ , ",");
 }
 
 //--></script>
 
 </head><body>
 	<form name="formu" action=""><div>
 		<input type="text" name="input1" size="15" value="Eingabe 1" onkeyup="calculate()"/><br />
 		<input type="text" name="input2" size="15" value="Eingabe 2" onkeyup="calculate()"/><br />
     	<!--<input type="text" name="output" size="15" value="Ausgabe" /><br /> -->
 		</div></form>
 	 	<span id="output">Startwert</span> 
 </body></html>
```

Lg hendl


----------



## pikantes (13. Juli 2013)

Danke hendl hat mir sehr geholfen


----------



## pays (19. Dezember 2013)

Hallo zusammen

Hat jemand einen Code bei dem man folgende angaben machen kann - und hoffentlich das richtige Resultat herauskommt.
Der Sinn dahinter: Zahl 1 = Länge | Zahl 2 Faktor (ergibt Höhe) | Zahl 3 = m2Preis

Zahl 1 (Eingabefeld) multiplizieren mit unsichtbarer Zahl 2 - Ergebnis 1 in einem Feld anzeigen.
In einem weiteren Feld angezeigt werden sollte die Multiplikation (ohne Eingabe) von Zahl 1 * Ergebnis 1 * Zahl 3, alle unsichtbar - Ergebnis 2 in einem weiteren Feld angeben.

Sehr kompliziert aber vielleicht hat jemand die Geduld oder das nötige Wissen. Falls nicht muss ich wohl doch zu einem Spezialisten!?

Danke im Voraus!
Pays


----------

