JS soll alle value zusammenrechnen

Xlear

Hallo ich habe hier eine Funktion gebastelt die ohne Submit-butten eine Menge*Preis berechnet und dann in erg+id ausgibt.

Wie schafft man es jetzt alle value (erg+id (id änder sich bei jedem Formfeld)) zusammen zu rechnen.

Mein Code bis jetzt:

Code

function addieren(id,menge,preis){
var id = (id);
var menge = (menge);
var preis = (preis);
var erg = menge*preis;
window.document.getElementById('erg'+id).value = erg
}


<form id="1" action="#" method="post">
<input type="text" name="1" id="1" onkeyup="addieren(1,value,10.00)" value="0" />
<input type="text" name="erg1" id="erg1" />
</form>


<form id="2" action="#" method="post">
<input type="text" name="2" id="2" onkeyup="addieren(2,value,20.00)" value="0" />
<input type="text" name="erg2" id="erg2" />
</form>




<form id="ges" action="#" method="get">
<input type="text" name="ges1" id="ges1" />
</form>

Alles anzeigen

Will mich ein wenig mit JS auseinander setzen. Ist also nur ein Beispiel

Und gleich noch eine Frage: Gibt es eien möglichkeit eig mit JS sachen in MYSQL Datenbanken zu schreiben. Ohne das die Seite neu Läd?

synaptic

ich könnte dir das ganze in weniger als 15 minuten x-browserfähig schreiben, aber da du ja was lernen willst bitte ich dich vorerst mal deinen quellcode zu kommentieren und mir danach jeden einzelnen schritt zu erklären.

