Changing the Content of a Form Element

One of the biggest things that people need to be able to do in jQuery, is change the results of an element on the webpage. jQuery makes it easy for you to read, or write, the content of an element, whether it be form element or a non-form element.

Values of a Form Element

Most of the time, when you want to get or set a value, it will be from a form element. jQuery has a function, .val(), that is used to both read and write data from a form element, in most cases.

Reading a Value

In order to get a value out of an element, you set your selector, and just call val(). This will get the information out as a string, regardless as if it is text or a number.

var firstName = $('#firstName').val();
var age = $('#age').val();

Notice first that we are using IDs. Many times people will put a name on an attribute, but not put an ID, and that will cause their jQuery commands to not work. So be careful of that.

Because age, although it would be naturally a number, is pulled from a text box, it will be text. So you will need to convert it.

The nice thing is that val() works for select elements, input statements, and more.

Pulling from a radio set can be a bit more complicated. In this case, you need to check the checked attribute, so your selector is a little different.

var color = $( "input:radio[name=color]:checked" ).val();

In this example, you are selecting all inputs, then using pseudo selectors, you select the type (radio in this case), and then you have to look at the name attribute. This is the purpose of putting it in square brackets. Finally, again a pseudo selector to select the checked version.

This will then return the value of the selected element for that group of radio buttons.

Writing a Value

Writing a value is similar to reading. In fact, you use the selector, and the val() method. The main difference is that you will now pass a value as a parameter to that val method. Consider these examples:

$('#firstName').val("Bob");  // sets the value of the form element 
   //with an id of firstName to Bob.

var calculated = 50 - $('#myAge').val(); // set a value for later use
$('#age').val(calculated);  // sets the value based upon a variable

$('#fullName').val($('#firstName').val() + ' ' + '$('#lastName').val()); // set the
   // value based upon other values in the other two fields.

For radio buttons and check boxes, you will need to select the element, and then set the checked attribute using the attr() method. This would look like:

$('#color_blue').attr('checked', 'checked'); // set the checked attribute of a 
   // radio button or check box element

Select statements would need to find the index that they need to select. In that case, it is a little more difficult, but should be able to be done with some “fancy” jQuery selectors like:

$('#selectBox option').eq(3).prop('selected', true);
// or
// assuming a value "C" for an option exists
$('#selectBox option[value=C]').attr('selected', 'selected');

 

Duplicate Field Info

Or Watch on YouTube

Check Values While Typing

Or Watch on YouTube

Changing the Content of a Form Element was originally found on Access 2 Learn