MozillaZine

Unable to set value of HTML input element to empty string

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

Post Posted October 28th, 2017, 12:03 am

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
Moderator

User avatar
 
Posts: 117965
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted October 28th, 2017, 4:23 am

Moving to Web Development.

morat
 
Posts: 2488
Joined: February 3rd, 2009, 6:29 pm

Post Posted November 6th, 2017, 2:35 pm

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

User avatar
 
Posts: 2110
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted November 7th, 2017, 5:11 am

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: 386
Joined: September 6th, 2006, 1:39 pm

Post Posted November 18th, 2017, 2:49 pm

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

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

Frenzie

User avatar
 
Posts: 2110
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted November 20th, 2017, 1:44 pm

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: 386
Joined: September 6th, 2006, 1:39 pm

Post Posted November 20th, 2017, 2:26 pm

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: 122
Joined: February 4th, 2006, 7:34 pm

Post Posted November 20th, 2017, 9:20 pm

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: 386
Joined: September 6th, 2006, 1:39 pm

Post Posted November 21st, 2017, 1:09 am

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.

Frenzie

User avatar
 
Posts: 2110
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted November 21st, 2017, 5:26 am

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: 386
Joined: September 6th, 2006, 1:39 pm

Post Posted November 21st, 2017, 8:20 am

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

User avatar
 
Posts: 2110
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted November 22nd, 2017, 12:33 pm

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.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 2 guests