when to use .val() vs attr()

Question

From my understanding .attr() and .val() are the same except .attr() returns the initial value/ the value in the markup, where as the .val() returns the current value. I did a little experiment though and that brought up more questions then answers. I know there is a duplicate but it didn't seem to fully answer my question

    var attrib=$('#overlay').attr('style');
    //returned  the initial value "display: none;"
    //then I changed the value with
     var test= $('#overlay').attr('style', 'display: block');
    // returned "display: block;"
    //I then pulled back up the value with .attr()
    var test2= $('#overlay').attr('style');
    /* returned "display: block;", 
    it returned the current value not the one in the markup */

So what exactly is the difference?

val is for form and get the value of an input, and ttr is any of html attibute of a tag — Álvaro Touzón, Jul 27 '16 at 10:55
`From my understanding .attr() and .val() are the same` - your understanding is *very* wrong. — Jamiec, Jul 27 '16 at 10:56
Here you have the answer http://stackoverflow.com/questions/4837133/whats-the-difference-between-jquery-val-and-attrvalue — Carlos Navas, Jul 27 '16 at 10:57

score 2 · Answer 1 · answered Jul 27 '16 at 10:55

2

.val() is used to get the value associated with any html tag and attr() is used to fetch the attributes like id, class, disabled etc. val() works for textbox, text, hidden but attr works for p div table, text, textarea and so on..

answered Jul 27 '16 at 10:55

Mayank Pandeyz

25,704
4
40
59

when to use .val() vs attr()

1 Answers1