jQuery: how to return the 'value' of an html attribute

Question

I have some HTML like:

<input class="button" name="submit_button" type="submit" value="Abe Lincoln">

assuming a jQuery object

foo = $('input.button') 

that consists of the above HTML, how can I extract the name from the 'value' attribute?

Answer 1

Try this ;)

foo = $('input.button').val()

or you can use attr():

foo = $('input.button').attr('value')

Answer 2

var foo = $('input.button');
var val =foo.val();

Answer 3

$('input.button').val(); Docs: http://api.jquery.com/val/

.val() will get the current value of the user's input. To get other attributes, use .attr():

$('input.button').attr('name') // returns "submit_button"

Docs: http://api.jquery.com/attr/

---

Note, also, a warning from the .attr docs:

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

i.e., don't use $('input.button').attr('checked'), rather $('input.button').prop('checked').

Docs: http://api.jquery.com/prop/

Answer 4

If you want to extract the value of any attribute then you can use jQuery's .attr() function.

var output = $('input.button').attr('value');