Summe berechnen?

m@xx · 16.08.2007, 18:58

Hallo Leute,
für eine Website bräuchte ich ein Javascript. Jedoch weiß ich nicht genau, wie ich das anstellen soll. So soll das Design funktionieren:

Es handelt sich um ein Formular. In einem Feld geb ich einen Gesamtbeitrag ein. In weiteren Feldern (z.B. 3 Stück) geb ich weitere Zahlenbeiträge ein. Diese Felder werden dann in einem weiteren Feld (readonly) zusammengezählt. Wenn diese Summe dann über den angegeben Gesamtbeitrag geht, dann soll sich die Farbe des readonly-Feldes ändern und man darf dann nicht mehr auf den Absende-Button klicken dürfen. Das Berechnen sollte ohne Klick auf ein Button funktionieren.

Schon Mal Danke im Voraus

m@xx

Stefan · 16.08.2007, 19:02

Kannst du das Forumlar mal hochladen? Dann muss man nicht erst extra das Formular zusammensetzen, mit dem Risiko, dass es erst nicht so ist, wie du es gern hättest

m@xx · 16.08.2007, 19:34

Der Code dafür:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Summet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<script type="text/javascript">

</script>
<form name="Formular">
Gesamtsumme&nbsp;&nbsp;&nbsp;<input type="text" name="Gesamtsumme" size="20"><br><br>
1. Betrag&nbsp;&nbsp;&nbsp;<input type="text" name="1. Betrag" size="10"><br>
2. Betrag&nbsp;&nbsp;&nbsp;<input type="text" name="2. betrag" size="10"><br>
<input type="text" name="Summe" size="10" readonly="">
</form>
</body>
</html>

Stefan · 16.08.2007, 20:25

Ist's so in Ordnung? Hier das Online-Beispiel: http://www.everydaythesame.de/TP/form.htm

PHP-Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Summet</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>



<body>

<script language="JavaScript">

function rechne(){

var feld1= parseInt(document.formular.feld1.value);

var feld2= parseInt(document.formular.feld2.value);

var gesamt= parseInt(document.formular.gesamtsumme.value);

var ergebnis;



ergebnis=feld1+feld2;

document.formular.differenz.value=ergebnis;





if (gesamt < ergebnis){

document.formular.submit.disabled=true

document.formular.differenz.style.backgroundColor='FF0000';

}

else {document.formular.differenz.style.backgroundColor='FFFFFF';

document.formular.submit.disabled=false;}



}

</script>

<form name="formular">

Gesamtsumme&nbsp;&nbsp;&nbsp;<input type="text" name="gesamtsumme" size="20" onChange="rechne(this.value)" ><br><br>

1. Betrag&nbsp;&nbsp;&nbsp;<input type="text" name="feld1" size="10" onChange="rechne(this.value)" ><br>

2. Betrag&nbsp;&nbsp;&nbsp;<input type="text" name="feld2" size="10"onChange="rechne(this.value)"  ><br>

Differenz: <input type="text" name="differenz" size="10" >

<br><br><input type="submit" name="submit" value="abschicken">

</form>

</body>

</html>

m@xx · 16.08.2007, 21:20

Perfekt........

Dankeschön Stefan

m@xx · 17.08.2007, 22:54

Noch eine Frage zu javascript:
Ich möchte ein paar Checkboxes machen. Wenn man eine aktiviert, sollte dahinter ein Textfeld erscheinen, indem ich was eintippen kann. Ich hab es mal versucht, aber irgendwie funzt des nicht.
Was hab ich falsch gemacht?

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Summet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<form name="formular">
	<table width="100%"  border="0" cellspacing="0" cellpadding="0">
	  <tr>
		<td><input type="checkbox" name="Feld1" value="Hallo" onClick="document.getElementbyID('Betrag').style.visibility = 'visible';">Test1Feld</td>
		<td width="81%"><div id="Betrag" style="visibility:hidden;">Betrag: <input type="text" name="n" size="10"></div></td>
	  </tr>
	</table>
</form>
</body>
</html>

MfG
m@xx

Stefan · 18.08.2007, 20:37

Ihr dürft ruhig helfen, ich kenn mich in JS nicht sonderlich gut aus

EDIT: Aber hey, gibt's überhaupt "style="visibility:hidden;" ... da gibt's doch display: block bzw. none?

Probier's doch mal so. Damit bleibt das Textfeld aber bei einem klick permanent sichtbar.

HTML-Code:

<form name="formular">
	<table width="100%"  border="0" cellspacing="0" cellpadding="0">
	  <tr>
		<td><input type="checkbox" name="Feld1" value="Hallo" 

onClick="document.getElementById('Betrag').style.display='block';">Test1Feld</td>
		<td width="81%"><div id="Betrag" style="display:none;">Betrag: <input 

type="text" name="n" size="10"></div></td>
	  </tr>
	</table>
</form>
</body>
</html>

Malleus · 18.08.2007, 23:48

Hallo,
dann helf' ich doch mal

m@xx: Es heißt "document.getElementById" und nicht "document.getElementbyID"

@Steffen: display = "none" entfernt ein Element komplett aus dem Rendering-Process, d.h. nachfolgende Elemente rücken nach. Bei "visibility" = "hidden" geschieht das nicht: Das Element wird unsichtbar, aber der Platz ist weiter belegt, nachfolgende Elemente rücken daher nicht nach. Okay?

Meine Scriptanpassung:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Summet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<form name="formular">
	<table width="100%"  border="0" cellspacing="0" cellpadding="0">
	  <tr>
		<td><input type="checkbox" name="Feld1" value="Hallo" onClick="document.getElementById('Betrag').style.visibility = ( document.getElementById('Betrag').style.visibility=='hidden' ) ?'visible':'hidden';">Test1Feld</td>
		<td width="81%"><div id="Betrag" style="visibility:hidden;">Betrag: <input type="text" name="n" size="10"></div></td>
	  </tr>
	</table>
</form>
</body>
</html>

tschau

Frank