Win a copy of Think Java: How to Think Like a Computer Scientist this week in the Java in General forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

does firefox have a problem with .setAttribute ?

 
Rajesh Khan
Ranch Hand
Posts: 230
  • Mark post as helpful
  • send pies
  • 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..??
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64824
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Please use code tags when posting code to the forums.

Post a SSCCE that demonstrates the issue.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64824
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • 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
  • 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
Author and ninkuma
Marshal
Pie
Posts: 64824
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • 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
  • 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
Author and ninkuma
Marshal
Pie
Posts: 64824
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • 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
  • 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
Author and ninkuma
Marshal
Pie
Posts: 64824
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • 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
Author and ninkuma
Marshal
Pie
Posts: 64824
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • 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
  • 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
Author and ninkuma
Marshal
Pie
Posts: 64824
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • 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
  • Quote
  • Report post to moderator
Just installed Firebug and that helped a lot ... Thanks again for the help.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic