Select On Change not working correct

Question

I have a select option that calls a function that needs to be triggered on change. But now it's triggered when the page is loaded and on change. See below:

$(function () {

$('select[id^="iZondagbegin_"]').on('change', uren("Zondag"));
$('select[id^="iZondageinde_"]').on('change', uren("Zondag"));
$('select[id^="iMaandagBegin_"]').on('change', uren("Maandag"));
$('select[id^="iMaandageinde_"]').on('change', uren("Maandag"));
$('select[id^="iDinsdagbegin_"]').on('change', uren("Dinsdag"));
$('select[id^="iDinsdageinde_"]').on('change', uren("Dinsdag"));
$('select[id^="iWoensdagbegin_"]').on('change', uren("Woensdag"));
$('select[id^="iWoensdageinde_"]').on('change', uren("Woensdag"));
$('select[id^="iDonderdagbegin_"]').on('change', uren("Donderdag"));
$('select[id^="iDonderdageinde_"]').on('change', uren("Donderdag"));
$('select[id^="iVrijdagbegin_"]').on('change', uren("Vrijdag"));
$('select[id^="iVrijdageinde_"]').on('change', uren("Vrijdag"));
$('select[id^="iZaterdagbegin_"]').on('change', uren("Zaterdag"));
$('select[id^="iZaterdageinde_"]').on('change', uren("Zaterdag"));

function uren(dag) {


    var vandaag = datumvandaag();
    var pauze = ($('[title="Pauze"]').val());
    var error;

    $('input[id^="i' + dag + '_"]').val("");

    //get values
    var tijdStart = ($('select[id^="i' + dag + 'begin_"]').val());
    var uurStartControle = +($('select[id^="i' + dag + 'begin_"]').val());
    tijdStart += ":" + ($('select[id^="i' + dag + 'begin_"]').filter("[id$='_$DateTimeFieldDateMinutes']").val());
    var minutenStartControle = +($('select[id^="i' + dag +'begin_"]').filter("[id$='_$DateTimeFieldDateMinutes']").val());

    //var datezondagstart = new Date(vandaag + tijdstart + ":00");

    var tijdStop = ($('select[id^="i' + dag + 'einde_"]').val());
    var uurStopControle = +($('select[id^="i' + dag + 'einde_"]').val());
    tijdStop += ":" + ($('select[id^="i' + dag + 'einde_"]').filter("[id$='_$DateTimeFieldDateMinutes']").val());
    var minutenStopControle = +($('select[id^="i' + dag + 'einde_"]').filter("[id$='_$DateTimeFieldDateMinutes']").val());

    if (uurStartControle >= uurStopControle && minutenStartControle >= minutenStopControle || uurStopControle <= uurStartControle) {
        alert("Tijd is ongeldig!");
        error = 1;

    }

    if (error != 1) {
        var totaleTijd = tijdsverschil(tijdStart, tijdStop, pauze);
        if (totaleTijd != '00:00') {
            $('input[id^="i' + dag + 'uren_"]').val(totaleTijd);
        }
        else{
            alert("Tijd is ongeldig!");
        }
    }
}

});

Any one have an idea what i'm doing wrong? I'm i call it the wrong way?

You firstly should refactorize this code and logic to use a more generic way — A. Wolff, Jul 07 '14 at 12:22

Satpal · Answer 1 · 2014-07-07T12:27:42.903

Currently You are calling uren function when you are using uren("Zondag"). You should use an anonymous function as event handler and call uren function.

Use it like

$('select[id^="iZondagbegin_"]').on('change', uren("Zondag"));

To:

$('select[id^="iZondagbegin_"]').on('change', function () {
    uren("Zondag");
});

I would recommend, You to use data-* attributes to store what need to be passed to change event handler.

Example:

HTML, Here Added a cooom class mySelect

<select class="mySelect" id="iZondagbegin_1" data-value="Zondag"> .... </select>
<select class="mySelect" id="iMaandagBegin_" data-value="Maandag"> .... </select>

Script

$('.mySelect').on('change', function () {
    uren($(this).data('value'));
});

PeterKA · Answer 2 · 2014-07-07T13:10:03.660

Please change all lines like:

$('select[id^="iZondagbegin_"]').on('change', uren("Zondag"));

To:

$('select[id^="iZondagbegin_"]').on('change', uren);

and:

<select id="iZondagbegin_...." data-value="Zondag">.....</select>

and:

function uren() {
     var value = $(this).data('value');
     //.....
}

Or better still, use a common class, .myclass say, on all the select elements and do the binding with one statement.

$('select.myclass').on('change', uren);
.....
<select id="iZondagbegin_...." data-value="Zondag" class="myclass">.....</select>
.....
function uren() {
     var value = $(this).data('value');
     //.....
}

When you pass arguments like that or when you provide (), the function will be invoked immediately. You don't want that.

still need to pass argument – A. Wolff Jul 07 '14 at 12:22 — A. Wolff, Jul 07 '14 at 12:22

score 1 · Answer 3 · answered Jul 07 '14 at 12:31

1

There's already two answers that point out your issue; an alternative solution is to let jQuery handle contexts with $.proxy:

$('select[id^="iZondagbegin_"]').on('change', $.proxy(uren, null, "Zondag");

More info here

answered Jul 07 '14 at 12:31

blgt

8,135
1
25
28

Select On Change not working correct

3 Answers3

Example:

Linked