should I use AJAX to make forms that...

dabbler · June 23rd, 2008, 02:56 PM

have input fields where the initial text (stuff like "please type your first name here") disappears when the user either does a mouseover or changes focus to the field?

I'm thinking it should be possible to simply hook up each form field with a standardised javascript function which 'wipes' the content from the form field, then hands back focus to it, after setting a trigger variable to false or something...

the pseudo-code I envisage would be something like the following:

<head>
standard AJAX xmlhttpresponseobject stuff...

<script language=javascript>

var toggle = false
formfield_wiper (fieldName, toggle){

IF toggle = true then

document.form(fieldName).innerHTML = "";

(do I need an else?)
}
</javascript>
</head>
<body>
<form>
<input type="text" name="fname" onFocus**="formfield_wiper(fname, true)>
</form>
</body>

would greatly appreciate any and all help as I am something of a complete AJAX novice.

**obviously I could change it to a onmouseover state, but I suspect that it'd end up calling the function from the page a lot, for no good reason, as the user absent-mindedly moves their mouse over the form.

planoie · June 23rd, 2008, 03:36 PM

There isn't really anything AJAX about this, aside from the J. This is purely a javascript client-side watermark behavior.

One thing you may want to add is something that remembers what the original watermark value is. When the user enters the field then leaves it without entering anything, or clears it then leaves, you may want to restore the watermark. Due to the flexibility of the javascript model, it's easy to just add a property/field to the textbox itself to save the old value. You can then check in the onBlur handler if the value is empty, you restore the watermark.

-Peter
compiledthoughts.com

dabbler · June 23rd, 2008, 07:17 PM

ah, I was thinking the xmlhttpresonseobject would be necessary to effect the changes in the fields, once they've already been rendered by the browser.

I thought that I might be able to make more complex changes later like using radio buttons and adding/removing fields in response to the choices the user makes, without refreshing the page.

planoie · June 24th, 2008, 08:06 AM

You only need to use XmlHttpRequest when you actually need to call the server. DHTML has been around for a long time and allows you to do a plethora of dynamic changes to the client page without every going back to the server.

-Peter
compiledthoughts.com