Formularfelder berechnen und Ergebnis anzeigen

O

Oli-bt

Mitglied
Hi zusammen!

Ich muss gleich vorne weg sagen das ich absoluter JavaScript-Newbie bin...
Ich habe ein Formular in dem es 3 Textfelder gibt...
Zahl1, Zahl2, und Ergebnis...

Nun will ich das man in die beiden ersten felder eine Zahl eingeben kann, diese automatisch zusammen gezählt werden und das Ergebnis automatisch im letzten Textfeld angezeigt wird.... geht das?
Und wenn ja... wie?

Ich wäre Euch wirklich dankbar wenn Ihr mir weiterhelfen könntet da es eilt und wichtig wäre... danke.

Gruß, Oli
 
HTML: 
<script type="text/javascript"><!--
    	function add() {
    		v1 = Number(document.forms[0].elements[0].value);
    		v2 = Number(document.forms[0].elements[1].value);
    		if (v1 && v2) document.forms[0].elements[2].value = v1 + v2;
    	}
    //--></script>
    
    </head><body>
    
    <form><div>
    	Wert 1:<input type="text" size="8" onkeyup="add()" /><br />
    	Wert 2:<input type="text" size="8" onkeyup="add()" /><br />
    	Ergebnis: <input type="text" size="8" />
    </div></form>
 
Zuletzt bearbeitet:
kann ich das ganze auch machen das z.B. eine Checkbox angeklickt wird und dann automatisch 20 dazu gezählt werden? Wenn ja... wie? Ich hab jetzt alles mögliche probiert aber komm einfach nicht drauf...
 
HTML: 
<script type="text/javascript"><!--
   	function add() {
   		v1 = Number(document.forms[0].v1.value);
   		v2 = Number(document.forms[0].v2.value);
   		if (v1 && v2) document.forms[0].elements[2].value = v1 + v2;
   	}
   //--></script>
   
   </head><body>
   
   <form><div>
   	<input name="v1" type="text" size="8" onkeyup="add()" /><br />
   	<input name="v2" type="text" size="8" onkeyup="add()" /><br />
   	Ergebnis: <input name="Ergebnis" type="text" size="8" />
 	<input type="checkbox" onclick="document.forms[0].Ergebnis.value = Number(document.forms[0].Ergebnis.value) + ((this.checked == true) ? 20 : - 20)" />
   </div></form>

Das ist wirklich simpelstes JavaScript. Bitte schau einfach mal in SELFHTML rein und beschäftige dich ein wenig mehr mit JavaScript, denn solche Fragen sind schon fast peinlich.

Und wenn das Thema für dich erledigt ist, dann markiert es bitte noch als "erledigt".
 
ich hab das jetzt so gemacht:
Code: 
if (document.formular.java_script.checked == true )
{
v13 = Number("30");
}
else {
v13 = Number("0");
}
geht aber irgendwie noch nicht wirklich...
Er zeigt dann immer die 0 an...

Allerdings bräuchte ich wie hier - Radio Buttons statt checkboxen... deswegen hab ich es jetzt so versucht...
Ich komm leider nicht anders drauf... auch nicht mit SelfHtml
 
Schreib mal den ganzen code, den du bisher hast (HTML und JavaScript) und schreib genau, was du machen willst.
 
Also hier mal der komplette code
Code: 
<html>

<head>

<script type="text/javascript"><!--
    function add() {
    	zahl1 = Number(document.formular.zahl1.value);
    	zahl2 = Number("10");
    	ergebnis1 = zahl1 + zahl2;
    		
    	zahl3 = Number(document.formular.zahl2.value);
    	zahl4 = Number("10");
    	ergebnis2 = zahl3 + zahl4;
    		
	if (document.formular.auswahl[0].checked == true)
	{
	ergebnis3 = Number("30");
	}
	else if (document.formular.auswahl[1].checked == true)  
	{
	ergebnis3 = Number("0");
	}
    		
    	document.formular.ergebnis.value = ergebnis1 + ergebnis2 + ergebnis3;
   }
    //--></script>
	
	
</head>

