1

I have a form that uses bootstrap and jQuery, and I want to disable the "save" button until such time as certain conditions are met. Specifically, the "save" button should only be enabled if there is value for "#selection", and if one of either "#schedule" or "#repeat-every" have a value.

Each of the values in question are input fields in my form, and the HTML looks like this:

    <div class="form-group">
      <label>Job Name</label>
      <input type="text" class="job-name form-control" id="selection">
    </div>

    <div class="form-group" id="schedule-div">
      <label for="meeting-time">Schedule</label>
      <input type="datetime-local" class="job-schedule form-control" id="schedule">
    </div>

    <div class="form-group" id="repeat-every-div">
      <label>Repeat Every</label>
      <input type="text" class="job-repeat-every form-control" data-toggle="modal" name="repeating"
        id="repeat-every" data-target="#scheduleModal">
    </div>

The jQuery function I'm using to handle this logic looks like this:

$('.save-button').attr('disabled', true);
$("#selection, #schedule, #repeat-every").change(function () {
  const jobNameVal = $('#selection').val();
  const scheduleVal = $('#schedule').val();
  const repeatEveryVal = $('#repeat-every').val();
  console.log('jobNameVal: ', jobNameVal);
  console.log('scheduleVal: ', scheduleVal);
  console.log('repeatEveryVal: ', repeatEveryVal);
  if (!scheduleVal && !repeatEveryVal) {
    $('.save-button').attr('disabled', true);
  } else if (!jobNameVal) {
    $('.save-button').attr('disabled', true);
  } else {
    $('.save-button').attr('disabled', false);
  }
});

Now, my understanding is that if any of these three values changes, this function should fire. The problem I'm running into is that, with the first and third values ("#selection" and "#repeat-every") I am populating in a value via a drop-menu. In other words, I am not manually typing in a value. So I'm finding that this function as it's currently set up doesn't actually fire in those cases.

So my question is, what can I use, instead of $('#selection').val() and $('#repeat-every').val() that will ensure the function fires if a value is populated into those input fields in any manner (not just manual typing)?

UPDATE: It was suggested that I use "trigger" instead, because no event is raised when a value is populated in programmatically. So what I tried was adding these two lines BEFORE my function:

$("#repeat-every").trigger("change");
$("#selection").trigger("change");

This didn't actually trigger my change() function from running, however. What am I missing?

Muirik
  • 6,049
  • 7
  • 58
  • 116
  • When you programmatically update the value of an `input` no event is raised - you need to do it manually using `trigger()`. See the duplicate for more information – Rory McCrossan Jan 14 '20 at 15:11
  • a "change" event occurs when a control loses the input focus and its value has been modified since gaining focus. A solution will be to create and dispatch the event any time you update one value – Plastic Jan 14 '20 at 15:19
  • 1
    I've just seen your update. You need to call `trigger()` within the event handler on the select, just *after* you update the `val()`. Eg. `$('#foo').val('bar').trigger('change')` – Rory McCrossan Jan 14 '20 at 15:20
  • 1
    Ah, okay, I see what you mean. In the function where I handle programmatically passing in the value... at the end of that function, trigger the change on that id. Got it. – Muirik Jan 14 '20 at 15:29

0 Answers0