[GELÖST] JS/jquery Änderung Aufgrund von zwei Variablen

jeff1980 · 19. März 2019 11:24

Hallo,

mein erster Post im neuen/alten Forum :-)
Super, dass es weiter geht.

Und gleich ein Problem. Ich bin kein JS/jquery-Experte und benötige folgende Funktion:
Es gibt eine Checkbox (an oder aus) und ein Dropdown mit 2 Werten (monatlich, jährlich).
Je nach Auswahl soll in einem dritten Feld (type=number) der min-Wert entsprechend angepasst werden.
Folgende Werte sollen generiert werden:
Checkbox deaktiviert & Dropdown monatlich -> 4
Checkbox deaktiviert & Dropdown jährlich -> 48
Checkbox aktiviert & Dropdown monatlich -> 7
Checkbox aktiviert & Dropdown jährlich -> 84

Das Formular wird mit dem Formbuilder zusammengebaut, ich habe also eindeutige ID's, auf die ich zugreifen kann.
Mit dieser Zeile kann ich immerhin schon mal den min-Wert per JS anpassen.

Hier klicken, um den Code zum Kopieren zu markieren

[== JS ==]
document.getElementById("fbrp__89").min = x;

#fbrp__81 -> Checkbox (taucht hier noch gar nicht auf, da ich mit den Multiplikatoren 4 und 7 arbeite)
#fbrp__87 -> ist das Dropdown
#fbrp__89 -> ist das Text-/Nummernfeld, bei dem der Wert für min geändert werden soll

Ich müsste jetzt eine schlaue Abfrage haben, die die o.g. Werte aus dem Zustand von fbrp__81 und fbrp__87 berechnet bei fbrp__89 einträgt.
Und da verließen sie mich. Ich habe nach Funktionen gesucht, aber nichts Passendes gefunden - wahrscheinlich, weil ich gar nicht wirklich weiß, wonach ich suchen muss.

Bin für jeden Tipp dankbar :-)

NaN · 19. März 2019 16:23

Checkbox (taucht hier noch gar nicht auf, da ich mit den Multiplikatoren 4 und 7 arbeite)

Was wird da multipliziert?
Wenn ich Deine Anforderung richtig verstehe, lautet die Formel doch folgendermaßen (pseudo code):

( grundwert + checkbox.value ) * dropdown.value = text.min

Oder?

d.h. in Zahlen...

checkbox nicht aktiviert:
( 4 + 0 ) * 1 (dropdown = monatlich) = 4
( 4 + 0 ) * 12 (dropdown = jährlich) = 48

checkbox aktiviert:
( 4 + 3 ) * 1 (dropdown = monatlich) = 7
( 4 + 3 ) * 12 (dropdown = jährlich) = 84

D.h. daraus resultiert folgendes Formular:

Hier klicken, um den Code zum Kopieren zu markieren

<form>
    <input type="checkbox" value="3" id="fbrb__81" />
    <select id="fbrb__87">
        <option value="1">monatlich</option>
        <option value="12">jährlich</option>
    </select> 
    <input type="number" value="4" min="4" id="fbrb__89" />
</form>

und eines der beiden folgenden Javascripts...

1. jQuery:

Hier klicken, um den Code zum Kopieren zu markieren

jQuery( document ).ready( function() {
        
    $( '#fbrb__81, #fbrb__87' ).on( 'change' , function() {
        
        var baseValue     = 4,
            $checkBox     = $( '#fbrb__81' ),
            checkBoxValue = parseInt( $checkBox.is(':checked') ? $checkBox.val() : 0 ),
            dropDownValue = parseInt( $( '#fbrb__87' ).val() ),
            min           = ( 4 + checkBoxValue ) * dropDownValue,
            $inputNumber  = $( "#fbrb__89" );
        
        $inputNumber.attr( 'min' , min );
        if( $inputNumber.val() < min )
            $inputNumber.val( min );
        
    });
    
});

2. Ohne jQuery:

Hier klicken, um den Code zum Kopieren zu markieren

document.querySelectorAll('#fbrb__81 , #fbrb__87').forEach( function( elm ) {

     elm.addEventListener( 'change' , function() {

        var baseValue     = 4,
            checkBox      = document.getElementById( 'fbrb__81' ),
            checkBoxValue = parseInt( checkBox.checked ? checkBox.value : 0 ),
            dropDownValue = parseInt( document.getElementById( 'fbrb__87' ).value ),
            min           = ( 4 + checkBoxValue ) * dropDownValue,
            inputNumber   = document.getElementById( 'fbrb__89' );
        
        inputNumber.min = min;
        if( inputNumber.value < min )
            inputNumber.value = min;

    });
    
});

Der Unterschied ist marginal.
jQuery ist ca. 70 Byte kleiner.
Beim zweiten Beispiel weiß ich gerade nicht, wie Browser-kompatibel das ist.
Ältere Browser - insbesondere IE < 9 oder so - dürften damit ein Problem haben.
Aber womit hat der IE keine Probleme?
IE < 10 kann mit "min" eh nichts anfangen.

jeff1980 · 19. März 2019 19:32

Hallo NaN,

vielen Dank für die Antwort. Bin leider heute und wahrscheinlich auch morgen noch unterwegs und kann es nicht direkt einbauen und testen :-(
Aber soweit ich JS/jQuery lesen kann, erscheint es mir schlüssig und ich freue mich darauf, es auszuprobieren. Ich werde berichten.

jeff1980 · 22. März 2019 11:35

So, jetzt hat es geklappt.

Habe mit etwas Unterstützung den Code noch weiter angepasst:

Hier klicken, um den Code zum Kopieren zu markieren

[== jquery ==]
jQuery( document ).ready( function() {
        
    $( '#fbrp__81, #fbrp__87' ).on( 'change' , function() {
        
        var baseValue     = 4,
            $checkBox     = $( '#fbrp__81' ),
            checkBoxValue = $checkBox.is(':checked') ? 3 : 0,
            dropDownValue = parseInt( $( '#fbrp__87' ).val() ),
            min           = ( 4 + checkBoxValue ) * ((dropDownValue > 1) ? 12 : 1),
            $inputNumber  = $( "#fbrp__89" );
        
        $inputNumber.attr( 'min' , min );
        $inputNumber.val( min );
    });
    
});

Leider lässt mich der Formbuilder die "internen" Values nicht festlegen. So war value bei der Checkbox immer "t" (warum auch immer) und beim Dropdown wurden die Optionen einfach durchnummeriert (value 1, 2 usw.).
Aber mit o.g. Code klappt es wunderbar.

NaN · 22. März 2019 13:59

und beim Dropdown wurden die Optionen einfach durchnummeriert (value 1, 2 usw.)

Ist leider ein Fehler im Formbuilder: https://www.cms-1.org/forum/viewtopic.p … 651#p10651
Dachte, der wäre bereits behoben.
Ist immerhin 8 Jahre her!

Forum für CMS/made simple

#1 19. März 2019 11:24

[GELÖST] JS/jquery Änderung Aufgrund von zwei Variablen

#2 19. März 2019 16:23

Re: [GELÖST] JS/jquery Änderung Aufgrund von zwei Variablen

#3 19. März 2019 19:32

Re: [GELÖST] JS/jquery Änderung Aufgrund von zwei Variablen

#4 22. März 2019 11:35

Re: [GELÖST] JS/jquery Änderung Aufgrund von zwei Variablen

#5 22. März 2019 13:59

Re: [GELÖST] JS/jquery Änderung Aufgrund von zwei Variablen

Fußzeile des Forums