114212 - The value attribute behaves strangely with dynamically created input elements and cloneNode

Status: VERIFIED WORKSFORME

(Core :: DOM: Core & HTML, defect)

Description

[Evan Jones]

It is possible that these are not all the same bug, but I think it is close
enough. The test case contains a number of very similar tests which all
demonstrate different behaviour. Only Test1 works when I tried.

The following code fragment (Test1 in the testcase):

	var newInput = document.createElement( "input" );
	newInput.type = "hidden";
	newInput.name = "dynamic";
	newInput.value = "works correctly";
	alert( newInput.value );
Does what is expected, it displays an alert with the text "works correctly".

The next code fragment changes the input type to "hidden" (Test2):

	var newInput = document.createElement( "input" );
	newInput.type = "text";
	newInput.name = "dynamic";
	newInput.value = "works correctly";
	alert( newInput.value );

I expect the same output as for the first test: An alert with the text "works
correctly". However, I get a blank alert.

The next test (Test3) adds the new text input to the form:

	var newInput = document.createElement( "input" );
	newInput.type = "text";
	newInput.name = "dynamic";
	newInput.value = "works correctly";
	document.getElementById( "dbform" ).appendChild( newInput );
	alert( newInput.value );
	newInput.value = "works correctly";
	
	alert( blankInput.value );
	blankInput.value = "works correctly";

Again, it shows the alert after it has been added and the text input does not
contain the correct value. However, if we change the value property after the
text input has been added to the form, it works correctly.

The next test takes the working Test1 code and clones the node.

	var newInput = document.createElement( "input" );
	newInput.type = "hidden";
	newInput.name = "dynamic";
	newInput.value = "works correctly";
	
	var clonedInput = newInput.cloneNode( false );
	alert( newInput.value + " == " + clonedInput.value );

I expect to see "works correctly == works correctly", but the cloned node does
not get a copy of the value, so instead I see "works correctly ==". Using
.setAttribute() and .getAttribute() works.

Test5 tries to change the value of this cloned node:

	var newInput = document.createElement( "input" );
	newInput.type = "hidden";
	newInput.name = "dynamic";
	newInput.value = "works correctly";
	
	var clonedInput = newInput.cloneNode( false );
	clonedInput.value = "new value";
	alert( clonedInput.value );

I expect to see an alert with the text "new value". However, I get a blank alert!

Test6 uses .getAttribute( "value" ) instead of .value:

	var newInput = document.createElement( "input" );
	newInput.type = "hidden";
	newInput.name = "dynamic";
	newInput.value = "works incorrectly";
	
	var clonedInput = newInput.cloneNode( false );
	clonedInput.value = "new value";
	alert( clonedInput.getAttribute("value") );

This test sort of works. The alert should show "new value", but instead shows
"works incorrectly". This means that the attribute is getting cloned, but the
.value property isn't hooked up correctly?

Using our knowledge about text inputs, the following test case creates a text
input, attaches it to the form, sets the value, clones it, attaches it to the
form and sets the value. This works correctly (Test7):

	var newInput = document.createElement( "input" );
	newInput.type = "text";
	newInput.name = "dynamic";
	
	document.getElementById( "dbform" ).appendChild( newInput );
	newInput.value = "works correctly";
	
	var clonedInput = newInput.cloneNode( false );
	document.getElementById( "dbform" ).appendChild( clonedInput );
	
	clonedInput.value = "new value";

Using this new information with hidden inputs also shows that the value property
on the cloned hidden input "works" once it is attached to the form: (Test8):

	var newInput = document.createElement( "input" );
	newInput.type = "hidden";
	newInput.name = "dynamic";
	newInput.value = "works incorrectly";
	
	var clonedInput = newInput.cloneNode( false );
	document.getElementById( "dbform" ).appendChild( clonedInput );
	clonedInput.value = "works correctly";
	alert( clonedInput.value );

In summary:

- The value property on dynamically created inputs with type="text" doesn't work
until they are part of the form.
- The value property on dynamically created inputs with type="hidden" work.
- When a hidden input is cloned, the value property does not work until it is
part of a form.

Tested in the Debian build of Mozilla 0.9.5 (I'll try to get to a high speed
Internet connection to test a more recent build).

Comment 1

[Evan Jones]

Attachment: Test Case: The test cases described in the bug description, all attached to buttons

Comment 2

[Boris Zbarsky [:bzbarsky]]

Please get that recent build.  All of this stuff has been completely rewritten
since 0.9.5.

I pass all the tests with a current build except test 6, which is not a valid
test.  The "value" attribute corresponds to the .defaultValue property, not to
the  .value property.  So calling getAttribute("value") will _not_ show the same
thing as .value.

Comment 3

[John Keiser (jkeiser)]

I see same results as bz, build 2001120708.  Most likely works in 0.9.6 as well.

Comment 4

[Evan Jones]

Yet again I am cursed for being on the wrong end of a modem internet connection.
I apologize for being unable to download the latest build, and wasting all your
time. Expecially as I wasted a lot of my time trying to figure this bug out
myself when I ran into it working on my web-based application.

Comment 5

[Sivakiran Tummala]

verified worksforme.