1419263 - element.value = '' does not change the value

Status: UNCONFIRMED

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

Description

[James Cobban]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171115095126

Steps to reproduce:

When I run the following code on Firefox 56 and 57 on Linux:
[code]
/************************************************************************
 *  deleteName								*
 *									*
 *  When a Delete button is clicked this function removes the		*
 *  row from the table.							*
 *									*
 *  Input:								*
 *	$this		<button type=button id='Delete....'		*
 ************************************************************************/
function deleteName()
{
    var	code	= this.id.substring(6);	// language code
    var	form	= this.form;
    var	cell	= this.parentNode;	// <td> containing button
    var	row	= cell.parentNode;	// <tr> containing button
    var inputs	= row.getElementsByTagName('input');
    for(var ii = 0; ii < inputs.length; ii++)
    {
	child	= inputs[ii];
	if (child.name.substring(0,4) == 'Name')
	{
	    child.value	= '';
	}
	child.type		= 'hidden';
    }
    row.removeChild(cell);
    alert("CountryNamesEdit.js::deleteName: 163 " + row.outerHTML);

    return false;
}		// deleteName
[/code]
You can see the page which uses this code at https://www.jamescobban.net/Canada/CountryNamesEdit.php?cc=GB although you cannot update the table without registering as a contributor to the site.  You are welcome to do so as long as you restore the state of the database once you have completed testing.



Actual results:

The output of the line labelled 163 is:
[code]
CountryNamesEdit.js::deleteName: 163 <tr id="RowGB">
	<td class="center">
	    <input name="Codeen" id="Codeen" value="GB" class="actcodenc" size="2" maxlength="2" readonly="readonly" type="hidden">
	</td>
	<td class="left">
	    <input name="Nameen" id="Nameen" value="United Kingdom" class="actleftnc" size="28" maxlength="64" type="hidden">
	</td>
	<td class="left">
	    <input name="Articleen" id="Articleen" value="" class="actleftnc" size="12" maxlength="32" type="hidden">
	</td>
	<td class="left">
	    <input name="Possessiveen" id="Possessiveen" value="" class="actleftnc" size="12" maxlength="32" type="hidden">
	</td>
      </tr>
[/code]
In other words the value of <input name="Nameen"> was [b]not[/b] changed.  I can set the value of the element to any non-empty value, but I cannot set it to an empty string using an assignment to the value attribute.  For contrast when I run the same code on Chromium the value [b]is[/b] set to empty.  It is important for the code to set the value to empty because that is the signal to the script that is the action for this form to actually delete the record identified by the country code 'GB' and the language code 'en', so that the table matches the visual appearance that is the result of this function making all of the input fields hidden and deleting the button.



Expected results:

The attribute value should have been set to the assigned value.  Note that if I replace the line with child.setAttribute('value','') it does work.

Comment 1

[Hsin-Yi Tsai (she/her) [:hsinyi]]

Hi James,
Thanks for reporting this and the detailed comment.
I tried to create a minimal test case to reproduce your issue; however, in my test case, |element.value =''| worked as expected in FF56, 57 and Nightly 59.　I am not sure if I missed something.
My test case:　https://jsfiddle.net/03md7qgh/ 

It'd be helpful that you could provide a reduced test case for us to narrow the issue. Or, if you know this is a recent regression, run the tool to get the range https://github.com/mozilla/mozregression/ 

Thanks again.

Comment 2

[Andrew Overholt [:overholt]]

(For comment 1)

Comment 3

[James Cobban]

I do not know what aspects of the particular case contribute to the problem.  That is the entirety of the relevant Javascript code, the onclick method of the Delete button, and I do not see how the exact details of the HTML could contribute to the JS engine not setting the value.

To permit 3rd party testing I have created a sandbox for the code:

https://www.jamescobban.net/Canada/CountryNamesEditDebug.php?cc=GB

This version of the code:

1) restores the Javascript to what I reported, where my production code has bypassed the problem by using setAttribute
2) does not actually update the database, although every other line of PHP and HTML remains unchanged, so it is safe, although obviously unnecessary, to click the "Update Database" button.
3) because it does not actually update the database it does not require signing in with a registered user name

Just click on the "Delete" button and the outerHTML is displayed in an alert, showing that the value of the <input name="Namefr" id="Namefr" value="Royaume Unie" class="actleftnc" size="28" maxlength="64" type="hidden"> has not changed.

You can run this as many times as you like.

The only message in the console log is:
ReferenceError: assignment to undeclared variable child  CountryNamesEditDebug.js:156:2

Comment 4

[James Cobban]

I forgot to mention that this was a new script that I first ran on Firefox 56, so I do not know if it existed on any previous release.  All of my systems have been upgraded to Firefox 57 now.

