Control Solutions Knowledgebase

Demo #5: Adding drop lists for input on web pages

Demo web #5: Using drop-down lists as input. You are not limited to text boxes for data input on your custom web page. Drop-down lists are another option we explore here.

Open a new SiteSpinner project, and place some text, a text input box, and a drop list. The drop list icon is pointed out on the screen shot below. Drag this input object onto the page just like a text box, then double click it to open its Form Editor dialog. Select IcanForm for Form, and leave Type as Selection List. For Name, enter the register number that will be the source of data. Leave the Value set to list. To enter data items in the list, click on the Values... button. The Drop-Down list dialog opens. Click Insert to add a new item to the list. Enter both a name and a value. The names will appear in the list. The values will be sent back to the server when that item is selected. Check the boxes only if you want one of the options pre-selected.

Just some quick reminders on topics we have covered previously...

Make sure the Form tab on all of the objects is set up as follows (the Form tab is the same tab on all objects). Also, make sure IcanForm is selected as the form for all objects on the page.

Remember to edit the page properties and name the page User.html.

Place a submit button and set it up as follows.

In our example page, we have selected "reg50" for both the text box and the drop list. This means the text box will display the numeric value of what we selected from the list after clicking Submit. However, you must use caution when placing items on a page that both reference the same data source. If the page objects are not processed in the right order, you will not get the desired result.

If the drop list is processed by the server before the text box, the value found in the text box will over-write the value given by the drop list. If this happens, our intended goal of making the text box show what was selected will not work. Instead, the text box will dictate what item on the list is selected when the page is refreshed, and the value might not even be on the list (in which case the drop list will show "---").

Data items are processed and acted on by the server in the order in which they are received from the browser. The order in which the browser sends the items to the server is determined by the order in which they appear in HTML code. You can alter that order using the Arrange menu as illustrated below. The action "bring to front" is used to pull a text box out in front of a graphic, but also pushes it toward the end of the list making it the last item to be sent back to the server.

If you want to see what order the data items are going to end up in, select Display Code under the File menu. The code shown below illustrates the text box and drop list (called "select" in HTML) in the correct order for our intended result.

Our resulting page will look something like this. Select a number from the list and click Change, and the corresponding value will show up in the text box. If you type a number into the text box, it will be replaced by the selection from the drop list because the drop list is processed last and overwrites whatever we put in the text box. If the reverse is true, you did not end up with the items in the desired order. See previous page. This interaction only occurs when we reference the same register with more than one object on the page. If you selected different registers for text box and drop list, no attention would need to be given to order of processing.


Attached Files
There are no attachments for this article.