|
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.
| 
Free Downloads
RSS Feed