Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 19. März 2019 11:24

jeff1980
Server-Pate
Ort: Dortmund
Registriert: 26. November 2010
Beiträge: 616

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

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.

[== 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 :-)

Offline

#2 19. März 2019 16:23

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.235

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

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:

<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:

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:

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.

Offline

#3 19. März 2019 19:32

jeff1980
Server-Pate
Ort: Dortmund
Registriert: 26. November 2010
Beiträge: 616

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

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.

Offline

#4 22. März 2019 11:35

jeff1980
Server-Pate
Ort: Dortmund
Registriert: 26. November 2010
Beiträge: 616

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

So, jetzt hat es geklappt.

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

[== 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.

Offline

#5 22. März 2019 13:59

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.235

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

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!

Offline