...

View Full Version : Reworking OLD script self.document.forms[f].elements[i].value



Ann-Marie
12-27-2011, 06:46 AM
I'm reworking a 15 year old script.
Here is the original general purpose routine that extracted a portion of one form to another form.


function FillForm(f) {
for( i=FullName; i<=EndOfForm; i++) {
self.document.forms[f].elements[i].value = FormData[i];
};
};

But NOW I'm supposed to use getElementById()
Does that mean instead of the short routine I have to put one line for each Id tag and it is no longer general purpose and independent of the form being used?

Is it OK to keep using the legacy script despite the Warning from the error console?

xelawho
12-27-2011, 03:26 PM
Is it OK to keep using the legacy script despite the Warning from the error console?

if it works, you can use it. a warning is just a warning, not an error - although it is helpful to know what you are being warned against.

which error console tells you that, and what is the full message?

on a general note, I see that you are learning javascript and I am too. I started out finding old scripts from the net and modifying them to my purposes, but (for the most part) I don't do that anymore - for one, there is a lot of poorly written, deprecated code out there and two, I found that I only really started to understand how javascript worked once I started to write my own functions. It takes longer, but I think step one is to write code that you understand (and that works, of course), with step two being writing "good" code and step 3 being writing code that other people will understand (in case you hand a project off to someone else and don't want to spend days explaining it to them).

But if none of that matters and all you want is a script for you that works now, it's reasonable to say that some warnings can be ignored (and in fact some error consoles themselves have bugs and produce warnings that SHOULD be ignored)

specifically, your loop seems a little weird in that FullName and EndOfForm both need a numeric value, but if it works, it works - we can assume that they get defined correctly elsewhere. There are many other ways to do what you are trying to do without using getElementById(), but like I say, the need to change your script is directly related to why you are writing it in the first place.

Old Pedant
12-27-2011, 09:05 PM
My question: Why are you "supposed" to use getElementById???

In general, I feel it is an error to give an id to a <form> field. (Though the <form> itself should be given an id, instead of a name.)

Reason: Fields without names are *not* sent by the browser when a form is submitted. So if you *must* give a field a name, anyway, why duplicate the effort by also giving it an id? The sole exception is when you want to associate a <label> with a form field by way of the field's id. But even then, for 98% of all purposes you can avoid the id by simply coding (example):


<label><input type="radio" name="gender" value="female"/> Female </label>

See? No ID needed.

Now, *IF* indeed you are talking about the id of the <form> itself, then yes, it would be a good idea to rewrite the code. But it's a minor rewrite. And that old code is really clumsy, anyway:


function FillForm(formID) {
var form = document.getElementById(formID);
for( var i=FullName; i<=EndOfForm; i++) {
form.elements[i].value = FormData[i];
};
}

Note that without the var declaration for variable i the global variable of the name is used. Not a good idea, at all.

And the .elements there is optional, by the by. You could write it as simply


function FillForm(formID) {
var form = document.getElementById(formID);
for( var i=FullName; i<=EndOfForm; i++) {
form[i].value = FormData[i];
};
}


FWIW, even 15 years ago that code should have been written more efficiently and more simply (and more correctly, in the case of variable i) as


function FillForm(f) {
var form = document.forms[f]; // self is a waste of code; but a temp variable is good idea
for( var i=FullName; i<=EndOfForm; i++) {
form.elements[i].value = FormData[i];
};
} /* the trailing semicolon here always was wrong, but harmless */

Old Pedant
12-27-2011, 09:09 PM
Oh, and while using name= with a <form> tag is considered obsolescent, it's not absolutely forbidden except with DHTML in STRICT mode.

Ann-Marie
12-28-2011, 06:15 AM
Thank you, that was very helpful. I'm having problems with a function using it that extracts the data fields from a form and compacts them into a variable.


function GetFormData(){
FormData = ""; //Global
var form = document.GetElementById("FormA");
for(var i=0; i<formSize; i++){
var content = form[i];
if(content == undefined) content = "";
FormData += content + "~";
}
}


I think I am having problems when it runs on an empty form and the data fields are coming up undefined, hence the line to change them to null strings.

