Change validation message and disable button on dropdownmenu change

Question

I have the following code:

$("#solDate").change(function () {
    if ($(this).val().trim() == '') {
        $("#solvedBy").val('Pick an option');
     }
     else {
         $("#solvedBy").val('Please, pick the issue solver');
     }
});

$("#solvedBy").change(function () {
    if ($(this).val() == 'Please, pick the issue solver') {
    //if (document.getElementById("solvedBy").valueOf == 'Please, pick the issue solver') {
        $("#saveBtn").attr('disabled', true);
        $("#slvByValMsg").text('You have solution date and no solver');
    }
    else {
        $("#saveBtn").attr('disabled', false);
        $("#slvByValMsg").text('');;
    }
});

solDate is a date textbox, while solvedBy is a dropdownmenu. Both of these scripts work perfectly, but when I try to trigger the second with the first, it breaks.

In short, the sequence is: when people choose a solution date, on the dropdown menu the text 'Please, pick the issue solver' appears. When this happens, button should get disabled and error msg should appear until the person picks a solver.

When I set the solvedBy to 'Please, pick the issue solver', the command works. When I set the date, the value of solvedBy changes, but the second script doesn't execute (I think it doesn't recognize it as a change). The commented line didn't help too.

yes you need to fire $("yourcontrol").change(); fire after value changes. — Parth Trivedi, Dec 15 '15 at 09:46

score 1 · Answer 1 · answered Dec 15 '15 at 09:52

Your code should be like

$("#solDate").change(function () {
    if ($(this).val().trim() == '') {
        $("#solvedBy").val('Pick an option');
     }
     else {
         $("#solvedBy").val('Please, pick the issue solver');
     }
     //do change event of solvedBy here will solve issue
     $("#solvedBy").change();
});

$("#solvedBy").change(function () {
    if ($(this).val() == 'Please, pick the issue solver') {
    //if (document.getElementById("solvedBy").valueOf == 'Please, pick the issue solver') {
        $("#saveBtn").attr('disabled', true);
        $("#slvByValMsg").text('You have solution date and no solver');
    }
    else {
        $("#saveBtn").attr('disabled', false);
        $("#slvByValMsg").text('');;
    }

});

score 1 · Accepted Answer · edited May 23 '17 at 12:04

You simply need to call the .change() method.

Note: Changing the value of an input element using JavaScript, using .val() for example, won't fire the event.

See this answer for why .val() does not automatically call .change().

$("#solDate").change(function () {
    if ($(this).val().trim() == '') {
        $("#solvedBy").val('Pick an option').change();
     }
     else {
         $("#solvedBy").val('Please, pick the issue solver').change();
     }
});

Change validation message and disable button on dropdownmenu change

2 Answers2