# automatische Berechnung im eingabefeld



## alex130 (6. August 2007)

Hi
Ich habe ein Problem, ich mache gerade ein PHP Script und nun komme ich nicht weiter, denn ich brauche eine Ajax Funktion und zawr folgende.:
Ich habe 2 Eingabe felder und ein DropDownFeld:

```
<input type="text" name="bruttopraemie" size=30">

<select name="zahlungsweise">
<option value="0" selected>einmalig</option>
<option value="1">halbjährlich</option>
<option value="2">jährlich</option>
<option value="3">monatlich</option>
<option value="4">vierteljährlich</option>
</select>

<input type="text" name="bruttojahrespraemie" size=30">
```
Und nun soll eine automatische berechnung durchgeführt werden, also man gibt in das feld "bruttopraemie" einen Wert ein und wenn man bei "zahlungsweise", einmalig auswählt, soll es mal 1 gerechnet werden bzw der Wert gleich bleiben, wenn man jährlich auswählt soll es auch so bleiben und wenn man halbjährlich auswählt, soll es *2 gerechnet werden, wenn man monatlich auswählt, soll es *12 gerechnet werden und bei vierteljährlich, soll es *4 gerechnet werden, und dann soll das Ergebnis in dem Feld "bruttojahrespraemie" stehen. Könnte mir da jemand bitte helfen?
Danke schonmal 
lg Alex


----------



## ValentinS (6. August 2007)

Warum Ajax? JavaScript reicht doch vollkommen oder willst du gleichzeitig in die Datenbank buchen?


----------



## alex130 (6. August 2007)

Aso ich kenne mich da nicht so gut aus ^^. ja es muss in die datenbank, aber das mache ich dann mit php, wenn man die Datei abschickt....


----------



## ValentinS (6. August 2007)

Bitteschön!

Mann was macht man nicht alles, wenn man auf eine antwort auf die eigene Frage wartet... ;-)


```
<script>
function rechne(option)
{
var input = document.getElementById('input').value
var output= 0
if (option == 0) { output = input;}
if (option == 1) { output = input;}
if (option == 2) { output = input / 2;}
if (option == 3) { output = input / 4;}
if (option == 4) { output = input / 12;}

alert(output);
document.getElementById('output').value = output;

}

</script>

<form>
<input id="input" type="text" name="bruttopraemie" size="30">

<select name="zahlungsweise" onchange="rechne(this.value);">
<option value="0" selected>einmalig</option>
<option value="1">halbjährlich</option>
<option value="2">jährlich</option>
<option value="3">monatlich</option>
<option value="4">vierteljährlich</option>
</select>

<input type="text" name="bruttojahrespraemie" size="30" id="output">
</form>
```


----------



## alex130 (6. August 2007)

Wow danke 
Werd das sofort testen, danke für deine schnelle Antwort und das Script.
lg


----------



## alex130 (6. August 2007)

danke der Code funktoniert super, hab nur die / durch * ersetzen müssen, aber nun versteh ich den Code sorgar 
Könntest du mir bitte noch zeigen, falls du weiß wie es geht.... wie man machen kann, dass wenn man eine checkbox aktiviert, 2-3 andere Felder (checkbox, oder inputfeld) auch aktiviert sind, also man sie erst ankreuzen bzw was eingeben kann, wenn die 1 checkbox aktiviert sit.
Danke


----------



## ValentinS (6. August 2007)

```
<script>
function umschalten(element)
{
document.getElementById(element).disabled = !document.getElementById(element).disabled;
}

</script>

<form>
<input type="checkbox" onclick="umschalten('textfeld');" />
<input type="text" id='textfeld' name='textfeld' disabled="disabled" value="Blablabla"/>
</form>
```

