A Settings page

Example of a settings page using change actions instead of a form.

Some (settings) pages contain switches, checkboxes, radio buttons or drop down lists, and change the state on the server as soon as a control is changed or flipped. A "save" or "submit" action is not required. Though we can use the onchange-submit action-event class to submit a form transparantly on change of a control, there is another option available: using change-actions.

The change-action attribute is placed on a form field element or on a parent element of (a set of) form field element(s). The attribute defines the URL to be invoked (using "get" or "post") when a change occurs on the form field element. It passes the name and the value of the form field(s) to the server.

In this example, a page contains two FIELDSET elements but no form. The first fieldset has an onchange-action attribute that will be used whenever one of the contained checkboxes changes. The checkboxes are styled to look as switches thanks to Bootstrap styling:

<fieldset onchange-action="/ConnectionMode">
  <legend>Connection mode</legend>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="cm1" name="cm" value="WIFI" checked>
      <label class="form-check-label" for="cm1">WIFI</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="cm2" name="cm" value="BT" checked>
      <label class="form-check-label" for="cm2">Bluetooth</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="cm3" name="cm" value="NFC" checked>
      <label class="form-check-label" for="cm3">NFC &amp; Contactless payments</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="cm4" name="cm" value="FM">
      <label class="form-check-label" for="cm4">Flight mode</label>
    </div>
</fieldset>

<fieldset>
  <legend>Connection speed</legend>
  <label for="csp" class="form-label">Select speed:</label><br />
  <input id="csp" type="range" class="form-range"
         onchange-action="/ConnectionSpeed"
         target="#speedinfo"
         min="1" max="5" value="3"
         style="max-width: 250px;">
  <div id="speedinfo"></div>
</fieldset>

If in the first fieldset any of the switches is flipped, a request is issued to the "/ConnectionMode" URL passing the current state of the switches. For instance, if WIFI is disabled while Bluetooth and NFC remain enabled, the following request is issued:

/ConnectionMode?name=cm&value=BT&cm=BT&value=NFC&cm=NFC

It is important to note that all INPUT elements inside the first fieldset share the same name ("cm"). That, and the fact the onchange-action is defined on a common parent element, makes them behave as one logical field having a single value which is composed of the different values of the checked switches.

In the demo below, the server is programmed to return the new value of the switches control set as a JSON object. So it will return the following JSON array:

["BT", "NFC"]

In the demo below, the server is programmed to reject WIFI and Bluetooth when "Flight mode" is selected. So whenever Flight mode is selected, the server will remove WIFI and BT (Bluetooth) from the new value and as a result those switches will automatically go off.

For second fieldset it is the INPUT field control that has the onchange-action attribute.

When the speed is changed, i.e. set to it's maximum of 5, the following request is issued:

/ConnectionSpeed?value=5

The ranger control has no name, so only a value is passed.

The INPUT control also has a target attribute set, pointing to a DIV element further inside the fieldset.

In the demo below, the server is programmed to return HTML code when the connection speed is set to it's maximum. (It returns empty HTML otherwise.) The returned HTML is then inserted in the target element.

You can use the network tab of the developer tools of your browser to see the exact traffic between the browser and the server.