Unable to set value of HTML input element to empty string

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Locked
jcobban
Posts: 125
Joined: February 4th, 2006, 7:34 pm

Unable to set value of HTML input element to empty string

Post by jcobban »

When I run the following code on Firefox 56 on Linux:

Code: Select all

/************************************************************************
 *  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
The output of the line labelled 163 is:

Code: Select all

CountryNamesEdit.js::deleteName: 163 <tr id="RowGB">
	<td class="center">
	    <input name="CodeGB" id="CodeGB" value="GB" class="actcodenc" size="2" maxlength="2" readonly="readonly" type="hidden">
	</td>
	<td class="left">
	    <input name="NameGB" id="NameGB" value="United Kingdom" class="actleftnc" size="28" maxlength="64" type="hidden">
	</td>
	<td class="left">
	    <input name="ArticleGB" id="ArticleGB" value="" class="actleftnc" size="12" maxlength="32" type="hidden">
	</td>
	<td class="left">
	    <input name="PossessiveGB" id="PossessiveGB" value="" class="actleftnc" size="12" maxlength="32" type="hidden">
	</td>
      </tr>
In other words the value of <input name="NameGB"> was not changed. I can set the value of the element to any non-empty value, but I cannot set it to an empty string. For contrast when I run the same code on Chromium the value is 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 key 'GB', 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.

How do I set the value of that input element to an empty string in a browser portable way?
User avatar
DanRaisch
Moderator
Posts: 127166
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Re: Unable to set value of HTML input element to empty strin

Post by DanRaisch »

Moving to Web Development.
morat
Posts: 6394
Joined: February 3rd, 2009, 6:29 pm

Re: Unable to set value of HTML input element to empty strin

Post by morat »

I changed the value of the "Go" button to an empty string.

Code: Select all

document.querySelector('input[name="sa"]').value = "";
Before: <input name="sa" value="Go" type="submit">

After: <input name="sa" value="" type="submit">

Test
http://www.mozillazine.org/

Firefox 56.0.2
Windows 7 SP1 32-bit
User avatar
Frenzie
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium
Contact:

Re: Unable to set value of HTML input element to empty strin

Post by Frenzie »

I can't confirm it on Fx 52 or 56 either. There must be more to it.
Intelligent alien life does exist, otherwise they would have contacted us.
AlfonsoML
Posts: 387
Joined: September 6th, 2006, 1:39 pm
Contact:

Re: Unable to set value of HTML input element to empty strin

Post by AlfonsoML »

The .value property is not the same as the attribute "value".

That might be confusing, but that's the way that it works.
User avatar
Frenzie
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium
Contact:

Re: Unable to set value of HTML input element to empty strin

Post by Frenzie »

AlfonsoML wrote:The .value property is not the same as the attribute "value".

That might be confusing, but that's the way that it works.
There's no distinction between get/setAttribute and .value if you run this on the page you're reading. (This'll select the "search this topic" search box. Run the first line and it'll say "bla", run the second and it'll be empty.)

Code: Select all

document.querySelector('input.search').value='bla'
document.querySelector('input.search').value=''
I suppose I should've mentioned the get/set/removeAttribute DOM functions in passing but there's no sufficient minimal testcase present.
Intelligent alien life does exist, otherwise they would have contacted us.
AlfonsoML
Posts: 387
Joined: September 6th, 2006, 1:39 pm
Contact:

Re: Unable to set value of HTML input element to empty strin

Post by AlfonsoML »

If you use

Code: Select all

document.querySelector('input.search').setAttribute('value', 'test it') 
you'll see that in the page the value will not change, but when you print

Code: Select all

document.querySelector('input.search').parentNode.innerHTML
the value attribute has indeed changed.
jcobban
Posts: 125
Joined: February 4th, 2006, 7:34 pm

Re: Unable to set value of HTML input element to empty strin

Post by jcobban »

AlfonsoML wrote:If you use

Code: Select all

document.querySelector('input.search').setAttribute('value', 'test it') 
you'll see that in the page the value will not change, but when you print

Code: Select all

document.querySelector('input.search').parentNode.innerHTML
the value attribute has indeed changed.
I have repeated the test and

Code: Select all

child.value = '';
still does not set the value to empty in Firefox 57, although it does in Chrome. However

Code: Select all

child.setAttribute('value','');
does set the value to empty.

In my opinion the behavior of Firefox 56 and 57 does not conform to the specification at https://developer.mozilla.org/en-US/doc ... putElement which in describing the value attribute says "string: Returns / Sets the current value of the control. "
AlfonsoML
Posts: 387
Joined: September 6th, 2006, 1:39 pm
Contact:

Re: Unable to set value of HTML input element to empty strin

Post by AlfonsoML »

jcobban wrote:which in describing the value attribute says "string: Returns / Sets the current value of the control. "
No, it describes the value property. Check the header.
User avatar
Frenzie
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium
Contact:

Re: Unable to set value of HTML input element to empty strin

Post by Frenzie »

AlfonsoML wrote:If you use

Code: Select all

document.querySelector('input.search').setAttribute('value', 'test it') 
you'll see that in the page the value will not change, but when you print

Code: Select all

document.querySelector('input.search').parentNode.innerHTML
the value attribute has indeed changed.
Meh, I can't be bothered to test that in Fx 56 atm so I'll take your word for it as far as deviant behavior goes. But yes, obviously the value property and the DOM value attribute aren't necessarily the same thing so I guess I just don't understand what you're trying to clarify. :P
Intelligent alien life does exist, otherwise they would have contacted us.
AlfonsoML
Posts: 387
Joined: September 6th, 2006, 1:39 pm
Contact:

Re: Unable to set value of HTML input element to empty strin

Post by AlfonsoML »

I'm trying to state that in the OP, the value property is set, but then it checks the value attribute (by row.outerHTML), so that's why it fails.
User avatar
Frenzie
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium
Contact:

Re: Unable to set value of HTML input element to empty strin

Post by Frenzie »

Right, I suppose that takes us back to the lack of a minimal testcase in the OP.
Intelligent alien life does exist, otherwise they would have contacted us.
Locked