Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Determine if Javascript select 'change' event performed by user versus via code?

Is there a way to determine if a select element's change event was performed by user versus via code (dom manipulation)?

I have a timer that auto sets some select values based on some condition and then formats the select color to signify "success" (green select box).

Because I have the form set to fire off an ajax request when the select change event is fired, it does this for both the timer-based changes to the selects, as well as user-based select changes.

I'd like to only fire that ajax event when it's a user-based select change.

Is this possible?

EDIT:

When I output the value of e.isTrusted, it says Undefined in the log.

Here is my code:

    $(document).on('change', 'select', function (e) {
            e.preventDefault();

            console.log(e.isTrusted); // This outputs "Undefined"

            if (e.isTrusted) {
                save_review();
                console.log("Point status changed by user - Saved");
            } else {
                console.log("Point status changed programmatically - Not Saved");
            }
        });
like image 747
Source Matters Avatar asked Oct 19 '25 19:10

Source Matters


2 Answers

Managed to solve this based on a solution I found googling and with the help of the community-provided answers above.

When the timer-based event triggers, I now pass it a boolean value (auto_selected):

$("#pt" + value + " option:nth-child(2)").attr('selected', true).trigger('change', [true]);

In my event listener, I am then able to check against the value of that parameter:

        $(document).on('change', 'select', function (e, auto_selected) {
            e.preventDefault();

            console.log("Auto-selected: " + auto_selected);

            if (typeof auto_selected == 'undefined' || !auto_selected) {
                save_review();
                console.log("Point status changed by user - Saved");
            } else {
                console.log("Point status changed programmatically - Not Saved");
            }
        });
like image 126
Source Matters Avatar answered Oct 21 '25 10:10

Source Matters


There is a property called isTrusted on the event object that you can use to check whether the event is triggered by user action or by script.

that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via EventTarget.dispatchEvent()

if (e.isTrusted) {
  /* The event is trusted */
} else {
  /* The event is not trusted */
}

if you use jQuery, it's inside event.originalEvent

if (e.originalEvent && e.originalEvent.isTrusted) {
  /* The event is trusted */
} else {
  /* The event is not trusted */
}

If you use select2, listen to the event select2:select, and check for event.params.originalEvent.originalEvent (two originalEvent here, seems like a bad implementation inside the library itself)

$('#your-selector').on('select2:select', function(e) {
   if(e?.params?.originalEvent?.originalEvent) {
     // user action

   } else {
     // programatically trigger
   }

});
like image 44
Cuong Vu Avatar answered Oct 21 '25 08:10

Cuong Vu



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!