JavaScript Texfelder automatisch füllen

DoCtoR

Hallo erstmal bin neu hier bei euch

Habe ein kleines Problem ... hoffe ihr könnt mir helfen.

Ich schreibe grade ein Hausverwaltungs Programm, bin grade bei den Mieteinnahmen. So und da ist das Problem ...

Jeder Monat ist aufgeteilt in: Miete (Kalt) | NK( Nebenkosten) | Sonstiges | Summe
Jeweils ein Textfeld für jede Einheit. Jetzt will ich aber das wenn ich z.B im Januar die Miete eintrage das diese in allen anderen Monaten direkt übernohmen wird, ohne vorher ein Button oder ähnliches zu drücken. Und die Summe soll auch direkt berechnent werden.

Ist es überhaupt möglich, so zu realisieren?

Gruß
Alexander

synaptic

ja is möglich, hängt halt davon ab was für ne technik dahintersteht..
wenns serverseitg gespeichert wird eigentlich, dann brauchste ne file die entsprechend die werte einträgt und diese file rufste am besten via ajax auf...

für sowas würd ich aber nen button nehmen "für alle übernehmen" dann kannste sicher sein, dass auch die richtigen werte kommen...

aber hier jetzt zu spekulieren is doof.. zeig code, erzähl was von der technik und dir kann geholfen werden, sonst tipp ich mir hier nen wolf über 12 seiten und tausend möglichen wegen...

DoCtoR

Also ... der ganze Inhalt wird in einem MySQL DB eingetragen.

Ich habe hier im Forum ein Code von dir gefunden ...

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        function transferText(){
            var source = document.getElementById('myField');
            var target = document.getElementById('myArea');
            var sourceText = source.value;
            var targetText = target.value;
            target.value = targetText + ' ' + sourceText;
        }
    </script>
</head>
<body>
<input type="text" id="myField" value="bbbbbb" />
<textarea id="myArea">aaaaaaa</textarea>
<input type="button" onclick="transferText();" value="wert übertragen" />
</div>
</body>
</html>

Alles anzeigen

Genau sowas brauche ich nur das nicht über einen Button geht sondern direkt wenn ich was eingetrage habe ... Sollte doch auch mit JS möglich sein? Wobei an Ajax hab ich auch gedacht ... kenne mich da nur nicht aus ....

Meine Textfelder sehen so aus:

HTML

<tr>
    <td>Jan.</td>
     <td align="right"><input type="text" name="jnetto" size="10" onkeydown="if(event.keyCode=='39') {this.form.jnk.focus()} else if (event.keyCode=='37') {this.form.jsumme.focus()} else if (event.keyCode=='40') {this.form.fnetto.focus()} else if (event.keyCode=='38') {this.form.dnetto.focus()}"></td>
     <td align="right"><input type="text" name="jnk" size="10"  onkeydown="if(event.keyCode=='39') {this.form.jsonst.focus()} else if (event.keyCode=='37') {this.form.jnetto.focus()} else if (event.keyCode=='40') {this.form.fnk.focus()} else if (event.keyCode=='38') {this.form.dnk.focus()}"></td>
     <td align="right"><input type="text" name="jsonst" size="10"  onkeydown="if(event.keyCode=='39') {this.form.jsumme.focus()} else if (event.keyCode=='37') {this.form.jnk.focus()} else if (event.keyCode=='40') {this.form.fsonst.focus()} else if (event.keyCode=='38') {this.form.dsonst.focus()}"></td>
     <td align="right"><input type="text" name="jsumme" size="10"  onkeydown="if(event.keyCode=='39') {this.form.jnetto.focus()} else if (event.keyCode=='37') {this.form.jsonst.focus()} else if (event.keyCode=='40') {this.form.fsumme.focus()} else if (event.keyCode=='38') {this.form.dsumme.focus()}"></td>
    <td align="right">&nbsp;</td>
  </tr>
  <tr>
    <td>Feb.</td>
    <td align="right"><input type="text" name="fnetto" size="10"  onkeydown="if(event.keyCode=='39') {this.form.fnk.focus()} else if (event.keyCode=='37') {this.form.fsumme.focus()} else if (event.keyCode=='40') {this.form.mnetto.focus()} else if (event.keyCode=='38') {this.form.jnetto.focus()}"></td>
    <td align="right"><input type="text" name="fnk" size="10" onkeydown="if(event.keyCode=='39') {this.form.fsonst.focus()} else if (event.keyCode=='37') {this.form.fnetto.focus()} else if (event.keyCode=='40') {this.form.mnk.focus()} else if (event.keyCode=='38') {this.form.jnk.focus()}"></td>
    <td align="right"><input type="text" name="fsonst" size="10"  onkeydown="if(event.keyCode=='39') {this.form.fsumme.focus()} else if (event.keyCode=='37') {this.form.fnk.focus()} else if (event.keyCode=='40') {this.form.msonst.focus()} else if (event.keyCode=='38') {this.form.jsonst.focus()}"></td>
    <td align="right"><input type="text" name="fsumme" size="10"  onkeydown="if(event.keyCode=='39') {this.form.fnetto.focus()} else if (event.keyCode=='37') {this.form.fsonst.focus()} else if (event.keyCode=='40') {this.form.msumme.focus()} else if (event.keyCode=='38') {this.form.jsumme.focus()}"></td>
    <td align="right">&nbsp;</td>
  </tr>