<body bgcolor="#ffffff">
	<form name="formular">
		<table border="0" cellspacing="0" cellpadding="2">
			<tr>
				<td width="121">Zahl1</td>
				<td width="156"><input type="text" name="zahl1" size="24" border="0" onClick="add()"></td>
				</tr>
				<tr>
				<td width="121">Zahl2</td>
				<td width="156"><input type="text" name="zahl2" size="24" border="0" onClick="add()"></td>
				</tr>
				<tr>
				<td width="121">Ja oder Nein</td>
				<td width="156">
					<div align="center">
						<input type="radio" name="auswahl" value="" border="0" onClick="add()">Ja&nbsp;&nbsp;&nbsp;<input type="radio" name="auswahl" value="" border="0" onClick="add()">Nein</div>
				</td>
				</tr>
				<tr height="19">
				<td colspan="2" width="281" height="19"></td>
				</tr>
				<tr>
				<td width="121">Ergebnis:</td>
				<td width="156"><input type="text" name="ergebnis" size="24" border="0"></td>
				</tr>
			</table>
		</form>
		<p></p>
	</body>

</html>
Ich will im Prinzip einen Online-Rechner für bestimmte Sachen machen... Wo man also jeweils die Anzahl der benötigten Teile angeben kann. Der Rechner Rechnet dann automatisch den Gesamtpreis aus... Ausserdem soll man z.B. angeben können ob man z.B. mit Bannerwerbung einverstanden ist (das reduziert dann z.B. den Preis) und der Bonus dann automatisch vom Gesamtpreis abgezogen wird wenn man ja klickt... etc... und unten soll dann immer das aktuelle Ergebnis stehen....
 
Geduld, junger Jedi... es gibt Menschen die im Moment Abitur schreiben und einfach keine Zeit haben. Solches Beitrags-Pushen wie du's machst ist hier unerwünscht!

Habe deine Funktion mal ein wenig vereinfacht:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="en" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
 <head><title>Rechner</title><meta name="AUTHOR" content="con-f-use@gmx.net" /><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 
 <script type="text/javascript"><!--
 	function add() {
 		if (document.forms[0].auswahl[0].checked == true) {
 			ergebnis3 = 30;
 		} else if (document.forms[0].auswahl[1].checked == true) {
 			ergebnis3 = 10;
 		} else {
 			ergebnis3 = 0;
 		}
 		
 		document.forms[0].ergebnis.value = 
 			Number(document.forms[0].zahl1.value) + 
 			Number(document.forms[0].zahl2.value) + 
 			ergebnis3;
 	}
 //--></script>
 	
 	
 </head><body>
 
 	<form action="">
 		<table border="0" cellspacing="0" cellpadding="2">
 			<tr>
 				<td>Zahl1</td>
 		    	<td><input type="text" name="zahl1" size="24" onkeyup="add()" /></td>
 				</tr>
 				<tr>
 				<td>Zahl2</td>
 		    	<td><input type="text" name="zahl2" size="24" onkeyup="add()" /></td>
 				</tr>
 				<tr>
 				<td>Ja oder Nein</td>
 				<td>
 		    		<div style="text-align:center">
 		    			<input type="radio" name="auswahl" value="" onchange="add()" />Ja&nbsp;&nbsp;&nbsp;
 		    			<input type="radio" name="auswahl" value="" onchange="add()" />Nein
 					</div>
 				</td>
 				</tr>
 				<tr>
 				<td colspan="2"></td>
 				</tr>
 				<tr>
 				<td>Ergebnis:</td>
 		    	<td><input type="text" name="ergebnis" size="24" /></td>
 				</tr>
 			</table>
 		</form>
 		<p></p>
 	</body>
 
 </html>
Einziges Problem (ergebnis3) lag daran, dass auch keiner der radio-Buttons ausgewählt sein konnte und für diesen Fall die Variable "ergebnis3" nicht existierte, du sie aber addiert hast --> Fehler.

Wenn mal keien Zahlen eingegeben wurde steht im Ergebnisfeld NaN für "Not a Number", das lässt sich mit einer if-Abfrage ändern, wenn du willst.

P.S.
Du sollest dich mal ein wenig mit den Standarts des W3C auseinander setzten. Die sind durchaus sinnvoll und haben schon sehr dabei geholfen, HTML und JavaScript leserlicher, logischer, und am wichtigsten, für die verschiedenen Browser gleich interpretiebarer zu machen. Dein HTML strotzt nur so vor invaliden Sachen. Je mehr Leute die Standarts benutzen desto schneller werden sie von den Browsern auch einheitlich umgesetzt (ich denke da besonders an den Internet-Explorer diese Bugschleuder).
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück