The surgery’s open, and today Dr. Design faces some interesting challenges, from form validation, to SSIs. Let’s get started… and don’t forget to submit your own questions to Dr. Design.
I Need Validation!
Hi Dr. Design,
On my site I have simple feedback and subscription forms that either email me or write to a file. My problem is that if the user presses his enter key while on my form page, it submits. Therefore I end up with hundreds of blank feedback pages saved or mailed to me, and I can never be sure if the user intended to submit something.
Also, my form results write “User Unknown”, unless the sender fills out the email address textbox. Is there a way to glean the sender’s address in code? Thank you,
Kim L.
Kim, I think this issue can be easily fixed if we perform some simple validation. Validation is the process of ensuring that the data users send, or you receive, is “valid”. Some common issues you’ve run into are users hitting ‘enter’ by accident, and not filling in required fields, and validation will put a stop to this.
While we could disable the ‘enter’ key by simply removing your <input type= "submit"> and changing it to <input type="button" value="Submit" onClick="this.form.submit();">, I don’t think it’s the best course of action. While this would solve your immediate problem, it would also eliminate the primary method many visitors use to submit a form, which would be pretty frustrating.
What we want to do is reduce frustration for everyone (you and your users) involved. So, let’s leave the submit button as-is, and instead, add a little extra code to your <form> tag:
<form method="POST" action="myfile.cgi"
onSubmit="return doValidate(this);">Next, you’ll need to code your doValidate function. Here’s a sample you can place inside the <HEAD> of your document:
<script language="javascript" type="text/javascript">
<!--
function doValidate(theform)
{
if(theform.txtname.value=="" || theform.txtemail.value=="" ||
theform.subject.value=="" || theform.message.value=="")
{
alert("Please complete all form fields.");
return false;
}
}
-->
</script>This example assumes that there are 4 required fields in your form: txtname, txtemail, subject and message. You could simply validate only the required fields by adding in theform.myfield.value="" wherever you required it. Or you could get slightly more complex, and, for instance, ensure that formatting of email addresses is valid, etc.
Basically, this gives you the power to ensure the data you are receiving is “real”, and keeps user annoyance to a minimum. You could even extend the above function to give the user information on what fields were missing if you wished.
Changing Colurs with CSS
Doc, my Website has about 30 pages, and they all needed a color change, so I decided to do it with CSS. Is it possible somehow to make a CSS code that has all the properties of one table? And how would I include this in a CSS style? — James
Hey James, this code should help you in your quest to define the entire look of your table:
<style type="textcss">
table { background: black; border: thin solid red; }
td { background: green; }
.bodyline { background-color: #2E425A; border: 1px #597795 solid; }
</style> Then, to include this in a style, you’d simply include class=”bodyline” in each table, like this:
<table class="bodyline">Hope this helps!
Server-Side Includes
Doctor, I’m moving from FP2002 to DW MX.
One of the useful features of FP2002 is the ability to use a FP-specific feature called a Webbot. The main Webbot I’ve used is called “include”. It allows you to take oft-repeated content and store it in its own file. Then, every time you want to use that content in another page, you just “include” it. I’m wondering if there’s a way to do this using standard coding? — James
James,
I understand exactly what you mean. This is a very useful feature when you¡¦re dealing with standard things like menus or even page titles and copyrights: items that don¡¦t change very often, but when they do, can take days to fix.
Dreamweaver does allow you to do this through something called Library items. However, my recommendation is to use some kind of server-side processing. This has many advantages (for instance, server-side processing is indexed by Search Engine spiders), but also, this approach is very common in every programming language, as it keeps your files shorter and easier to manage!
Each programming language has its own way of doing includes, so you may want to look at references specific to the language you use. However, there’s an even easier way to do it: you can use SSI (Server Side Includes), which is a feature most Web hosts allow you to use.
Basically, you save the information you want to include in a Text file (for instance, “menu.txt” for your site’s menu). Next, you include that file using the following code:
<!--#include file="menu.txt"-->The only hitch is that you’ll need to change your file extension to either .shtm or .shtml, so your server knows that there are server directives contained in the file. After this simple step, your site will be a maintenance dream instead of a nightmare!
Have fun with SSIs!
Scrolling News Banner
Hello Doctor, I’m the leader of a Formula One Website, and I’m looking for the HTML code to create a news banner. It doesn’t really matter what the look and speed is, but any advice would be very helpful indeed. Thanks very much — Tom
Tom, it sounds like you’re after a simple JavaScript “News Scroller” that will allow you to save space, while providing your visitors with the latest information.
Sites such as Dynamic Drive, JavaScript.com and JS-Examples all contain great examples of these types of tools. I’m sure you’ll find what you’re looking for in one of these great resources.
Spread the Love!
Dr. Design
Have your questions answered when Dr. Design’s surgery opens again next month. See you then!
Dr. DesignDr Design answers design and development questions for SitePoint readers. Drop him a line today!
