Javascript HTML Felder Dynamisch Ergebnis ausrechnen lassen

  • Hallo,


    ich habe ein kleiner Problem, und zwar möchte ich per Javascript Dynamisch ausrechnen lassen, was der Benutzer in 2 Felder eingegeben hat.


    Mein Codeschnipsel sieht so aus ( so klappt es :(




    JavaScript
    $('form#testForm :input').change(function() {
        var result = 0;
        $("form#testForm :input").each(function() {
            var test1 = $(".test1").val();
            var test2 = $(".test2").val();
            result = (Number(test1)) + Number(test2)
        });
        $(".priceresult").val(result);
    });


    Aaaaber ich habe es so, dass man immer ein neues Feld hinzufügen kann und dort soll der Javascript auch funktionieren.
    Wenn ich in HTML eine Klasse mit [] Angebe, kann man das in Java auch irgendwie verwenden?


    Screenshot wie es ausssieht:

    html-seminar.de/woltlab/attachment/1831/Ich hoffe ihr könnt mir helfen, bin echt am verzweifeln...


    Vielen Dank im voraus ;)


    LG

  • Zitat

    Wenn ich in HTML eine Klasse mit [] Angebe

    Das kenne ich nur von den Namen von Formularelementen, aber ich lerne immer gern dazu.

    Wenn ich mir dein Javascript ansehe, scheint es darum zu gehen, die Werte der Eingabefelder aufzusummieren. Das lässt sich leicht machen: Gib den betr. Elementen eine Klasse (kann ja noch andere Eingabefelder geben, die in die Prozedur nicht einbezogen werden sollen). Dann kannst Du sie in einer Schleife abarbeiten und die Werte summieren:

    Code
    $('form#testForm input').change(function() {
        var result = 0;
        var inputs = $("form#testForm input.summand");
        inputs.each(function(idx, ele) {
            result += $(this).val();
        });
        $(".priceresult").val(result);
    });

    Dann werden automatisch alle berücksichtigt.

  • Hallo,


    geht schon in die richtige Richtung.

    Allerdings stimmt dann die "Formel" nicht bei der Berechnung.


    Wenn der Benutzer bei Menge 2 eingibt und bei Einzelpreis 2 dann soll 4 rauskommen.

    Und nicht 022.

    Dann kommt aber halt das Problem was ich meinte, wenn ich noch ein Feld hinzufüge dann geht dort die Berechnung nicht mehr..



    Wenn das Inputfeld nur einmal da ist:

    html-seminar.de/woltlab/attachment/1836/


    Und wenn man z.B. ein zweites oder mehrere hinzufügt:html-seminar.de/woltlab/attachment/1837/


    Und da habe ich einen hänger/denkfehler...


    Ich denke man müsste mit Arrays oder so arbeiten, oder denke ich da komplett falsch?

  • Wenn ich in HTML eine Klasse mit [] Angebe, kann man das in Java auch irgendwie verwenden?

    Geht wie schon angedeutet nur bei Formularfeldern. Für die Gruppierung von HTML Elementen kannst Du auf die CSS-Eigenschaft class zurückgreifen.


    Was aber definitiv falsch ist, ist sowas hier: id="id_19[]"

    Eine id hat in HTML eindeutig zu sein!


    Was die Berechnung angeht, würde ich denken, dass er die Eingaben nicht als Zahlen wertet, sondern als String zusammenhängt.

    Formularfelder werden per Standard immer als Text übermittelt. Es ist möglich, dass Du diese Werte für die Addition erst zu einem Integer ( sofern Du nur Ganzzahlen hast ) parsen musst: parseInt('2').

  • Hallo,


    entschuldigung für die späte Antwort, war Zeitlich verhindert.


    Was aber definitiv falsch ist, ist sowas hier: id="id_19[]"

    Eine id hat in HTML eindeutig zu sein!

    Okay und wie würde ich das denn hinkriegen, dass die einzelnen Inputfelder eine dynamische Zuweisung kriegen, damit ich per jQuery das ganze berechnen kann?

    Mir geht es ja darum, einem Layout Form bei 2 Feldern eine ID/Klasse zu vergeben, mit der ich in jQuery das Ergebnis ausrechnen lassen kann.

    Das ganze soll aber nicht statisch sonder dynamisch sein, bedeutet wenn automatisch mit einem anderen jQuery Function das selbe Feld hinzugefügt wird das dann auch dort einzeln im Block die Berechnung funktioniert.


    Es gibt bestimmt eine Lösung oder einen Ansatz, aber ich komme nicht drauf.

  • Ohne jetzt Deinen Code im Detail zu betrachten, mal als simples native JS:

    funktioniert dann´auch dynamisch und alles, was Du benötigst.

    teste und baue es für Deine Bedürfnisse um...


    Hinweis: Für M$ Browser müssen die forEach gegen gewöhnliche for() Statements ausgetauscht werden.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!