die erklärung ungefähr so:
function addieren(id,menge,preis){ //hier bennene ich die funktion und.. bla
var id = (id); //hier initialisiere ich die variable id mit blubb...

wenn du das dann alles fertig hast, werde ich dir schritt für schritt zeigen wo deine fehler sind, ich denke so ist dein lerneffekt am höchsten

Xlear

Code

<script type="text/javascript">
function addieren(id,menge,preis){                        // Funktion "addieren" mit den Werten "id", "menge", "preis",wird übergeben
var id = id;                                            // Variable "id" wird deklariert
var menge = menge;                                        // Variable "menge" wird deklariert
var preis = preis;                                        // Variable "preis" wird deklariert
var erg = menge*preis;                                    // Variable "erg" wird errechnen mit Variable "menge" und "preis"
window.document.getElementById('erg'+id).value = erg    // Variable "erg" wird in Element "erg"+"id" ausgegeben
}
</script>






<form id="form1" action="#" method="post">                        <!-- Form mit "id" "form1" -->
<input type="text" id="1" onkeyup="addieren(id,value,10.00)"/>    <!-- Input "id" "1" Wert "id","value","preis" übergeben -->
<input type="text" id="erg1" />                                    <!-- Input "id" "erg1" -->
</form>                                                            <!-- Form ende -->


<form id="form2" action="#" method="post">                        <!-- Form mit "id" "form2" -->
<input type="text" id="2" onkeyup="addieren(id,value,20.00)"/>    <!-- Input "id" "2" Wert "id","value","preis" übergeben -->
<input type="text" id="erg2" />                                    <!-- Input "id" "erg1" -->
</form>                                                            <!-- Form ende -->


<form id="ges" action="#" method="post">                        <!-- Form mit "id" "ges" -->
<input type="text" id="ges1" />                                    <!-- Input "id" "es1" -->
</form>                                                            <!-- Form ende -->

Alles anzeigen

So würd ich es machen hab was verbessert bei den Formular ID

und hab raus gefunden das ich das hier nicht mehr brauche:

Code

var id = id;
var menge = menge;
var preis = preis;

Also Quelltext bis jetzt:

Code

<script type="text/javascript">
function addieren(id,menge,preis){                        // Funktion "addieren" mit den Werten "id", "menge", "preis",wird übergeben
var erg = menge*preis;                                    // Variable "erg" wird errechnen mit Variable "menge" und "preis"
window.document.getElementById('erg'+id).value = erg    // Variable "erg" wird in Element "erg"+"id" ausgegeben
}
</script>






<form id="form1" action="#" method="post">                        <!-- Form mit "id" "form1" -->
<input type="text" id="1" onkeyup="addieren(id,value,10.00)"/>    <!-- Input "id" "1" Wert "id","value","preis" übergeben -->
<input type="text" id="erg1" />                                    <!-- Input "id" "erg1" -->
</form>                                                            <!-- Form ende -->


<form id="form2" action="#" method="post">                        <!-- Form mit "id" "form2" -->
<input type="text" id="2" onkeyup="addieren(id,value,20.00)"/>    <!-- Input "id" "2" Wert "id","value","preis" übergeben -->
<input type="text" id="erg2" />                                    <!-- Input "id" "erg1" -->
</form>                                                            <!-- Form ende -->


<form id="ges" action="#" method="post">                        <!-- Form mit "id" "ges" -->
<input type="text" id="ges1" />                                    <!-- Input "id" "es1" -->
</form>                                                            <!-- Form ende -->

Alles anzeigen

synaptic

HTML

<html>


<head>
  <title></title>
  <script type="text/javascript">
function addieren(id,menge,preis){                        // Funktion "addieren" mit den parametern "id", "menge", "preis"                                     
var erg = menge*preis;                                    // Variable "erg" wird errechnet über "menge" und "preis"
input1 = document.getElementById("erg1");
input2 = document.getElementById("erg2");
document.getElementById('erg'+id).value = erg             // Variable "erg" wird über Element "erg"+"id" ausgegeben
if(input1.value != "" && input2.value!= ""){              //wenn in den inputfeldern 1 und 2 was drinsteht wird die bedingung erfüllt
document.getElementById("ges1").value=parseInt(input1.value)+parseInt(input2.value); //das gesamtergebnis errechnet und in ges1 ausgegeben
}


}
</script>
</head>
<body>








                 
<input type="text" id="1" onkeyup="addieren('1',this.value,10.00)"/>    <!-- Funktion addieren wird aufgerufen, die ID des Feldes wird übergeben,  -->
<input type="text" id="erg1" />                                    <!-- Input "id" "erg1" -->                                               
<br />
<input type="text" id="2" onkeyup="addieren(this.id,value,20.00)"/>    <!-- Iid-übergabe durch schlüsselwort "this" -->
<input type="text" id="erg2" />                                    <!-- Input "id" "erg1" -->
<br />
<input type="text" id="ges1" />                                    <!-- Input "id" "ges1" -->


</body>
</html>

Alles anzeigen

also die formtags brauchste net bei javascript, weil du ja kein formular absendest...
dein script hat doch an sich schon fast gefruchtet, du musst lediglich beim aufruf der funktion die werte richtig übergeben, entweder in hochkommata oder mit dem schlüsselwort "this"
da du ja grundlegende kenntnisse hast, kannste dir ja mal die js-basics aus meiner signatur reinstopfen, des design hab ich bis dato noch immer nicht umschrauben können(is nur nen design-dummy, damit ich ne klare abgrenzung beim coden hatte ), werd ich aber noch tun^^ (komm aus mangel an zeit einfach net dazu)
ist für anfänger die gar keine ahnung haben noch net so geeignet, aber du hast ja schon grundkenntnisse, evtl hilfts dir weiter.
bei fragen zu dem ding steh ich via pn zur verfügung- auch für anregungen.

Xlear

ok so an sich geht es ja schon mal schön danke erstmal, aber angenommen die Seite wird mit PhP aus einer Datenbank generiert, dann müsste ich ja jede einzelne Zeile immer per Hand ändern.

Code

input1 = document.getElementById('erg');
input2 = document.getElementById('erg');


document.getElementById('ges1').value = parseInt(input1.value) + parseInt(input2.value);

gibt es da keine Funktion wie bei PhP z.B.

Code

document.getElementById('ges1').value += parseInt(input1.value);

oder sowas?

synaptic

php läuft serverside.. da müssteste dann doch mit nem echten formular arbeiten und die inhalte auswerten.. mit php kannste ja keine dynamik erreichen, wie mit javascript.. aber das zusammenspiel beider sprachen kann schon was

sollte ich dich falsch verstanden habe, beschreibe dein prob nochmal

Xlear

Ja ich meine, das ja im JS eindeutig bestimmt ist was berechnet werden soll.

Nehmen wir mal an das Formular wird aber Dynamisch mit php erstellt (Dynamisch in dem Sinn, wenn man Die Datenbank updatet ist es ja auch auf der Seite)

Gibt es ne Möglichkeit das JS klein zu halten oder müsste ich jetzt auch noch eine While-Schleife (PHP) bei dem JS machen, damit "automatisch" die restlichen berechnet werden?

z.B.

PHP

<script type="text/javascript">
function addieren(id,menge,preis){                        // Funktion "addieren" mit den parametern "id", "menge", "preis"                                     
var erg = menge*preis;                                    // Variable "erg" wird errechnet über "menge" und "preis"


 <?php
  $abfrage = "SELECT url, urlname FROM links";
  $ergebnis = mysql_query($abfrage);
  while($row = mysql_fetch_object($ergebnis))
    {
    echo "input2 = document.getElementById(\"erg".$row[id]."\")";
    }
  ?>


document.getElementById("ges1").value =  <?php
  $abfrage = "SELECT url, urlname FROM links";
  $ergebnis = mysql_query($abfrage);
  while($row = mysql_fetch_object($ergebnis))
    {
    echo "parseInt(input".$row[id].".value)+";
    }
  ?>




document.getElementById('erg'+id).value = erg             // Variable "erg" wird über Element "erg"+"id" ausgegeben
}
</script>

Alles anzeigen

Das Beispiel würde ja So gehne, aber das JS wird halt sehr lang

Hoffe hab mich verständlich ausgedrückt XD

synaptic

ich glaube aber, dass das der richtige weg ist

Tags