Alles anzeigen

Der JS Teil hier ist ... damit ich mit den Pfeiltasten den Courser bewegen kann .... ( Ist aber egal)

Ist das jetzt besser erklärt?

/edit

Ich will qasi das sich der Inhalt von dem Feld name="jnetto" direkt in das Feld name="fnetto" .... "projeziert" und soweit alle 12 Monate. Und wie gesagt das sich die Summe dann auch errechnet ...

synaptic

also hast du alle 12 monate auf einer seite und kannst quasi 1 jahr über ein formular vorbereiten?

also für ein einfacheres coding empfehle ich dir hierfür jquery, das ding frisst nich viele KB und is wirklich mächtig.

denn über den class-selektor könnteste viele elemente auf einmal packen.

schick mal dein gesamtes formular, dann schau ich gleich ma drüber..
schreib dann nochmal bitte genau dazu welche werte überall eingetragen werden sollen.

DoCtoR

Habe dir gerade eine pn geschickt.... danke

synaptic

soo also ich schieb dir ma nen code rüber..
dafür musste jquery einbinden und ich gehe dabei davon aus, dass du alle formulare (also form-tags) in einer datei hast...
(davon werden aber noch lange nicht alle in die db eingetragen..)

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>


<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>    
    <script type="text/javascript">
        function transferValue(myval){
            $('.netto').val(myval);
        }
        $(document).ready(function(){
            $('.netto').keyup(function(){
                transferValue($(this).val());
            });
        });
    </script>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            border:0 none;
        }
        body{
            background:#fff;
            color:#ededed;
            font-size:14px;
            line-height:20px;
            padding:50px;
        }
        input{
            background:#ccc;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <form action="#" method="post" name="Jan">
        <input type="text" class="netto" name="jnetto"><input type="text" name="jnk"><input type="text" name="jsonst"><input type="text" name="jsumme">
        <input type="submit" value="OK">
    </form>


    <form action="#" method="post" name="Feb">
        <input type="text" class="netto" name="fnetto"><input type="text" name="fnk"><input type="text" name="fsonst"><input type="text" name="fsumme">
        <input type="submit" value="OK">
    </form>
</body>
</html>

Alles anzeigen

DoCtoR

Hab wieder ein Problem ... das ein Teil von JS nicht auf firefox geht .... wor a kann es liegen? Unter Opera gehts aberfunction addieref(fnetto,fnk,fsonst){ fnetto = 1*fnetto; fnk = 1*fnk; fsonst = 1*fsonst; window.Feb.fsumme.value=fnetto+fnk+fsonst; }damit wird die Summe berechnent .. und in einem Texfeld ausgegeben

Warum wird hier so komisch angezeigt?hier nochmal:function addieref(fnetto,fnk,fsonst){ fnetto = 1*fnetto; fnk = 1*fnk; fsonst = 1*fsonst; window.Feb.fsumme.value=fnetto+fnk+fsonst; }

synaptic

probiers ma hiermit..

beachte die änderungen bei den inputs
is nich die optimal-lösung, sollte aber funktionieren.
die summe wird berechnet, sobald das summenfeld den fokus bekommt..

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>


<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>    
    <script type="text/javascript">
        function transferValue(myval){
            $('.netto').val(myval);
        }
        function calcMonth(month, target){
            var thisElement = $('#'+month);
            var array_inputs = thisElement.children('input:text');
            var value = 0;

            for(i=0; i < array_inputs.length; i++){
                if(array_inputs[i].name != target){
                    value += parseInt(array_inputs[i].value);
                }
            }
            $('#'+target).val(value);
        }
        $(document).ready(function(){
            $('.netto').keyup(function(){
                transferValue($(this).val());
            });
            $('.summe').focusin(function(){
                var thisElement = $(this);
                var month = thisElement.parent('form').attr('id');
                var target = thisElement.attr('id');
                calcMonth(month, target)
            });
        });
    </script>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            border:0 none;
        }
        body{
            background:#fff;
            color:#ededed;
            font-size:14px;
            line-height:20px;
            padding:50px;
        }
        input{
            background:#ccc;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <form action="#" method="post" name="Jan" id="jan">
        <input type="text" class="netto" name="jnetto"><input type="text" name="jnk"><input type="text" name="jsonst"><input type="text" class="summe" id="jsumme" name="jsumme">
        <input type="submit" value="OK">
    </form>


    <form action="#" method="post" name="Feb" id="feb">
        <input type="text" class="netto" name="fnetto"><input type="text" name="fnk"><input type="text" name="fsonst"><input type="text" class="summe" id="fsumme" name="fsumme">
        <input type="submit" value="OK">
    </form>
</body>
</html>

Alles anzeigen

Tags