|
 |
|
|
|
This is Javascript for IE5. See our policy on browser-specific JavaScript. Highlighting FormsUsually forms do not visually notify you of anything except when an element has the focus, which is done with a very thin dotted line around that element. To transfer focus to a form element, we must click the element. If we are expected to enter data into several text boxes, we are implicitly expected to re-focus between the text boxes ourselves. This hidden work is an unwanted labor for any viewer, and with this technique we can remove it. This program does two things. It provides extra visual enhancements to the form, and also automatically focuses an element when the mouse pointer is over it. <HTML> Passing long-winded variables around a program can prove to be more of a headache than using an array and index system. Instead of passing the actual color between functions, we pass an index for the clr array, which contains a list of colors that we use in the program. So we only need to pass an integer to the array, and we retrieve a color value. Inside the highlight(state) function, we discover which element fired the event, using the srcElement property of the event object. We only wish to highlight form elements - not any text or images that happen to be inside them. That is, we only wish to highlight form fields, and a form field is generally an <INPUT> element. If we had a <SELECT> or <TEXTAREA> element in the form, we could also detect this: etag=element.tagName; We should use the etag variable to save computational effort - this method only calculates the element.tagName once, and not the three times we would expect. Most form elements have a background color of white. But buttons have a different background color, which is generally silver. etype=element.type; So we must provide for this situation. We do not want to create white buttons because this looks unprofessional. If the element we are over is either a submit button or reset button, and we are leaving the element, i.e. state is 1, then without this line, we would change the button background color to white. This line says that in this case, let state=2, which then changes the background color to silver. element.style.backgroundColor=clr[state]; We must physically change the background color of the selected element to the highlight color or the original background color, depending on whether we are entering or leaving an element. element.focus(); If we are entering an element, we also focus this element. This places the flashing vertical line cursor inside the text box, and now the highlighted text box will receive all typed input. Intelligent FormsIntelligent Forms are a computer alternative to the common paper form phrases: * 'If YES, go to part 6B. If no, go to part 7' For example, the question 'Are you married?' might take you to section 2 or section 3 depending on your answer. A Critical Question is one which determines what comes next. We can use the power and capabilities of computers to intercept the critical question, and provide various form alternatives depending on the answer. This is better than expecting a viewer to decode the instructions for a form. We can make the computer to do all the hard work for us. The basic principle involved is the same as the paper form. If answer 1 is selected, ask question set A, if answer 2 is selected, ask question set B,etc. The radio element most readily fills the role of the critical question, as it makes us choose one option or the other, but not both. Basic Version This sample program asks the viewer if they have a printer, and if they do, the computer prompts for the make and model of the printer. If not, the viewer will not see the make and model question. <HTML> As you can see, the Make and Model text box only becomes visible if the Yes radio box is checked, and is invisible if the No radio box is checked. There are two tricks with this code. The first is to place the entire Make and Model form elements, i.e. the form field and its label, inside a <DIV> container element. The code then alters the visibility of the DIV element. The second trick is that we supply individual event handlers for each radio box. You can see that the yes() function is called whenever the Yes radio box is clicked, and no() is called whenever the No radio box is clicked. yes() displays the Make and Model element, and focuses it, while no() hides the Make and Model element. Moving Element VersionThere are other things we can do with intelligent forms. We can change the whole layout of the form and remove any gaps caused by invisible elements. The code for the moving type of form is very similar to the previous, but we make extensive use of the left and top styles.This time, when the Make and Model fields become visible or invisible, we move other elements around the page. This may be too slow for very large forms, but it looks good. This code uses DHTML to move the SUBMIT button and RESET button into a new position which removes gaps in the form. It's both effective and sleek. Dulled Version We may not wish to entirely hide a field, but just to prevent any input to it, and change it's color to indicate a no-entry status. DHTML again rescues us. The DISABLED attribute prevents a form field from receiving the focus, and hence any input. The DISABLED attribute can be changed dynamically at run-time, and we can also change the color of the field to indicate on or off, so that the field is not hidden, but just 'dulled'. The code for a form that uses 'dulled' form elements looks very similar to the previous example, but concentrates on the color style and disabled attribute. <HTML> And so, we can only input the make and model if we have a printer. This code also clears any input from the Make and Model text box if you initially select yes, but later select no. Changing the Text of Form FieldsThis section is concerned with changing the text of an element. So, if we have a series of checkboxes, we may wish to change their captions. This has several uses, we can tailor text to a person, or can create a multiple choice type quiz or exam. To change the text we use a combination of the <LABEL> element and the innerText property of DHTML. innerText returns any text contained within an element. Its full use is quite complicated, the property is very closely linked to three other properties, innerHTML, outerText and outerHTML. The property is also very dependent on any contained HTML as well as any contained text. For this example, all we need to know is that the value of the innerText property for: <LABEL ID="LABEL1" FOR="BAND1">Boy Zone</LABEL> is 'Boy Zone'. We may change this value dynamically in JavaScript. Using: LABEL1.innerText="Madonna"; The program demonstrates this in action. <HTML> We first detect any sex changing operation. <INPUT TYPE="RADIO" NAME="SEX" VALUE="M" onclick="sexchange(0);" CHECKED>Male The sexchange(sex) function changes the captions for the checkboxes and also clears any previous input. The basic structure for each checkbox is: <INPUT TYPE="CHECKBOX" NAME="BAND1"> This code creates a label for the checkbox 'BAND1'. The text is positioned after the checkbox because the LABEL element is after the INPUT element. And this brings this series of articles to a close. I hope you enjoyed them, and feel able to adapt the ideas and routines into your own forms. Jon Perry is a Freelance Author and Programmer from the UK. |
| Suits | Ponytails | Propheads | Contact WDJ | Discuss | Web Audio | Search |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers