Multiple elements to be called by a function

Question

I have two radio buttons and a date picker and if I click or make changes to any of those three, all the values of the corresponding elements should be updated to an array. I've tried and failed.

Here is what I've created (jQuery):

if ($(["#submitDates"], ["input.usage"], ["input.scope"]).on("change")) {
  var fromDate = $("#from_date").val();
  var toDate   = $("#to_date").val();
  var usage    = $('input.usage').val();
  var scope    = $('input.scope').val();
  var data     = {};
  data.dateRange = `${fromDate}->${toDate}`;
  data.scope     = scope;
  data.usage     = usage;
  console.clear();
  console.log(data);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
  <input type="radio" class="usage" name="usages" value='email' checked> Email Usage
</div>
<div class="col-md-2">
  <input type="radio" class="usage" name="usages" value='mail'> Mail Usage
</div>

<input type="radio" class="scope" name="scope" value="cm"> Current Month&ensp;
<input type="radio" class="scope" name="scope" value="q"> This Quarter&ensp;
<input type="radio" class="scope" name="scope" value="cy"> This Year&ensp;


<input type="text" class="form-control" id='from_date' name="start" placeholder="MM/DD/YYYY" />
<div class="input-group-append">
  <span class="input-group-text bg-info b-0 text-white">TO</span>
</div>
<input type="text" class="form-control" id='to_date' name="end" placeholder="MM/DD/YYYY" />&ensp;
<button class='btn btn-sm btn-success btn-circle' id="submitDates" style="border-radius: 50%"><i class='bi bi-check-lg' style='font-size: 16px;'></i></button>

Answer 1

There's quite a few issues in your code:

• The selector in your jQuery object is wrong. Provide multiple selectors in a single comma delimited string, not multiple arguments containing strings in arrays.
• Don't put a jQuery event handler in an if condition, it's useless
• The change event handler syntax is wrong, you didn't provide the function argument which binds the handler to run when the event fires.
• data is an object, not an array, as your title/question states
• You need to read the val() from the selected .usage and .scope elements only.
•   isn't a valid HTML character entitiy. I presume you mean   instead, but even then this is redundant.

With those issues fixed, the code would look something like this:

let $fromDate = $("#from_date")
let $toDate = $("#to_date");
let $usage = $('input.usage');
let $scope = $('input.scope');

function handleFormUpdate() {
  var data = {
    dateRange: `${$fromDate.val()} -> ${$toDate.val()}`,
    scope: $scope.filter(':checked').val(),
    usage: $usage.filter(':checked').val()
  };

  console.log(data);
}

$('#submitDates').on('click', handleFormUpdate);
$('input.usage, input.scope').on("change", handleFormUpdate);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="col-md-2">
  <input type="radio" class="usage" name="usages" value="email" checked> Email Usage
</div>
<div class="col-md-2">
  <input type="radio" class="usage" name="usages" value="mail"> Mail Usage
</div>

<input type="radio" class="scope" name="scope" value="cm"> Current Month
<input type="radio" class="scope" name="scope" value="q"> This Quarter
<input type="radio" class="scope" name="scope" value="cy"> This Year
<input type="text" class="form-control" id="from_date" name="start" placeholder="MM/DD/YYYY" />

<div class="input-group-append">
  <span class="input-group-text bg-info b-0 text-white">TO</span>
</div>
<input type="text" class="form-control" id="to_date" name="end" placeholder="MM/DD/YYYY" />
<button class='btn btn-sm btn-success btn-circle' id="submitDates" style="border-radius: 50%">
  <i class='bi bi-check-lg' style='font-size: 16px;'></i>
  Check
</button>