GEOG 863:
Web Application Development for Geospatial Professionals

7.2.4 Text Box


7.2.4 Text Box

Here is a sample that employs a pair of text boxes and three buttons as part of an incident reporting app. Following the app’s instructions, test it out to get a sense of how it works. Here are some noteworthy aspects of this sample:

  • A div (id of "editArea") is the container for all of the custom UI elements.
  • Within that div are three child divs (addFeatureDiv, updateInstructionDiv, featureUpdateDiv).
  • Within the featureUpdateDiv are two child divs (attributeArea, deleteArea).
  • The buttons in this app are defined using input elements of type="button". This is the older way to create a button, with the button element seen in the previous sample being a newer way introduced in HTML5.
  • The app initializes with the featureUpdateDiv assigned a style of display: none, causing it to be invisible. It later has its display property set to display: block to make it visible. You can read more about the display property at w3schools.

Note: At version 4.9 (released 9/27/2018), this sample was modified to make use of a new FeatureForm widget.  This modification eliminated the coding of text boxes in the HTML part of the app.  Given that, I want to pass along a couple of thoughts on text boxes:

1. If you're interested in including attribute editing capability in your app, then it would be smart to investigate using this FeatureForm widget.  
2. If you want to obtain user input via a text box (e.g., a name to search for), here are some tips:

  • Text boxes are created using input elements of type="text".
  • The input element has a placeholder attribute, which is used to provide a prompt to the user on the sort of entry expected in the box.
  • The input element also has a pattern attribute, which is used to validate the user's entry against a regular expression. These and other input attributes are described at w3schools.
  • The text box can be assigned an id and referenced in your JS code using getElementById, as seen in earlier samples. 
  • The value entered by the user can be obtained by reading the element's value property.