Macht achtsch mack... ;-) Viel Erfolg.... Ich hab immernoch keine Antwort auf meine Frage... :-(


----------



## alex130 (6. August 2007)

Danke genau das brauch ich, aber ich hab noch ein Problem und zwar hab ich das jetzt so geändert:

```
<tr>
    <td class="table1">Allgemeiner Vertragsrechtsschutz</td>
    <td class="table1">';?><input type="checkbox" name="allgemeiner_vertragsrechtschutz" onclick="umschalten('eigene_lieferung');umschalten('fremde_lieferung');" /><?php echo'</td>
  </tr>
    <tr>
    <td class="table2">eigene Lieferung bis </td>
    <td class="table2"><input type="text" id="eigene_lieferung" disabled="disabled" name="eigene_lieferung" size="10" /></td>
  </tr>
  <tr>
    <td class="table2">fremde Lieferung </td>
    <td class="table2"><input id="fremde_lieferung" disabled="disabled" type="text" name="fremde_lieferung" size="10" /></td>
  </tr>
```
Und es ist genau umgekehrt, wenn ich die checkbox aktiviere, dann sind die 2 eingabefelder deaktiviert..
darunter hab ich aber das selbe und da funktoniert es normal.
was mache ich falsch?
thx


----------



## ValentinS (7. August 2007)

Morgen!

Schreib hier doch mal das JavaScript rein...

du kannst beide Befehle in eine Funktion einbauen, du brauchst keine 2 funktionen...

Konkreter könnte es auch lauten:


```
function umschalten(checkbox, element1, element2)
{
if (document.getElementById(checkbox).checked== true)
{
document.getElementById(element1).disabled = false;
document.getElementById(element2).disabled = false;
}
else
{
document.getElementById(element1).disabled = true;
document.getElementById(element2).disabled = true;
}
}
```

Oder so ähnlich... an die Funktion musst du
1. die ID der checkbox
2. die beiden zu aktivierenden element übergen....


----------



## alex130 (8. August 2007)

Danke aber jetzt hab ich noch eine Frage zu dem rechnen und zwar, wenn ich mein Formular jetzt abschicke, dann werden meine Felder geprüft und der Inhalt in die Db eingetragen, aber das Feld `bruttojahrespramie` ist leer, warum? es steht doch auch Inhalt drinen....
thx


----------



## Quaese (8. August 2007)

Hi,

ist es richtig geschrieben? Oben heisst es "bruttojahrespra*e*mie", im letzten Posting "bruttojahrespramie".

Ciao
Quaese


----------



## alex130 (8. August 2007)

Ja, dann hab ich mich beim letzten Posting verschrieben....


----------



## Quaese (8. August 2007)

Hi,

dann sind wohl mehr Informationen notwendig (Formular, Quellcode), da es mit ValentinS Posting #4 
bei mir problemlos funktioniert. Das Feld *bruttojahrespraemie* hat im Auswertungsscript den zuvor 
berechneten Wert.

Ciao
Quaese


----------



## alex130 (8. August 2007)

Hi
Also hier mein Javascript Code:

```
function rechne(option)
{
var input = document.getElementById('input').value
var output= 0
if (option == 0) { output = input;}
if (option == 1) { output = input;}
if (option == 2) { output = input * 2;}
if (option == 3) { output = input;}
if (option == 4) { output = input * 12;}
if (option == 5) { output = input * 4;}

document.getElementById('output').value = output;

}
```
der wird aus meiner Javascript Datei includet...
Und hier ein ausschnitt aus meinem Formular:


```
<tr>
    <td class="table2">Bruttopr&auml;mie laut Zahlungsweise </td>
    <td class="table2"><input id="input" type="text" name="bruttopraemie" size="30" /></td>
  </tr>
  <tr>
    <td class="table1">Zahlungsweise</td>
    <td class="table1"><select name="zahlungsweise" onchange="rechne(this.value);"><option value="1" selected>einmalig</option>
<option value="2">halbjährlich</option>
<option value="3">jährlich</option>
<option value="4">monatlich</option>
<option value="5">vierteljährlich</option>
</select></td>
  </tr>
  <tr>
    <td class="table2">Bruttojahrespr&auml;mie</td>
    <td class="table2"><input id="output" type="text" name="bruttojahrespraemie" disabled="disabled" size="15" /></td>
  </tr>
```
berechnet wird es auch richtig, aber beim abschicken wird nix eingetragen.
lg


----------



## ValentinS (8. August 2007)

alex130 hat gesagt.:


> berechnet wird es auch richtig, aber beim abschicken wird nix eingetragen.



Meinst du damit, dass in php $_Post["bruttojahrespraemie"] leer ist?
Weil ich hab die Vermutung dass dann halt in php ein rechtschreibfehler ist...


----------



## alex130 (8. August 2007)

Hi
Nein hab nochmal alles überprüft und es ist kein Fehler drinen.
lg


----------



## tobee (8. August 2007)

Dann würde ich es einfach mal in PHP überprüfen:

```
echo "Bruttojahresprämie: ";
echo isset($_POST['bruttojahrespraemie']) ? $_POST['bruttojahrespraemie'] : "nicht vorhanden";
echo  "<br />";
echo "Zahlungsweise: ";
echo isset($_POST['zahlungsweise']) ? $_POST['zahlungsweise'] : "nicht vorhanden";
echo  "<br />";
```


----------



## alex130 (8. August 2007)

Hi
hab ich vorhin schon überprüft und jetzt hab ich noch deinen Code probiert:

```
Bruttojahresprämie: nicht vorhanden
Zahlungsweise: 3
```
Ich weiß jetzt nicht mehr weiter ...
lg


----------



## tobee (8. August 2007)

Vielleicht hat JavaScript was dagegen das die ID input heißt?
Du könntest es mal unbenennen und dann probieren.


----------



## alex130 (8. August 2007)

Nein geht leider auch nicht, habs gerade umbenannt.


----------



## alex130 (8. August 2007)

hab jetzt auch das disabled und id weggenommen und selbst nen wert eingefügt, der wird dann angzeigt, also muss es an dem javascript liegen


----------



## Quaese (8. August 2007)

Hi,

es liegt nicht am JavaScript, als am disabled-Attribut. Alle Formularelemente, die disabled sind, werden nicht mit versendet.

Möglich wäre es, mit JavaScript das Feld kurz vor dem Verschicken zu aktivieren. Damit sollte der Wert übermittelt werden. Dazu könnte im *onsubmit*-Event die disabled-Eigenschaft auf *false* gesetzt werden. Aber - Benutzer mit ausgeschaltetem JS würden jedoch nie einen Wert übermitteln.

```
<form method="" action="" onsubmit="this.output.disabled=false;">
```
Ciao
Quaese


----------



## alex130 (8. August 2007)

Danke werde das sofort ausprobieren, bezüglich dem JS deaktiviert, wird es kein Problem geben, denn das brauch ich für eine kundenverwaltung für meinen Vater und seine Angestellten und die haben alle JS aktiviert.
lg

//edit: Danke es funktoniert :T
Super Hilfe, danke


----------



## alex130 (10. August 2007)

Hi
Ich bräuchte nochmal was und zwar, soll noch was berechnet werden. 
Es soll der Wert von dem "output" durch 1,11 dividiert werden.
Wie muss das dann aussehen?
habs so gemacht: 

```
function rechne2(option)
{
var input = document.getElementById('output').value
var output2 = output / 1.11;

document.getElementById('output2').value = output2;

}
```
aber das geht irgendwie nicht ...
THx

//edit:
habs jetzt so gelöst: var 
	
	
	



```
njp_1 = output / 1.11;
```
aber wie kann ich das auf 2 kommstellen runden?
Thx


----------



## Quaese (10. August 2007)

Hi,

die Methode *toFixed* rundet kaufmännisch auf die Anzahl der übergebenen Nachkommastellen.

```
njp_1 = (output / 1.11).toFixed(2);
```
Ciao
Quaese


----------



## alex130 (10. August 2007)

Hi
Danke, genau das was ich gebraucht habe, und einmal noch ^^ und zwar weißt du wie man machen kann dass bei den Feldern für Geburtsdatum usw, die Punkte automatisch gesetzt werden? Also dass ich nur 01011991 oder so eingebe und die Punkte werden dann automatisch gesetzt.
Thx


----------



## Quaese (10. August 2007)

Hi,

mit Hilfe von regulären Ausdrücken sollte Dein Vorhaben realisierbar sein.

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function checkIt(){
  var objInput = document.getElementById("txtID");

  // Falls der Inhalt des Feldes genau 8 Ziffern sind
  if(objInput.value.match(/^[\d]{8}$/)){
    // Suchmaske: ddmmyyyy
    var strPattern = /^([\d]{2})([\d]{2})([\d]{4})$/;
    // Suchmaske auf String anwenden -> geklammerte Ausdrücke ab erster Komponente des Ergebnis-Arrays
    var arrResult = strPattern.exec(objInput.value);
    // String zusammensetzen
    var strResult = arrResult[1] + "." + arrResult[2] + "." + arrResult[3];
    alert(strResult);
  }else{
    alert("Es müssen genau 8 Ziffern eingegeben werden!\n(Werte kleiner 10 mit führender Null angeben)");
  }
}
 //-->
</script>
</head>
<div>
  <input type="text" name="txtName" id="txtID" value="17022004">
  <input type="button" onclick="checkIt();" value="checkIt()">
</div>
</body>
</html>
```
Ciao
Quaese


----------



## alex130 (11. August 2007)

Hi
Danke genau das hab ich geuscht, ich hab das jetzt so geändert: 
	
	
	



```
<input type="text" name="txtName" id="txtID" value="17022004" onChange="checkIt()">
```
Funktoniert auch, aber wie kann man statt dem alert... machen, dass die Punkte, dann im Feld eingefügt werden? Also man gibt das Datum ein und dann werden die Punkte im Input Feld gesetzt.
Thx

//edit: habs gerade selbst hinbekommen, langsam verstehe ich das ganze ^^
lg


----------



## alex130 (12. August 2007)

Hi
Ich brauch leider wieder mal was, aber ich wollte nicht extra nen neuen Thread aufmachen....
und zwar bräuchte ich ein Javascript, damit immer das Feld wo man gerade was eingibt eine andere Farbe hat, also farblich hervorgehoben wird.
Könnte mir da bitte jemand helfen?
Thx


----------



## maeTimmae (12. August 2007)

CSS reicht für diesen Zweck:

```
input, textarea { /* Standardstyledefinitionen für input und textarea */ }
input:focus, textarea:focus { background: #fedcba; color: #123456; }
```

Einfach in einen <style>-Block im Header einfügen und anpassen oder in ein Stylesheet einbetten und anpassen.

Solltest du auf JS bestehen, helfen dir _onfocus_ (zB onfocus="this.style.color = '#123456';" ) und _onblur_ weiter.


----------



## alex130 (12. August 2007)

Ok danke, das wusste ich gar nicht, das mit CSS reicht.


----------



## alex130 (12. August 2007)

So und einmal noch , wie kann ich die Länge der eingegenen Wörter prüfen? 
Hab hier mal was gefunden:

```
<script type="text/javascript">
<!--
function IstZuKurz(Element, AnzZeichen)
  {
  var FehlerMeldung = "Fehler beim Ausf\xFCllen des Formulars\n\n"
  var FeldLaenge = Element.value.length
  var OK = (FeldLaenge >= AnzZeichen);

  if (!OK)
    {
    var Text = FehlerMeldung + "Dieses Feld darf max. " + AnzZeichen
    Text += " enthalten.\nSie haben " + FeldLaenge + " Zeichen eingegeben"
    alert(Text)
    }
  return OK
  }
//-->
</script>
Geben Sie min. 5 Zeichen ein: <input type="text" size="15" value="" name="PruefeAnzahl" onblur="IstZuKurz(this,5)" />
<br />
```
jedoch funktoniert das nicht so ganz, kann mir das bitte jemand helfen?
Thx


----------



## Quaese (13. August 2007)

Hi,

bei mir funktioniert das Script tadellos. Beim Verlassen des Feldes wird geprüft, ob mindestens fünf Zeichen eingegeben wurden.

Ciao
Quaese


----------



## alex130 (14. August 2007)

Hi
Nun funktoniert es auch, aber ich hab noch eine Frage zu dem automatischen Punkte setzen beim geburtsdatum und zwar, man kann nicht zwei Feldern die selbe ID zuweisen, oder?
Gibt es irgendeine andere Mglichkeit, damit ich die function bei mehreren Feldern anwenden kann?
Thx


----------



## ValentinS (14. August 2007)

Du kannst elementen anstatt IDs namen vergeben und dann via getElementsByName() abrufen. IDs sind eindeutig, Namen können mehrmals vorkommen.

Solltest einfach mal ein bisschen auf 
http://de.selfhtml.org/javascript/objekte/document.htm
rumsurfen...


----------



## Quaese (14. August 2007)

Hi,

Du kannst die Funktion so umändern, dass ihr die ID als String übergeben wird.

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function checkIt(strID){
  var objInput = document.getElementById(strID);

  // Falls der Inhalt des Feldes genau 8 Ziffern sind
  if(objInput.value.match(/^[\d]{8}$/)){
    // Suchmaske: ddmmyyyy
    var strPattern = /^([\d]{2})([\d]{2})([\d]{4})$/;
    // Suchmaske auf String anwenden -> geklammerte Ausdrücke ab erster Komponente des Ergebnis-Arrays
    var arrResult = strPattern.exec(objInput.value);
    // String zusammensetzen
    var strResult = arrResult[1] + "." + arrResult[2] + "." + arrResult[3];
    //alert(strResult);
    document.getElementById(strID).value = strResult;
  }else{
    alert("Es müssen genau 8 Ziffern eingegeben werden!\n(Werte kleiner 10 mit führender Null angeben)");
  }
}
 //-->
</script>
</head>
<div>
  <input type="text" name="txtName" id="txtID_01" value="17022004">
  <input type="button" onclick="checkIt('txtID_01');" value="checkIt('txtID_01')">
</div>
<div>
  <input type="text" name="txtName" id="txtID_02" value="14082007">
  <input type="button" onclick="checkIt('txtID_02');" value="checkIt('txtID_02')">
</div>
</body>
</html>
```
Ciao
Quaese


----------

