Trying to access javascript elements inside a page

Question

I hope someone can help me. I'm trying to access the text box inside a webpage so I can do some scripting, e.g. placing text in fields, checking a box and clicking submit, to automate my employees' workflow. It's confusing as heck because I cannot find the name/id/whatever that will allow me to manipulate the form. I can see the name of the field I'm trying to get at using Firebug ("history[comment]") and the id, if that helps ("history_comment") but no matter what I do, the form will not be manipulated. Based on the other scripting I've done, this Applescript:

do JavaScript "document.forms[1].history_comment.value='Testing';" in document 1

should do the job, telling the browser to put "Testing" in the appropriate field. I've substituted other names I think might be what it wants, and tried referencing any other forms (forms[2], forms[3]), all for naught. I'm actually confused a bit more because there are no statements in the HTML, so it could be I'm screwing up there.

I've posted an HTML dump of the form at http://images.jlist.com/testform.html (with dummy information of course) in case any kind soul can take a gander and give me some direction. My goal is to be able to put information into the Comment field. Is there a script I can run that will tell me the complete name (as far as the browser is concerned) of every element in the form?

Answer 1

since your element is a text area, it should be done like this:

document.getElementById('history_comment').innerHTML = 'HELLO';

using innerHTML instead of value

Answer 2

if you can use jquery, then you can do it quite easily using the following command

$("history_comment").val("HELLO");

Answer 3

The JavaScript should be:

document.getElementById("history_comment").value='Testing';

document.forms is non-standard and, as is the case in your example code, fails if the element is not inside a form. This is fairly common in AJAX applications and another good reason to avoid document.forms.

Answer 4

What @Kikuchyo wrote, though it's actually strictly incorrect not to enclose form elements like textarea in a form tag. You'll also need that form tag if (as you suggest) you want to submit the form programmatically. Since you're already accessing that text box, you can get the form from that in your javascript function:

var thetext=document.getElementById('history_comment');
thetext.value='whatever you want to put in there';
thetext.form.submit(); // all form elements have a 'form' property

You can get at the checkbox state as document.getElementById('history_notify').checked; it's a Boolean value, so set it to true or false, and use it in conditionals directly.

Of course, if (as, looking at the form, you likely want to) you want an AJAX submit, you'll need to check out the documentation for whatever wrapper library you're using.