asked on

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

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

limweizhong

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.

Michel Plungjan

Nah

<input type="hidden" name="length"
overwrites all of
form["length"]
form.length
and form.elements["length"]

sidedishstudio

ASKER

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 :)

Michel Plungjan

You are welcome. Sorry about the extra form there :)

limweizhong

Actually you are wrong. It works for me. I purposely tested it. There is no such thing as form.length anyway.

Michel Plungjan

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

limweizhong

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

Michel Plungjan

Yes they have all overwritten the "length" of the actual form
We do not know how the call to the function was performed

sidedishstudio

ASKER

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.

Michel Plungjan

Ah, length is an OBJECT if a field an an INT when an enumerator

limweizhong

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.