Discuss how to use and promote Web standards with the Mozilla Gecko engine.
jcobban
Posts: 126Joined: February 4th, 2006, 7:34 pm
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

Posts: 120949Joined: September 23rd, 2004, 8:57 pmLocation: Somewhere on the right coast
Posted October 28th, 2017, 4:23 am
Moving to Web Development.
morat
Posts: 3076Joined: February 3rd, 2009, 6:29 pm
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

Posts: 2134Joined: May 5th, 2004, 10:40 amLocation: Belgium
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: 387Joined: September 6th, 2006, 1:39 pm
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

Posts: 2134Joined: May 5th, 2004, 10:40 amLocation: Belgium
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: 387Joined: September 6th, 2006, 1:39 pm
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: 126Joined: February 4th, 2006, 7:34 pm
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: 387Joined: September 6th, 2006, 1:39 pm
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

Posts: 2134Joined: May 5th, 2004, 10:40 amLocation: Belgium
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. 
Intelligent alien life does exist, otherwise they would have contacted us.
AlfonsoML
Posts: 387Joined: September 6th, 2006, 1:39 pm
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

Posts: 2134Joined: May 5th, 2004, 10:40 amLocation: Belgium
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 4 guests
|