Getting and setting value of html elements using jQuery

If you have started using jQuery recently and you  are used to DOM methods of getting and setting values for form and html elements, this article is for you.

Using jQuery can be confusing in the beginning but it is a lot easier once you get hold of it. In this post I will summarize methods for getting and setting values for html elements using jQuery. I assume that you are familiar with the $ function. Though it can be used in different ways to select elements, we will stick to selecting elements by id for the purpose of this tutorial.

An element can be accessed using its id as follows:

$('#someId')

Textbox, Hidden field and Textarea

All these elements share a common method. val() method is used to get and set values for these elements.

Setting:

$('#someid').val('any value')

will set the value of textbox to “any value”.

Getting:

$('#someid').val()

will get the value of that text box.

Radio Buttons and checkboxes

attr() is used to check/uncheck and select/unselect radios and checkboxes

Setting:

$('#id').attr('checked', true)

will select the control

$('#id').attr('checked', false)

will unselect the control

Getting

$('#id').attr('checked')

This will give true if radio/checkbox is checked/selected, false otherwise.

Select box/ Combo box

A notorious control, jQuery makes it very easy to get and set value of a combo box.

Setting:

$('#selectbox').val('1')

Pass the value of option that you wish to select to val()

Getting:

$('#selectbox').val()

This will give value of currently selected option in combo box

Setting/Getting innerHTML  of other elements

Just like innerHTML, jQuery provides a handy function to manipulate innerHTML for all html elements.

Setting:

$('#somediv').html('some html inside a paragraph')

This will set the innerHTML of element with id somediv

Getting:

$('#somediv').html()

This will return the innerHTML of an element.

Thats all to it. Again, a demo can be found at this link (and obviously source code too). You can always shoot me a mail in case your question is not answered here.

Give this article a thumbs up on stumble upon if you liked this

Related Posts

• Why you MUST use client side validation
• Filling a select box using javascript and jQuery
• jQuery Tip: Finding tag name of an element
• 61 jQuery Image and gallery plugins
• Favorite tech links of the week : 17 Jan – 23 Jan, 2011