✔ Mehrere Formulare und ein Script

arraybreak

arraybreak

Erfahrenes Mitglied
Tag zusammen,

da ich Javascript leider nicht beherrsche und meine Suchergebnisse leider nichts gebracht haben, hoffe ich, dass ihr mir helfen könnt.

Ich habe mehrere HTML-Formulare in welche zahlen eingegeben werden, ungefähr so:

HTML: 
<form action="http://blabla.de/script.php" method="post" name="form1" target="_blank">

<input class="rechner" id="Betrag1" type="text" name="Betrag1" value="0" />
<input class="rechner" id="Betrag2" type="text" name="Betrag2" value="0" />

<input class="rechner-button" onclick="Berechne();" type="button" value="Berechnen" />

<input class="rechner-button-main" type="submit" name="submit" value="Angebot erstellen" />

</form>


<form action="http://blabla.de/script.php" method="post" name="form2" target="_blank">

<input class="rechner" id="Betrag1" type="text" name="Betrag1" value="0" />
<input class="rechner" id="Betrag2" type="text" name="Betrag2" value="0" />

<input class="rechner-button" onclick="Berechne();" type="button" value="Berechnen" />

<input class="rechner-button-main" type="submit" name="submit" value="Angebot erstellen" />

</form>

Warum die Inputs gleiche ID's und Namen haben ist hier egal, dient nur als Beispiel.
Auf jeden Fall brauche ich diese mehrere FORMS (form1 und form2).

Jetzt zum eigentlichen Problem.
Ich habe einen Javascript, der alles was eingegeben wurde ausrechnet, er stammt nicht von mir und ist sehr groß.

also "onclick="Berechne();"" werden die Zahlen an script übergeben, der ungefähr so aussieht:


Javascript: 
function Berechne() {

document.form1.Betrag1.value = bet1;
document.form1.Betrag2.value = bet2;
....
}

Bevor ich jetzt den Script kopiere(der sehr groß ist) und daraus eine 2 Funktion mit Berechne2() erstelle, wollte ich fragen, ob man es anders machen kann, ich denke jetzt an so was (Nur ein Beispiel)

