HTML Drop Down Events

[Chris]

I have the following drop down list in an HTML Widget:

<div class="JBFieldWidget">

<select name="mfilter" id="mfilter-select" style="height:20px;">

    <option value="0"></option>

    <option value="1" selected>All</option>

    <option value="2">Tractors</option>

    <option value="3">Syracuse</option>

    <option value="4">Rochester</option>

    <option value="5">Trailers</option>

</select>

</div>

Is it possible to fire an event when this field changes and reference the value of the select option? I would like to use this to control which filter is applied to a report widget.

Also, is it possible to have a ParaSQL button change the value of this HTML select object from the Javascript event? I would like to reset this drop down to option 0 when a user runs a manual search.

I realize I could create a separate table with a list of search criteria and use a record object to create a drop down widget, but then each user would be editing a record in the table and that seems rather cumbersome.

Chris

[AppSynergy Support]

Yes! We would suggest the following markup for an HTMLWidget.

Note the following:

•  the example below excludes the outer div element and the style attribute of the select element makes it fill the entire HTMLWidget .... this makes it looks nice and allows it to be resized easily like any other widget.
• the onchange event is added as shown. This event will fire when the user changes the value of the drop down. This would normally be calling a function in your library (File > App Scripts...) but in this example we just put up an alert panel with a message. Note that the function you specify takes a single parameter called event that is a standard html event. In the example below, we take event.target.value to get the new value of the drop down after the user changes it.

<select name="mfilter" id="mfilter-select" style="box-sizing:border-box; height:100%; width:100%;" onchange="alert('you changed me to: '+event.target.value)" >

    <option value="0"></option>

    <option value="1" selected>All</option>

    <option value="2">Tractors</option>

    <option value="3">Syracuse</option>

    <option value="4">Rochester</option>

    <option value="5">Trailers</option>

</select>

For a button in ParaSQL (AppSynergy) to set the value the code would look like this:

document.getElementById("mfilter-select").value = "0";

Detailed documentation can be found here: 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

Note that AppSynergy does not restrict what JavaScript you can use... any valid JavaScript syntax will work.

[Chris]

Perfect. I now have the drop down firing an event to update a field and a button which can revert the drop down to the default valve.

Thank you!