• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

does firefox have a problem with .setAttribute ?

 
Ranch Hand
Posts: 230
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi I am populating the textboxes using a button . The code is
<input type="button" name="bt_autoFill" id="id_autoFill" value="Auto Fill" onclick="fillComponents()"/>

this calls the javascript function
<script type="text/javascript">
function fillComponents()
{
document.getElementById("id_name").setAttribute("value","zedan");
document.getElementById("id_country").setAttribute("value","USA");
document.getElementById("id_Address").setAttribute("value","South Boulev.");
}
</script>
Now the code works fine when i click it the first time. However if i change a value or erase something in the textboxes the function dosnt work.
all the elements are text boxes. I am testing this on firefox.
However if i run the same thing in IE it works..??
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Please use code tags when posting code to the forums.

Post a SSCCE that demonstrates the issue.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
P.S. Why are you using setAttribute() as opposed to .value?
 
Rajesh Khan
Ranch Hand
Posts: 230
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
.value works however the .setAttribute() does not function properly in firefox. Just to be sure are you saying that I should always prefer using .value instead of .setAttribute??
Could you tell me the difference between the two why one is working and the other isnt?? I tried searching online but couldn't find anything regarding this.??
Here is the way i am using it

I am auto populating various textboxes using a button onclick linked to JavaScript function .
The code is


this calls the javascript function

Now the code works fine when i click it the first time. However if i change a value or erase something in the textboxes the function dosnt work.
all the elements are text boxes. I am testing this on firefox.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Post a SSCCE that demonstrates the issue.

 
Rajesh Khan
Ranch Hand
Posts: 230
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
That was a short example of what i was doing.. just wanted to know why .setAttribute doesnt work and why should .value be preferred ..
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
"short" is only one of the S's in SSCCE. If you want help you need to put at least as much effort as you want people to put into helping you. Create a small page that can be loaded as is into Firefox that demonstrates the issue.
 
Rajesh Khan
Ranch Hand
Posts: 230
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sorry abt that. Here is the entire code for testing.



Test:
1) The AutoFill button works once but doesnt work the second time since its using .setAttribute. (It works if i use .value)
2) Type something in the login and click submit button it doesnt display the value. .getAttribute is used
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Ah, I see what you are trying to do now. And yes, that won't work.

Here's your element: <input name="text_login" type="text" id="id_login" value="" size="23" />

What is the value of the value attribute? Nothing. And it will remain nothing. Typing something into the text field won't change the HTML will it? Of course not. So the value of the attribute does not change.

The .value property, on the other hand, represents the run-time value of the element.

This is why I asked my original question about why are you using getAttribute() in the first place. It's only useful for inspecting the original HTML. If you want the run-time value of an element, you use the property, not the attribute value.


 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Here's something that demonstrates the behavior with a bit more clarity:

Change the value of the value attribute to value="whatever". Then type something else into the field and click submit. What text gets alerted?
 
Rajesh Khan
Ranch Hand
Posts: 230
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Oh ok ...so the .getAttribute() returns the original html of the item and not the runtime value..
what about the .setAttribute ?? any thoughts on that ?? why does it work only the first time i am a bit puzzled. However if i use .value= then it works fine??
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Same thing. setAttribute() will change the value of the attribute, but not the run-time value of the text field.

This is pretty easy to test yourself.

P.S. Instead of alerts, use Firebug in Firefox, and the built-in debuggers in Chrome, Safari and IE to write to the console. Alerts are poor diagnostics tools.

P.P.S What it comes down to is: setAttribute and getAttribute are not the right tools to use to fetch and set the run-time value of form elements.
 
Rajesh Khan
Ranch Hand
Posts: 230
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Just installed Firebug and that helped a lot ... Thanks again for the help.
 
Consider Paul's rocket mass heater.
reply
    Bookmark Topic Watch Topic
  • New Topic