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 include 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.