Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Replace Drop-down with Drag-and-drop

By Stephen Bucaro

We are all familiar with drop-down lists. From a webpage designers point of view, they require a lot of html tags. When used in a form that is submitted to the server, it's a bit complicated to extract data from a drop-down list. Wouldn't it be nice if you could just let the user drag-and-drop text into a simple text box. You can!

In this article, I'll show you how to replace a drop-down list with a simple text box. I'll also show you how to test your server-side form processing code with client-side simulation. And for an extra kicker, I'll throw in a dieting tip!

Shown below is the html code for a simple form with a text box and a submit button.

<form method="get">
<input type="text" name="text"><br>
<input type="submit" value="Submit">
</form>

As simple as this code is, it's actually twice as complicated as it needs to be. For example, in the form tag you don't actually need the method="get" attribute because "get" is the default submission method. It means the submitted data will be tacked on to the end of the URL. In the text box tag you don't actually need the name="text" attribute because you only have that one input element.

•If you design a form with more than one input element, you will need to provide each one with a name attribute so they can be identified at the server end.

The attribute value="Submit" in the submit tag defines the name for the submit button. You don't actually need value="Submit" attribute because the browser will provide a default name. In Internet Explorer, the default name will be "Submit Query". So you see, the code for a simple form that I have provided is actually twice as complicated as it needs to be.

Shown below is an example of a list of items that the user can drag-and-drop into the text box.

 
Gardening
Hiking
Housecleaning
Jogging
Shopping
Walking

We don't need all the tags required to make this into a drop down list. All we need is simple text on the webpage for the user to select and drag to the text box. Okay, if we want to make our webpage look neater we might put the list and the text box inside a table. The code for that is shown below.

<table cellpadding=6><tr><td>
Gardening<br>
Hiking<br>
Housecleaning<br>
Jogging<br>
Shopping<br>
Walking
</td><td>
<form method="get">
<input type="text" name="text"><br>
<input type="submit" value="Submit">
</form>
</td></tr></table>

A form can be processed at either the client side or the server side. There are many articles that show you how to do this. So in this article, I'm going to show you something a little different. I'll also show you how to test your server-side form processing code with client-side simulation.

With client-side processing, you would use DHTML on the webpage so that the form's data doesn't get sent back to the server. With server-side form processing, the form's data is sent back to the server by either the "post" method, where it's sent in the header, or by the "get" method where it's attached to the end of the URL.

At the server-side, you can use the same code for either submission method, so it's very common for programmers to use the "get" method for debugging, which allows them to see the form's data in the URL, and then switch to the "post" method for production in order to hide the form's data from the user.