What Javascript trickery is this?

October 9, 2010 7:05 AM

How do I create forms such as those on Facebook which expand/show extra options when you click the mouse into the text box.

Examples are the "What's on your mind?" (status update) box you see on your home page and the "What are you planning?" event box on the right of your home page. I'm conversant in PHP and can follow Javascript code if not write it off the top of my head. I'm therefore looking for a simple code example that I can look at/dissect and understand. (I learn by taking things apart and putting them back together again).

posted by Biru to Computers & Internet (8 answers total)

You want an AJAX tutorials.
posted by nomisxid at 7:46 AM on October 9, 2010

You attach an onfocus event handler that does whatever you want (e.g..) Ideally you don't want JS code inline with HTML like that, so you would instead define the handler in a separate JS file and then attach it to the desired element(s) after the page has loaded (the 'onload' event), either keying it off id/class or just applying it to all textareas. Libraries like jQuery abstract away numerous headaches for doing this kind of thing so it's worthwhile to go that route if you want maximum compatibility.
posted by Rhomboid at 7:50 AM on October 9, 2010

Response by poster: Yeah I'm happy with AJAX, I use it to do MySQL queries on the fly and refresh content without refreshing the page, but what I am not able to do at the mo is specifically create that whole other part of the form which wasn't there till I clicked in the box. Is that in the source code from the beginning with a "don't show till onfocus event triggered"? Are there coding examples of specifically that effect?
posted by Biru at 7:55 AM on October 9, 2010

Best answer: you don't need ajax for something this simple. All they're doing is showing the div with extra options in it onfocus and hiding it again onblur.

eg. on your textbox - onfocus="document.getElementById('hiddenstuff').style.display='block'" onblur="document.getElementById('hiddenstuff').style.display='none'"

Obviously there are better/cleaner ways to do it but thats the basics of it.
posted by missmagenta at 7:55 AM on October 9, 2010 [1 favorite]

If you go farther down this road you might find that jQuery is all you need.
posted by chrillsicka at 8:02 AM on October 9, 2010

You certainly could dynamically add form elements on the fly, but it's probably a lot easier to do as missmagenta says and just toggle between "display: none" and "display: block" (or "display: inline" for inline elements like IMG, SPAN, etc.)
posted by Rhomboid at 8:11 AM on October 9, 2010

Here's a slightly longer example that shows extra form fields that appear.
posted by Rhomboid at 8:38 AM on October 9, 2010

The cross-browser bulletproof way is using jQuery (or some other javascript framework). Here's the focus event. Here's the show method. That should get you started.
posted by signal at 12:54 PM on October 9, 2010