If I run the above I get no errors but the result is:-
[object HTMLInputElement]~[object HTMLInputElement]~[object HTMLInputElement]~[object HTMLInputElement]~[object HTMLInputElement]~[object HTMLInputElement]~[object HTMLIn etc.

If I change the line var content = form[i]; to var content = form[i].value;
The Mozilla Error Console gives me errors on that line of
form[i] is undefined

Any ideas?

Philip M
12-28-2011, 07:51 AM
var form = document.GetElementById("FormA"); // Javascript is case-sensitive, so your script would not work at all!

The value of an empty form field is not undefined but an empty string ""

So var content = form[i].value;
and delete if(content == undefined) content = "";

Old Pedant
12-28-2011, 08:35 AM
Good eyes, Philip, as always.

I also have to question the use of formSize in


for(var i=0; i<formSize; i++){

where is that coming from??? Why wouldn't you use

for ( var i = 0; i < form.elements.length; ++i )

?? After all, if formSize is too large, then indeed you would get an error from form[i] even if you dig spell getElementById() correctly.

But there are other problems with the *CONCEPT* of that code.

If you have any checkboxes or radio buttons or <select multiple> fields in the <form> they will *NOT* be handled at all correctly by that code. And buttons and any submittal fields will be included without regard to whether they were clicked on or not, if that matters.

It's pretty much useless except for <input type="text"> and <textarea> form fields. (It's also poorly designed in that if a form field is ever added or removed or moved there would be no way to realize that from the concatenated string, alone.) Just seems like a bad idea all around.

Ann-Marie
12-28-2011, 09:00 AM
Thanks Philip, that should fix it.

Thanks Mr. Pendant for your comments I am very aware of that.

Because the form is a mix of radio buttons and text boxes and because it has to map to cookie refresh, there is a literal map (mostly comments with a few literals) that declares what is where in the form and formSize is a literal declared in that map.

Yes, it is a little clumsy but I'm (re)writing it for my own use so it doesn't need to be idiot proof.

Philip M
12-28-2011, 09:06 AM
Yes, it is a little clumsy but I'm (re)writing it for my own use so it doesn't need to be idiot proof.

"If you make it idiot proof, they'll build a better idiot" :D:D

Old Pedant
12-28-2011, 07:09 PM
"If you make it idiot proof, they'll build a better idiot" :D:D
And I'm proof of that.

Ann-Marie
12-29-2011, 05:20 AM
This idiot is still having problems.


function GetFormData(){
FormData = ""; //Global
var form = document.GetElementById("FormA");
for(var i=0; i<formSize; i++){
FormData += form[i] + "~";
}
}

It gets the correct number of entries but they are all
[object HTMLInputElement]~[object HTMLInputElement]~[object HTMLInputElement]~ - - - etc.
How do I extract the value of the elements?

Edit:
If it helps, here is a typical form input line
<TD>Address<BR><INPUT TYPE="text" SIZE="20" MAXLENGTH="60" NAME="Bill Address" ID="BillAddress" ONCHANGE="ShipAddress.value=BillAddress.value"></TD>

Philip M
12-29-2011, 07:27 AM
FormData += form.value + "~"; (I gave you this in Post #6)

And you [I]still have not taken on board my corection of GetElementById. I am beginning to doubt your claims of being an experienced programmer.



All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Old Pedant
12-29-2011, 08:26 PM
You know, Philip, I don't think she is copy/pasting actual code here.

If she was really still using "Get" instead of "get", then that statement should have thrown an error and she would never get to the point of seeing
[object HTMLInputElement]~[object HTMLInputElement]~[object HTMLInputElement]

Ann-Marie: Please copy/paste the EXACT AND ACTUAL code you are using.

As for getting the value of each form element: As we said, you should be using

FormData += form[i].value + "~";


If you are getting an error from that, then maybe time to find out WHICH value of [b]i[/] is causing it. Possibly you have added a new form field that doesn't have a [b].value[/b[ property??

For starters, I'd do this:


function GetFormData(){
FormData = ""; //Global
var names = "";
var form = document.getElementById("FormA");
for(var i=0; i<formSize; i++)
{
if ( form[i] == null )
{
alert("No field for i=" + i);
return;
}
var fld = form[i];
names += "\n" + fld.name;
if ( fld.value == null )
{
alert("No value for i=" + i);
} else {
FormData += fld.value + "~";
}
}
alert( "List of names: " + names );
alert( "List of values: " + FormData );
}

How many years has it been since you've done any programming? Surely you haven't forgotten the kinds of debugging code you had to add to programs in the 60s and 70s, before debuggers came into vogue.

You can do the same 60s things in JavaScript, using alert()s in place of console logging.

But you can also use any of the many many JavaScript debuggers that are out there. Why have you not started using a debugger by now?

I think I'm with Philip and wondering about your experience claims.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum