Simple drop down selector with an "other" option - xmpie-users/uStore-js GitHub Wiki

Sometimes you may want to have a drop-down select list, to make it easy for customers, but still need to enable them to enter a value if it is not in the drop-down list. There is no control for this in uStore out-of-the-box but it is very simple with HTML generic dial types and a little HTML and JavaScript knowledge.

NOTE: There are two samples provided on this page. The first, (selecting fruit) works with new NG or single page dynamic products. The second (selecting a location) works with the legacy or multi-page dynamic products.

Sample 1 (NG mode)

This example is for the selection of a type of fruit, but it could easily be adjusted for other purposes.

Alt

Customization dial setup

  • Input Control - HTML Generic
  • Callback function - CallBackF
  • Markup - (see code below)

Alt

Customization dial Markup code

<label for="fruit">Choose or type a fruit:</label><br>
  <input list="fruits" id="fruit" name="fruit">
  <datalist id="fruits">
    <option value="Apple">
    <option value="Banana">
    <option value="Cherry">
    <option value="Date">
    <option value="Elderberry">
  </datalist>
 
  <script>
        setTimeout(function () {
            const input = document.getElementById('fruit');
 
            // (i) Clear value on click while typing
            input.addEventListener('click', function (e) {
                if (input.value.length > 0) {
                    input.value = '';
                }
            });
 
            // (ii) Call a function when value changes (by typing or selection)
            input.addEventListener('input', function (e) {
                handleValueChange(e.target.value);
            });
 
            function handleValueChange(value) {
                CallBackF(value);
            }
        })
  </script>

Sample 2 (Legacy mode)

NOTE: The script below will not work in the new dynamic NG or SPA (single page application) mode, but is left here only for reference for customers using legacy or "multi-page" mode.

This example is for selection of an office location, but it could easily be adjusted for other purposes.

Alt

When other is selected, a text box appears for the user to enter the location, and validation shows that it is required and prevents the user from going on to the next step until a value is entered.

Alt

Customization dial setup

  • Input Control - HTML Generic
  • Callback function - getLocation
  • Markup - (see code below)

Alt

Customization dial Markup code

<div class="FormLabel">Location</div>
<div class="FormField">
  <select class="loc" ​id="location">
    <option value="London">London</option>
    <option value="Los Angeles">Los Angeles</option>
    <option value="Sydney">Sydney</option>
    <option value="Vancouver">Vancouver</option>
    <option value="Johannesburg">Johannesburg</option>
    <option value="">Other</option>
  </select>
  <input class="loc" id="otherLocation" type="text" style="display:none" />
  <span id="otherValidation" style="color:red;display:none">* Required!</span>
</div>

<script>
$(window).load(function() {
  $(".loc").on("change", function() {
    var elem = $(this).prop('nodeName');
    var val = $(this).val();
  
    //show or hide the otherLocation field and validation warning
    if (elem == "SELECT" && val.length == 0) {
      $("#otherValidation").show();
      $("#otherLocation").show();
    } else if (elem == "SELECT") {
      $("#otherValidation").hide();
      $("#otherLocation").hide();
    } else if (elem == "INPUT" && val.length == 0) {
      $("#otherValidation").show();
    } else {
      $("#otherValidation").hide();
    }
    
    //hide the next button if no value is selected/entered
    if (val.length == 0)
      $(".next").hide();
    else
      $(".next").show();
  
    //return the entered value to the callback function (defined in uStore admin)
    getLocation(val);
  });
  
    //push the default value to uStore (in case the user wants the first selected location and doesn't make a change)
    getLocation("London");
});
</script>
⚠️ **GitHub.com Fallback** ⚠️