Comment 5

[James Cobban]

Just for side information and to indicate that clearly there is something funny going on with this one script I have not noticed a similar problem with any of the other scripts on my site that assign an empty string to the value of an element.  However this appears to be the only place where I actually use the value attribute of a field to control the action taken:

Account.js:    form.userid.value	= '';	// clear userid and password
Account.js:    form.password.value	= '';
Canada/CountryNamesEditDebug.js:	    child.value		= ''; <--- the script in question.
database/CensusForm.js:	    field.value	= '';
database/CensusForm.js:	    field.value	= '';
database/CensusForm.js:	    field.value	= '';
database/CensusForm.js:	    field.value	= '';
database/CensusForm.js:	    field.value	= '';
database/CensusForm.js:	    field.value	= '';
database/CensusForm.js:	    field.value	= '';
database/CensusForm.js:	    occElement.value	= '';
database/CensusForm.js:	    canReadElt.value	= '';
database/CensusForm.js:	    canWriteElt.value	= '';
database/CensusForm.js:			field.value		= '';
database/EditCensuses.js:	inputs[ie].value	= '';
database/SqlCommand.js:    form.Confirm.value		= '';	// do not execute command
FamilyTree/ChildStatus.js:    form.elements['ChildStatus' + rownum].value	= '';
FamilyTree/commonMarriage.js:    famForm.HusbGivenName.value	= '';
FamilyTree/commonMarriage.js:    famForm.HusbSurname.value	= '';
FamilyTree/commonMarriage.js:    famForm.WifeGivenName.value	= '';
FamilyTree/commonMarriage.js:    famForm.WifeSurname.value	= '';
FamilyTree/Address.js:	form.debug.value	= '';
FamilyTree/EventTypes.js:		element.value	= '';
FamilyTree/Location.js:	    form.Boundary.value	= '';
FamilyTree/ChildRelations.js:    form.elements['CPRelation' + rownum].value	= '';
FamilyTree/editIndivid.js:			child.value		= '';
FamilyTree/editIndivid.js:		    dateElt.value	= '';
FamilyTree/editIndivid.js:		    locnElt.value	= '';
jscripts/oldtiny_mce/plugins/advimage/js/image.js:		f.elements.width.value = f.elements.height.value = '';
jscripts/oldtiny_mce/plugins/table/js/row.js:		formObj.backgroundimage.value = '';
jscripts/oldtiny_mce/plugins/table/js/table.js:		formObj.backgroundimage.value = '';
jscripts/oldtiny_mce/plugins/table/js/cell.js:		formObj.backgroundimage.value = '';
Ontario/DeathRegDetail.js:	    husbandName.value	=  '';
Ontario/DeathRegDetail.js:	    fatherName.value	=  '';
Ontario/MarriageRegDetail.js:    form.Date.value		= '';
Ontario/MarriageRegDetail.js:    form.Remarks.value		= '';
Ontario/MarriageRegDetail.js:    form.GGivenNames.value	= '';
Ontario/MarriageRegDetail.js:    form.GSurname.value		= '';
Ontario/MarriageRegDetail.js:    form.GAge.value		= '';
Ontario/MarriageRegDetail.js:    form.GReligion.value	= '';
Ontario/MarriageRegDetail.js:    form.GFatherName.value	= '';
Ontario/MarriageRegDetail.js:    form.GMotherName.value	= '';
Ontario/MarriageRegDetail.js:    form.BGivenNames.value	= '';
Ontario/MarriageRegDetail.js:    form.BSurname.value		= '';
Ontario/MarriageRegDetail.js:    form.BAge.value		= '';
Ontario/MarriageRegDetail.js:    form.BOccupation.value	= '';
Ontario/MarriageRegDetail.js:    form.BReligion.value	= '';
Ontario/MarriageRegDetail.js:    form.BFatherName.value	= '';
Ontario/MarriageRegDetail.js:    form.BMotherName.value	= '';
Ontario/MarriageRegDetail.js:    form.MGivenNames.value	= '';
Ontario/MarriageRegDetail.js:    form.MSurname.value		= '';
Ontario/MarriageRegDetail.js:    form.Witness1.value		= '';
Ontario/MarriageRegDetail.js:    form.Witness2.value		= '';
Ontario/MarriageRegQuery.js:	element.value	= '';
Ontario/OcfaQuery.js:		input.value	= '';
Ontario/DeathRegQuery.js:	element.value	= '';
Signon.js:    form.userid.value	= '';	// clear userid and password
Signon.js:    form.password.value	= '';
Signon.js:    form.password.value	= '';
Signon.js:    form.password.value	= '';