Unable to set value of HTML input element to empty string

[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?

[DanRaisch]

Moving to Web Development.

[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

[Frenzie]

I can't confirm it on Fx 52 or 56 either. There must be more to it.

[AlfonsoML]

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

That might be confusing, but that's the way that it works.

[Frenzie]

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.

[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]

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]

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.

[Frenzie]

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.

[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.

[Frenzie]

Right, I suppose that takes us back to the lack of a minimal testcase in the OP.