Javascript: 
function Berechne() {

if (form1) { document.form1......
} else if (form2) { document.form2...... }

document.[FORM1 or FORM2].Betrag1.value = bet1;
document.[FORM1 or FORM2].Betrag2.value = bet2;
....

Sprich der Script erkennt dann selber welches Formular benutzt wird und stellt es auf "form1" oder "form2" ein und ich habe weiterhin nur ein Script (eine Funktion) die aber je nach Bedarf die Angabe des Forms ändert in "form1" oder "form2".

Hoffe ihr könnt mir folgen.

Gruß Alex
 
Ja, das ist möglich. Die Umsetzbarkeit (wie mühselig das ist) hängt davon ab, wie das externe Skript programmiert wurde.
 
Einfacher als eine If-Anweisung wäre es das Formular-Element zu übergeben und dieses dann zu nutzen.
Dazu müsstest du das Skript soweit ändern, dass es so in der Art aussieht.
Javascript: 
function Berechne( form ) {
   ...
   form.Betrag1.value = bet1;
   form.document.form1.Betrag2.value = bet2;
   ...
}

Der Aufruf müsste dann so in der Art aussehen.
HTML: 
<input class="rechner-button" onclick="Berechne(this.parentNode);" type="button" value="Berechnen" />
 
ComFreek hat gesagt.:
Ja, das ist möglich. Die Umsetzbarkeit (wie mühselig das ist) hängt davon ab, wie das externe Skript programmiert wurde.
Zum Vergrößern anklicken....

Freut mich zu hören, das es geht. genauere Vorschläge hast du nicht?

merzi86 hat gesagt.:
Einfacher als eine If-Anweisung wäre es das Formular-Element zu übergeben und dieses dann zu nutzen.
Dazu müsstest du das Skript soweit ändern, dass es so in der Art aussieht.
Javascript: 
function Berechne( form ) {
   ...
   form.Betrag1.value = bet1;
   form.document.form1.Betrag2.value = bet2;
   ...
}

Der Aufruf müsste dann so in der Art aussehen.
HTML: 
<input class="rechner-button" onclick="Berechne(this.parentNode);" type="button" value="Berechnen" />
Zum Vergrößern anklicken....


Wieso sind in deinem Beispiel der Betrag1 und Betrag2 verschieden geschrieben? Bitte erkläre doch mal was genau onclick="Berechne(this.parentNode);" bedeutet, ich meine diese (this.parentNode) - Bin ne Niete in Javascript, daher die Frage.
 
ComFreek hat gesagt.:
Ohne den Code der Funktion Berechne() zu sehen, kann ich nur vage Vermutungen aufstellen.
Am besten kopierst du sie komplett hier rein (sofern du das lizenzrechtlich darfst) anstatt sie sie zu zerstückeln.
Zum Vergrößern anklicken....

Wenn du dir das antun willst :p
Javascript: 
function Berechne() {
    var whatx = document.form1.thetarif5.value;
    var darl=parseInt(document.form1.Darlehensbetrag.value)
    if (document.form1.Laufzeit_sd.value<5 || document.form1.Laufzeit_sd.value>25) {
    alert("Bitte gültige Laufzeit eingeben! min.5 und max. 25 Jahre");
    document.form1.Laufzeit_sd.focus();
    return false;
    }
    var lz_sd=parseInt(document.form1.Laufzeit_sd.value);
    Dat_pruef()
    var BegTag = parseInt(document.form1.VertragsbeginnTag.value);
    var BegMonat = parseInt(document.form1.VertragsbeginnMonat.value);
    var BegJahr = parseInt(document.form1.VertragsbeginnJahr.value);
    var BegDat = new Date(BegJahr, BegMonat-1, BegTag);
    document.form1.Ablaufdatum_SD.value =  "31.12."+String(BegJahr+lz_sd);
    var dauer_sd = 0;
    if ((BegTag == 1) && (BegMonat == 1)) {
    dauer_sd = lz_sd;
    } else {
    dauer_sd = parseInt(lz_sd) + 1;
    }
    var Dat3112 = new Date(BegJahr, 11, 31);
    var ZinsTage = Math.round((Dat3112-BegDat)/86400000);
    var AusBegJahr = 0;
    if ((BegTag == 1) && (BegMonat == 1)) {
    AusBegJahr = darl/100*8;
    } else {
    AusBegJahr =Math.round(darl/36500*8*ZinsTage);
    }
    var agio_sd = darl/100*5
    var qaus_sd = darl/100*2
    var ZinsQ1 = Math.min(AusBegJahr, qaus_sd);
    var geszins_sd = 0
    geszins_sd=qaus_sd*4*(dauer_sd-1)+AusBegJahr;
    document.form1.Agio_sd.value = agio_sd;
    document.form1.QAus_sd.value = qaus_sd;
    document.form1.GesZins_sd.value = geszins_sd;
    if (whatx == "Kombi_prebas_germ" || whatx == "Kombi_prebas_rus" || whatx == "Kombi_prebas_ltv" || whatx == "Kombi_prebas_franz") {
    document.form1.Zins_aus_sd.value = parseInt(Math.round(qaus_sd/3));
    document.form1.GZins_sd.value = geszins_sd;
    } else {
    document.form1.Zins_aus_sd.value = 0;
    document.form1.GZins_sd.value = 0;
    }
    document.form1.EEinz.value = parseInt(document.form1.Darlehensbetrag.value);
    if (whatx == "Kombi_prebas_germ" || whatx == "Kombi_prebas_rus" || whatx == "Kombi_prebas_ltv" || whatx == "Kombi_prebas_franz") {
    document.form1.EEinz.value = parseInt(document.form1.Darlehensbetrag.value) + parseInt(document.form1.EZ_rd.value);
    }
    document.form1.mtl_Einz.value = document.form1.MB_rd.value*12*document.form1.Laufzeit_rd.value;
    document.form1.Zins_ges.value = parseInt(document.form1.GesZins_sd.value) + parseInt(document.form1.GesZins_rd.value);
    document.form1.Rueck_ges.value = parseInt(document.form1.Zins_ges.value) + parseInt(document.form1.mtl_Einz.value) + parseInt(document.form1.EEinz.value);
    document.form1.Werte_SD.value = String(BegJahr)+";"+String(darl)+";"+String(ZinsQ1)+";"+String(AusBegJahr);
    for (var i = 1; i < 5; ++i)
        document.form1.Werte_SD.value=document.form1.Werte_SD.value+"#"+String(BegJahr+i)+";;"+String(qaus_sd)+";"+String(qaus_sd*4);
    for (var i = 5; i < dauer_sd-1; i=i+5)
        document.form1.Werte_SD.value=document.form1.Werte_SD.value+"#"+String(BegJahr+i)+";;"+String(qaus_sd)+";"+String(qaus_sd*4);
    document.form1.Werte_SD.value=document.form1.Werte_SD.value+"#"+String(BegJahr+dauer_sd-1)+";;"+String(qaus_sd)+";"+String(qaus_sd*4)+"#";
    document.form1.Gesamtwerte_SD.value="Gesamt"+";"+String(darl)+";;"+String(geszins_sd)+"#"
}
 
Nur 60 Zeilen? Der Code ist wahrlich der schönste, aber ich habe schon gedacht, dass du mir einen Code > 200 Zeilen präsentierst. :rolleyes:

Hier eine Modifikation, damit die Funktion mit beliebigen Formularen umgehen kann:
Javascript: 
function Berechne(form) {
    var whatx = form.thetarif5.value;
    var darl = parseInt(form.Darlehensbetrag.value)
    if (form.Laufzeit_sd.value < 5 || form.Laufzeit_sd.value > 25) {
        alert("Bitte gültige Laufzeit eingeben! min.5 und max. 25 Jahre");
        form.Laufzeit_sd.focus();
        return false;
    }
    var lz_sd = parseInt(form.Laufzeit_sd.value);
    Dat_pruef()
    var BegTag = parseInt(form.VertragsbeginnTag.value);
    var BegMonat = parseInt(form.VertragsbeginnMonat.value);
    var BegJahr = parseInt(form.VertragsbeginnJahr.value);
    var BegDat = new Date(BegJahr, BegMonat - 1, BegTag);
    form.Ablaufdatum_SD.value = "31.12." + String(BegJahr + lz_sd);
    var dauer_sd = 0;
    if ((BegTag == 1) && (BegMonat == 1)) {
        dauer_sd = lz_sd;
    } else {
        dauer_sd = parseInt(lz_sd) + 1;
    }
    var Dat3112 = new Date(BegJahr, 11, 31);
    var ZinsTage = Math.round((Dat3112 - BegDat) / 86400000);
    var AusBegJahr = 0;
    if ((BegTag == 1) && (BegMonat == 1)) {
        AusBegJahr = darl / 100 * 8;
    } else {
        AusBegJahr = Math.round(darl / 36500 * 8 * ZinsTage);
    }
    var agio_sd = darl / 100 * 5
    var qaus_sd = darl / 100 * 2
    var ZinsQ1 = Math.min(AusBegJahr, qaus_sd);
    var geszins_sd = 0
    geszins_sd = qaus_sd * 4 * (dauer_sd - 1) + AusBegJahr;
    form.Agio_sd.value = agio_sd;
    form.QAus_sd.value = qaus_sd;
    form.GesZins_sd.value = geszins_sd;
    if (whatx == "Kombi_prebas_germ" || whatx == "Kombi_prebas_rus" || whatx == "Kombi_prebas_ltv" || whatx == "Kombi_prebas_franz") {
        form.Zins_aus_sd.value = parseInt(Math.round(qaus_sd / 3));
        form.GZins_sd.value = geszins_sd;
    } else {
        form.Zins_aus_sd.value = 0;
        form.GZins_sd.value = 0;
    }
    form.EEinz.value = parseInt(form.Darlehensbetrag.value);
    if (whatx == "Kombi_prebas_germ" || whatx == "Kombi_prebas_rus" || whatx == "Kombi_prebas_ltv" || whatx == "Kombi_prebas_franz") {
        form.EEinz.value = parseInt(form.Darlehensbetrag.value) + parseInt(form.EZ_rd.value);
    }
    form.mtl_Einz.value = form.MB_rd.value * 12 * form.Laufzeit_rd.value;
    form.Zins_ges.value = parseInt(form.GesZins_sd.value) + parseInt(form.GesZins_rd.value);
    form.Rueck_ges.value = parseInt(form.Zins_ges.value) + parseInt(form.mtl_Einz.value) + parseInt(form.EEinz.value);
    form.Werte_SD.value = String(BegJahr) + ";" + String(darl) + ";" + String(ZinsQ1) + ";" + String(AusBegJahr);
    for (var i = 1; i < 5; ++i)
        form.Werte_SD.value = form.Werte_SD.value + "#" + String(BegJahr + i) + ";;" + String(qaus_sd) + ";" + String(qaus_sd * 4);
    for (var i = 5; i < dauer_sd - 1; i = i + 5)
        form.Werte_SD.value = form.Werte_SD.value + "#" + String(BegJahr + i) + ";;" + String(qaus_sd) + ";" + String(qaus_sd * 4);
    form.Werte_SD.value = form.Werte_SD.value + "#" + String(BegJahr + dauer_sd - 1) + ";;" + String(qaus_sd) + ";" + String(qaus_sd * 4) + "#";
    form.Gesamtwerte_SD.value = "Gesamt" + ";" + String(darl) + ";;" + String(geszins_sd) + "#";
}

Aufruf:
Javascript: 
Berechne(document.form1);
Berechne(document.form2);
 
arraybreak hat gesagt.:
Wieso sind in deinem Beispiel der Betrag1 und Betrag2 verschieden geschrieben? Bitte erkläre doch mal was genau onclick="Berechne(this.parentNode);" bedeutet, ich meine diese (this.parentNode) - Bin ne Niete in Javascript, daher die Frage.
Zum Vergrößern anklicken....
ahh Copy & Paste Fehler sry ^^
so müsste es aussehen.
Javascript: 
function Berechne( form ) {
   ...
   form.Betrag1.value = bet1;
   form.Betrag2.value = bet2;
   ...
}

arraybreak hat gesagt.:
Bitte erkläre doch mal was genau onclick="Berechne(this.parentNode);" bedeutet, ich meine diese (this.parentNode) - Bin ne Niete in Javascript, daher die Frage.
Zum Vergrößern anklicken....
JavaScript kann man direkt Elemte übergeben. Das this zeigt auf das Aktuelle Element, in diesen Fall das Element, was angeklickt wird.
Mit der Methode parentNode erhält man das übergeordnete Element (das Formular).

Das bedeutet also wir übergeben beim Aufruf der Funktion Berechne direkt das Formular, welches ausgewertet werden soll.
Da der Funktion das Formular direkt übergeben wird können die Elemente über die Variable direkt angesprochen werden und das ist ja auch der Unterschied im Teilquellcode.
Anstelle von document.form1. steht ja auch nur form. und da einmal Direkt das Formular Objekt für das form1 und einmal für die form2 übergeben wird ist eine Unterscheidung nicht mehr nötig.
Es ist allerdings Notwendig, dass beide Formulare gleich aufgebaut sind.
 
ComFreek hat gesagt.:
Nur 60 Zeilen? Der Code ist wahrlich der schönste, aber ich habe schon gedacht, dass du mir einen Code > 200 Zeilen präsentierst. :rolleyes:

Hier eine Modifikation, damit die Funktion mit beliebigen Formularen umgehen kann:
Javascript: 
function Berechne(form) {
    var whatx = form.thetarif5.value;
    var darl = parseInt(form.Darlehensbetrag.value)
    if (form.Laufzeit_sd.value < 5 || form.Laufzeit_sd.value > 25) {
        alert("Bitte gültige Laufzeit eingeben! min.5 und max. 25 Jahre");
        form.Laufzeit_sd.focus();
        return false;
    }
    var lz_sd = parseInt(form.Laufzeit_sd.value);
    Dat_pruef()
    var BegTag = parseInt(form.VertragsbeginnTag.value);
    var BegMonat = parseInt(form.VertragsbeginnMonat.value);
    var BegJahr = parseInt(form.VertragsbeginnJahr.value);
    var BegDat = new Date(BegJahr, BegMonat - 1, BegTag);
    form.Ablaufdatum_SD.value = "31.12." + String(BegJahr + lz_sd);
    var dauer_sd = 0;
    if ((BegTag == 1) && (BegMonat == 1)) {
        dauer_sd = lz_sd;
    } else {
        dauer_sd = parseInt(lz_sd) + 1;
    }
    var Dat3112 = new Date(BegJahr, 11, 31);
    var ZinsTage = Math.round((Dat3112 - BegDat) / 86400000);
    var AusBegJahr = 0;
    if ((BegTag == 1) && (BegMonat == 1)) {
        AusBegJahr = darl / 100 * 8;
    } else {
        AusBegJahr = Math.round(darl / 36500 * 8 * ZinsTage);
    }
    var agio_sd = darl / 100 * 5
    var qaus_sd = darl / 100 * 2
    var ZinsQ1 = Math.min(AusBegJahr, qaus_sd);
    var geszins_sd = 0
    geszins_sd = qaus_sd * 4 * (dauer_sd - 1) + AusBegJahr;
    form.Agio_sd.value = agio_sd;
    form.QAus_sd.value = qaus_sd;
    form.GesZins_sd.value = geszins_sd;
    if (whatx == "Kombi_prebas_germ" || whatx == "Kombi_prebas_rus" || whatx == "Kombi_prebas_ltv" || whatx == "Kombi_prebas_franz") {
        form.Zins_aus_sd.value = parseInt(Math.round(qaus_sd / 3));
        form.GZins_sd.value = geszins_sd;
    } else {
        form.Zins_aus_sd.value = 0;
        form.GZins_sd.value = 0;
    }
    form.EEinz.value = parseInt(form.Darlehensbetrag.value);
    if (whatx == "Kombi_prebas_germ" || whatx == "Kombi_prebas_rus" || whatx == "Kombi_prebas_ltv" || whatx == "Kombi_prebas_franz") {
        form.EEinz.value = parseInt(form.Darlehensbetrag.value) + parseInt(form.EZ_rd.value);
    }
    form.mtl_Einz.value = form.MB_rd.value * 12 * form.Laufzeit_rd.value;
    form.Zins_ges.value = parseInt(form.GesZins_sd.value) + parseInt(form.GesZins_rd.value);
    form.Rueck_ges.value = parseInt(form.Zins_ges.value) + parseInt(form.mtl_Einz.value) + parseInt(form.EEinz.value);
    form.Werte_SD.value = String(BegJahr) + ";" + String(darl) + ";" + String(ZinsQ1) + ";" + String(AusBegJahr);
    for (var i = 1; i < 5; ++i)
        form.Werte_SD.value = form.Werte_SD.value + "#" + String(BegJahr + i) + ";;" + String(qaus_sd) + ";" + String(qaus_sd * 4);
    for (var i = 5; i < dauer_sd - 1; i = i + 5)
        form.Werte_SD.value = form.Werte_SD.value + "#" + String(BegJahr + i) + ";;" + String(qaus_sd) + ";" + String(qaus_sd * 4);
    form.Werte_SD.value = form.Werte_SD.value + "#" + String(BegJahr + dauer_sd - 1) + ";;" + String(qaus_sd) + ";" + String(qaus_sd * 4) + "#";
    form.Gesamtwerte_SD.value = "Gesamt" + ";" + String(darl) + ";;" + String(geszins_sd) + "#";
}

Aufruf:
Javascript: 
Berechne(document.form1);
Berechne(document.form2);
Zum Vergrößern anklicken....


Danke für deine Antwort, du hast ja nur die erste Berechnung bekommen, sind noch paar andere drin, gesamt über 350 Zeilen ;)
Dachte, dass für dein Beispiel auch die 60 Zeilen ausreichen werden :D

Dein Beispiel werde ich heute noch ausprobieren ;)

LG
 
merzi86 hat gesagt.:
ahh Copy & Paste Fehler sry ^^
so müsste es aussehen.
Javascript: 
function Berechne( form ) {
   ...
   form.Betrag1.value = bet1;
   form.Betrag2.value = bet2;
   ...
}


JavaScript kann man direkt Elemte übergeben. Das this zeigt auf das Aktuelle Element, in diesen Fall das Element, was angeklickt wird.
Mit der Methode parentNode erhält man das übergeordnete Element (das Formular).

Das bedeutet also wir übergeben beim Aufruf der Funktion Berechne direkt das Formular, welches ausgewertet werden soll.
Da der Funktion das Formular direkt übergeben wird können die Elemente über die Variable direkt angesprochen werden und das ist ja auch der Unterschied im Teilquellcode.
Anstelle von document.form1. steht ja auch nur form. und da einmal Direkt das Formular Objekt für das form1 und einmal für die form2 übergeben wird ist eine Unterscheidung nicht mehr nötig.
Es ist allerdings Notwendig, dass beide Formulare gleich aufgebaut sind.
Zum Vergrößern anklicken....



Auch dir großen Dank merzi86 ;)

LG
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück