Forum OpenACS Q&A: Finding a specific FORM using DOM in Mozilla

Collapse
1: Finding a specific FORM using DOM in Mozilla
Posted by Jerry Asher on 06/23/03 05:39 PM
I am trying to make a bookmarklet to fill in the Washington Post's registration form for me. (I get tired of clicking that I was born in 1965, I am a male, and I live in the 20171 zip code, I figure I might as well have a bookmarklet do this for me.)

I have a variety of JavaScript books, including the O'Reilly Rhino, JavaScript the Definitive Guide.  However, like all definitive guides, it was obsoleted by later versions of the browsers. (Why do they call them definitive?)

The Washington Post registration page has two forms.  The second form is named submit:

<form name=submit>
. . .
</form>

I can't find figure out how to find this form to access it using a JavaScript within Mozilla 1.3b.

I have tried

x = document.forms;
s = x[1];

but s apparently doesn't contain anything although x.length is in fact two.

I have also tried

s = document.submit;

same thing happens.

And I can't get the DOM 2 model working either, but then I don't understand it well anyway.

How do I find the submit form?

Also, have any of you used Venkman, the Mozilla JavaScript debugger?  Cool looking debugger, but how do I enter free form JavaScript expressions or Venkman commands?  I see no obvious window that accepts keyboard input.

Thank you,

Collapse
2: Re: Finding a specific FORM using DOM in Mozilla (response to 1)
Posted by Dave Bauer on 06/23/03 05:44 PM
Jerry,

Have you tried the DOM Inspector? Tools>Web Development>DOM Inspector. Also try the Javascript Consolse. Open it up before running your javascript. You can possibly see what is causing the error.

Collapse
3: Re: Finding a specific FORM using DOM in Mozilla (response to 1)
Posted by Jerry Asher on 06/23/03 06:14 PM
Yes to both.  Last one first.  The error that's stated is that x has no properties.  Which is odd, as I can definitely find (document.write) that x.length is 2, but x.anythingelse causes an error.

I tried the DOM inspector, it's cute, but sigh, like most open source thingies, too little doc.  If I examine the object as a JavaScript object, I can find the forms object, but no forms underneath it.  As a DOM object, I can't figure out which of a bazillion attributes/properties/whathaveyou is the right path to take.  Walking down any path seems to lead me to a maze of twisty little passages, all alike.

A DOM GetElementsByTag approach might work, but again, it doesn't seem clear to me how I walk that structure to find the forms I am looking for.

(I think B&N is open now, perhaps a walk with the laptop to see if a newer and more definitive javascript the definitive guide is in stock.)

Collapse
4: Re: Finding a specific FORM using DOM in Mozilla (response to 1)
Posted by Jerry Asher on 06/24/03 04:29 AM
Learned a lot today. Yes, that means by forehead is sore and the wall needs more spackle.

In a nutshell, this page contains a bookmarklet to fill out the washingtonpost's information gatherer. Ironically, since the wapo doesn't ask me to login, but provides me with a form for demographic information, they are perhaps more respectful of my privacy than say the NY Times or the LA Times. Implementationwise though, NY Times and LA Times logins can be memorized by my browser. (Damn, and I just realized Mozilla as this Form Manager that may have eliminated this education for me....) Anyway at the cost of convenience, I too, will toss away some privacy. (Assuming the logins and/or the demographics contain valid information.)

Visit the page, and if you're using Mozilla, drag the link to your toolbar. It uses "Level 0 DOM" so it should work in IE and Opera. Perhaps.

If anyone wants this, you should change the information as appropriate. Right now it is set for a male, born in 1965 in the 20171 zip code.

I found the DOM Inspector useful, but not usable. I am just a novice with it, but I think it needs to be able to quickly show the entire tree all at once, and then use filters to get rid of uninteresting nodes. And it's a bit buggy too. And it's incredibly hard to actually change values within the DOM, and if you do succeed, the changes, while there, are not reflected in the displayed page.

Venkman, the JavaScript debugger is pretty cool. The trick for me was figuring out WHERE TO TYPE to it. It turns out that a relatively obscure and unlabeled box at the bottom of the black (by default) console window is the place for typein. I kept trying to type in to the console output window itself, and was confused in part, because it accepts type in like most Mozilla pages, but responds to it by turning the type in into an incremental search string.

IMNHSO, Venkman should be better integrated with the DOM Inspector. I can't inspect objects from Venkman, unless they are already variables in the local stack frame. I should just be able to look at a DOM pane within Venkman. What's nice is that if within Venkman, you change DOM values, the changes do show up immediately, at least they did in my testing of this form.

So basically, I got this to work with DOM Level 0 (which doesn't really exist) and didn't try the new and improved DOM. However, there is a great tutorial on the new DOM and JavaScript techniques here.