Install the App?

Multiple selection in a web form

Multiple selection in a form in ZnetDK 4 Mobile Application
DESCRIPTION This application shows how to develop a form with a <select> element allowing multiple selection.

To allow multiple selection, the <select> element must be declared with the multiple property.


PREREQUISITE The ZnetDK for Mobile Starter Application is installed and configured (go to the Get Started page and follow the given procedure).

STEPS Only three steps are required:
  • Step 1: Coding of the view that displays the form for selecting multiple cities,
  • Step 2: Coding of the controller that processes the selected cities on form submit,
  • Step 3: Adding a new item to the App's navigation menu.

DEMONSTRATION See live demo....

Step 1 - Coding the view citiesview.php

The view citiesview.php must be installed into the INSTALL_DIR/applications/default/app/view/ folder.

  • The <form> element is declared with the data-zdk-submit ZnetDK property that specifies the citiesctrl controller and the submit action to call on form submit (see controller description in step 2)
  • The <select> element is declared with the HTML multiple property to display the element as a list allowing multiple selection.
    Pay attention in particular to the name cities[] given to this element. The square brackets are required to indicate in PHP that the POST parameter contains multiple values that have to be converted in array.

View citiesview.php

<form data-zdk-submit="citiesctrl:submit">
    <div class="w3-section">
        <label class="zdk-required"><b>Select multiple cities</b></label>
        <select class="w3-select w3-border" name="cities[]" size="12" multiple required>
            <optgroup label="España">
                <option value="Madrid">Madrid</option>
                <option value="Barcelona">Barcelona</option>
                <option value="Sevilla">Sevilla</option>
            </optgroup>
            <optgroup label="France">
                <option value="Paris">Paris</option>
                <option value="Marseille">Marseille</option>
                <option value="Lyon">Lyon</option>
            </optgroup>
            <optgroup label="Italia">
                <option value="Roma">Roma</option>
                <option value="Torino">Torino</option>
                <option value="Milano">Milano</option>
            </optgroup>
        </select>
        <div class="w3-panel w3-pale-yellow">
            <p>
                <i class="fa fa-info-circle fa-lg"></i>
                <i>On desktop computer, hold the <b>Ctrl</b>, <b>Command</b> or <b>Shift</b> key before clicking several cities.</i>
            </p>
        </div>
        <button class="w3-button w3-block w3-green w3-section w3-padding" type="submit"><i class="fa fa-check fa-lg"></i> Submit</button>
    </div>
</form>
HTM5

Step 2 - Coding the controller citiesctrl.php

The controller citiesctrl.php must be installed into the INSTALL_DIR/applications/default/app/controller/ folder.

  • The selected cities once submitted in the view are transmitted to the PHP controller's action (CitiesCtrl::action_submit() method) through the POST parameter named cities[].
  • The $request->cities property of the ZnetDK \Request object is used to read the selection of cities as an array.

Controller citiesctrl.php

<?php
namespace app\controller;
class CitiesCtrl extends \AppController {

    static protected function action_submit() {
        $request = new \Request();
        $citiesAsText = implode(', ', $request->cities);
        $response = new \Response();
        $response->setSuccessMessage('Selected cities', $citiesAsText);
        return $response;
    }

}
PHP

Step 3 - Adding an "Multiple Selection" item to the navigation menu

Finally, to give users access to the citiesview.php view, a menu item definition is added into the menu.php script of the Web App (see Get Started | New menu items for more information).

The menu.php script is located into the INSTALL_DIR/applications/default/app/ folder.

Script menu.php

static public function initAppMenuItems() {
    
    // ... Here, some menu items...
    
    \MenuManager::addMenuItem(NULL, 'citiesview', 'Multiple Selection', 'fa-list-alt');
    
    // ... Here, other menu items...
    
}
PHP

Search

Sort order