File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes does firefox have a problem with .setAttribute ? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "does firefox have a problem with .setAttribute ?" Watch "does firefox have a problem with .setAttribute ?" New topic
Author

does firefox have a problem with .setAttribute ?

Rajesh Khan
Ranch Hand

Joined: Oct 16, 2011
Posts: 230
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

Joined: Jan 10, 2002
Posts: 61413
    
  67

Please use code tags when posting code to the forums.

Post a SSCCE that demonstrates the issue.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61413
    
  67

P.S. Why are you using setAttribute() as opposed to .value?
Rajesh Khan
Ranch Hand

Joined: Oct 16, 2011
Posts: 230
.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

Joined: Jan 10, 2002
Posts: 61413
    
  67

Bear Bibeault wrote:Post a SSCCE that demonstrates the issue.
Rajesh Khan
Ranch Hand

Joined: Oct 16, 2011
Posts: 230
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

Joined: Jan 10, 2002
Posts: 61413
    
  67

"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

Joined: Oct 16, 2011
Posts: 230
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

Joined: Jan 10, 2002
Posts: 61413
    
  67

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

Joined: Jan 10, 2002
Posts: 61413
    
  67

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

Joined: Oct 16, 2011
Posts: 230
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

Joined: Jan 10, 2002
Posts: 61413
    
  67

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

Joined: Oct 16, 2011
Posts: 230
Just installed Firebug and that helped a lot ... Thanks again for the help.
 
 
subject: does firefox have a problem with .setAttribute ?