Using jQuery with forms - part 1

Tuesday, 27 October 2009

Every day when writing code I come across a form of some type. Forms are the main way we capture user data outside of page/click tracking. How forms are displayed and handled are vital to the quality of information you receive from the user and also the overall usability of a site.

jQuery has a wealth of plug-ins that can help us deal with some of the major obstacles when handling forms; submit via Ajax, clearing/resetting a form, validation etc. jQuery can also help us to access and manipulate form elements with ease to provide a greater level of usability and improve interaction across a site. In this tutorial I will go over some of the basics of using jQuery with form elements.

To begin with I always like to add an ID to the form element itself. You can access a form using its name or some other selector but for readability I prefer to use an ID and use attribute selectors for other parts of the form e.g.

<form id="example_form" name="example_form">

You could access this form either via its ID or via its name e.g.




Once you add on another field with an attribute it becomes obvious why using the ID selector is more readable:

$("#example_form [name='address']")


$("[name='example_form'] [name='address']")

Then we know that anything that comes below our id selector is a child of form element. And we can even retrieve all of those elements using the children() function as follows:


You can also retrieve any of the forms attributes name, ID, method etc. using the attribute function attr():


You can set/change these values using the same function by passing in a value as a second argument:

$("#example_form").attr("name", "form_new_name");
$("#example_form").attr("ID", "form_new_ID");
$("#example_form").attr("method", "post");

Or remove an attribute altogether:


To access any of our child elements we simply specify our forms ID selector, followed by a space and then the child selector:

$("#example_form select") // Retrieve all the select child elements

$("#example_form .label") // Retrieve all the child elements with the class label

$("#example_form :input") // Retrieve all the child elements that are inputs (input, textarea, select and button elements)

To perform an action on an element(s) we simply specify the selector as above and then the function:

$("#example_form select").remove() // Remove all the select elements from our form

$("#example_form select").hide() // Hide all the select elements on our form

$("#example_form select").show() // Show all the select elements on our form

To set or retrieve a value will vary on the type of element i.e. radio, select, text input

$("#example_form [name='text_input']").val() // Gets the value of a text input
$("#example_form [name='text_input']").val('new value') // Sets the value of a text input
$("#example_form [name='text_input']").val('')// Clears the value of a text input

$("#example_form [name='select_input']").val() // Get the option value of the selected element
$("#example_form [name='select_input']").val("1") // Sets the value of the select according to the option value
$("#example_form [name='select_input'] :selected").text() // Get the text of the selected element

$("#example_form [name='radio_input']").val() // Get the text of the checked radio
$("#example_form [name='radio_input'][value='some_value']").attr("checked", "checked") // Set a radio button to checked according to its value attribute

I will be releasing a series of tutorials over the coming days (weeks?) that will cover in detail form manipulation. In the mean time check out the jQuery API for further functionality.

If you found this post useful, here are part 2, part 3 and part 4 of this series.
blog comments powered by Disqus