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.

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** ⚠️