When working with HTML Forms, it can in some situations improve the usability of the site, if the content of elements can change and reflect the options, that the visitor made in the previous fields.

The most common form element are input, checkbox, radio buttons, textarea and dropdown boxes and I will try to cover them all, even though the code might be the same or very much alike.

Input boxes

Fetching content is done with:

// fetching the value
$("#inputbox").val();

Try it:
Make a popup with the contents

Setting new content is done with:

// setting a new value
$("#inputbox").val("We have now changed the text");

Try it:
Change the content to “We have now changed the text”

Check boxes / Radio boxes

Both check boxes and radio boxes works the same way.

Checking all fields:

// loop through each checkfield
$("#elementID input:checkbox").each( function() {
  // set checked=checked
  $(this).attr("checked", "checked");
});

Try it:
Check all boxes

// loop through each checkfield
$("#elementID input:checkbox").each( function() {
  // if field is checked, then uncheck or the other way around
  this.checked ? $(this).attr("checked", "") : $(this).attr("checked", "checked");
});

Toggle boxes

Outputting the checked status for each field:

// temporary variable for output purposes
var status = "";
// loop through each fieldfield
$("#elementID input:checkbox").each( function() {
  // save field value and checkstate in variable
  status += $(this).val() + " is " + this.checked + ",  ";
});
// make a popup box with the result
alert(status);

Try it:
Output checkbox status

Textarea

Textarea sample text
Fetching content is done with:

// fetching the value
$("#textarea").html();

Try it:
Make a popup with the contents

Setting new content is done with:

// setting a new value
$("#textarea").html("We have now changed the text");

Try it:
Change the content to “We have now changed the text”

Dropdown boxes

Fetch the value if the dropdown box:

$("#selectbox").val()

Try it:
Output which option is selected

Selecting option 2 in the downdown box:

// loop through options
$("#selectbox option").each( function() {
  // if the value is equal to 'select2', then select it
  if ($(this).val() == "select2") {
    $(this).attr("selected", "selected");
  }
});

Try it:
Select option 2

Selecting option 3 in the downdown box:

// loop through options
$("#selectbox option").each( function() {
  // if the value is equal to 'select3', then select it
  if ($(this).val() == "select3") {
    $(this).attr("selected", "selected");
  }
});

Try it:
Select option 3

There you go. A small demonstration of how to access form elements. There above examples is just one way of doing it. There are other ways as well.