form.elements['length'] is undefined ???

I am trying to change this formfield: <INPUT TYPE="hidden" NAME="length" value="">
using this function call: setSize(this,8.5,5.5,0.1);
to the fuction attached....

problem is the "length" field test returns undefined.  When I use a name besides 'length' it works fine...but I HAVE to submit the form name 'length' to the third party app. Does anybody know what is causing this behavior and how to get around it?
function setSize(el,h,l,w){
		var quant = el.options[el.selectedIndex].value;	
		if(quant <= 100){
			el.form.elements['height'].value = h;
			el.form.elements['length'].value = l;
			el.form.elements['width'].value = w;
		}else{
			el.form.elements['height'].value = "";
			el.form.elements['length'].value = "";
			el.form.elements['width'].value = "";
		}
		document.getElementById('test').innerHTML =
		el.form.elements['width'].value + 
		"<br />" + el.form.elements['length'].value + 
		"<br />" + el.form.elements['height'].value;
	}

Open in new window

sidedishstudioAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Yes, the attributes are read/write

Like submit
If you change anything to name="submit" you cannot call form.submit() anymore

call it Length and do
<form onSubmit="this.Length.name='length'"

OR use ID:

<input type="hidden" name="length" id="length" />

function setSize(el,h,l,w){
  var quant = el.options[el.selectedIndex].value; 
  if(quant <= 100){
    el.form.elements['height'].value = h;
    document.getElementById('length').value = l;
    el.form.elements['width'].value = w;
.
.
.

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
limweizhongCommented:
Actually that is because the form.elements has a property called 'length' which is the number of elements on the form. So to work around it, just call el.form.length instead of using the elements collection.
0
Michel PlungjanIT ExpertCommented:
Nah

<input type="hidden" name="length"
overwrites all of
form["length"]
form.length
and form.elements["length"]
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

sidedishstudioAuthor Commented:
Didn't want to use ID as I have multiple forms with the same field. The onSubmit name change solution worked perfectly after changing the selector to this.Length.name.

Thanks so much for your creative solution :)
0
Michel PlungjanIT ExpertCommented:
You are welcome. Sorry about the extra form there :)
0
limweizhongCommented:
Actually you are wrong. It works for me. I purposely tested it. There is no such thing as form.length anyway.
0
Michel PlungjanIT ExpertCommented:
Erm have a look

<form>
<input type="text">
<input type="button" onClick="alert(this.form.length)" value="click for .length">
</form>
<a href="#" onclick="alert(document.forms[0].length); return false">Click for .length</a>
<hr>
<form>
<input type="text" name="length" value="length">
<input type="button" onClick="alert(this.form.length)" value="click for .length">
</form>
<a href="#" onclick="alert(document.forms[1].length); return false">Click for .length</a>
<hr>
<form>
<input type="text">
<input type="button" onClick="alert(this.form['length'])" value="click for ['length']">
</form>
<a href="#" onclick="alert(document.forms[2]['length']); return false">Click for ['length']</a>
<hr>
<form>
<input type="text" name="length" value="length">
<input type="button" onClick="alert(this.form['length'])" value="click for ['length']">
</form>
<a href="#" onclick="alert(document.forms[3]['length']); return false">Click for ['length']</a>
<hr>
<form>
<input type="text">
<input type="button" onClick="alert(this.form['length'])" value="click for ['length']">
</form>
<a href="#" onclick="alert(document.forms[4].elements['length']); return false">Click for ['length']</a>
<hr>
<form>
<input type="text" name="length" value="length">
<input type="button" onClick="alert(this.form.elements['length'])" value="click for ['length']">
</form>
<a href="#" onclick="alert(document.forms[5].elements['length']); return false">Click for ['length']</a>
<hr>

Open in new window

0
limweizhongCommented:
Sorry, I was wrong that there is no such thing as the length property of the form (which actually doesn't make sense as it is not a collection),
but I was right in that "this.form.length" would give the element that is named 'length' in the form, which was what the author wanted.
However, I do not see why the original code returned undefined in the first place, as all the buttons in the edited code below works.
<form>
<input type="text" name="length" value="length">
<input type="button" onClick="alert(this.form.length.value)" value="click for .length">
</form>
<hr>
<form>
<input type="text" name="length" value="length">
<input type="button" onClick="alert(this.form['length'].value)" value="click for ['length']">
</form>
<hr>
<form>
<input type="text" name="length" value="length">
<input type="button" onClick="alert(this.form.elements.length.value)" value="click for ['length']">
</form>
<hr>
<form>
<input type="text" name="length" value="length">
<input type="button" onClick="alert(this.form.elements['length'].value)" value="click for ['length']">
</form>
<hr>

Open in new window

0
Michel PlungjanIT ExpertCommented:
Yes they have all overwritten the "length" of the actual form
We do not know how the call to the function was performed
0
sidedishstudioAuthor Commented:
The function call in the given example was setSize(this,8.5,5.5,0.1).  I left out that it was called onChange of  one of several select elements. The width and height values set fine.

form.elements['length'].value I can only figure based on your guys' feedback - would have been expecting an integer since it refers to the length property for the collection (if it is even allowed to be set) - and I sent it a float.

I am NO expert, but the changing of the element name onSubmit worked great.
0
Michel PlungjanIT ExpertCommented:
Ah, length is an OBJECT if a field an an INT when an enumerator
0
limweizhongCommented:
Yes, in Firefox (v 2) length overrides only the length property of the form itself and not that of the elements collection. However, in IE (v 6), it overrides both. Personally, I feel then that in this case Firefox has a "better" implementation.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Components

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.