Tech Junkie Blog - Real World Tutorials, Happy Coding!: JQuery Basics : Selecting Attributes

Tuesday, April 14, 2015

JQuery Basics : Selecting Attributes

In the previous blog about selectors we've gone over what a selector is.  In this blog we will something that is a little more advance and use JQuery to select the attributes within a HTML element.  Most HTML elements have attributes associated with them for example the <input> element has the id, name, and type in them. So let's create a typical registration form input fields for this example and use JQuery to select the form fields according to what attributes the form fields have:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>JQuery Attributes Selector Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
  </script>
    </head>
    <body> 
  <form>
   User ID: <input name="UserId" type="text"><br/>
   First Name: <input name="First Name" type="text"><br/>
   Last Name: <input name="Last Name" type="text"><br/>
   E-Mail: <input name="E-Mail" type="text"><br/>
   Password: <input name="Password" type="password"><br/>
   Gender:
    <br/><input type="radio" name="gender" value="male" checked>Male<br/>
    <input type="radio" name="gender" value="female">Female<br/>
   
  </form>
    </body>
 </html>



So the markup up looks like this in the browser:















Now let's use some JQuery to select some attributes!  To make things interesting we will use JQuery to simulate a real user who is filling out a registration form.  Let's say the application assigns a user Id to new user.  We can use the following code to populate the UserId field with an Id with the following JQuery script:

 
$(document).ready(function(){
  $('input[name="UserId"]').val(1);
 });

The code above selects an input field with the name "UserId" and set the value of the element to 1.  The JQuery selector we use is tag[attribute name = "attribute value"] which is this line in the code
$('input[name="UserId"]').val(1);

This is how the page looks like now in the browser
















Now let's fill out the first name and last name field.  To fill out the first name and last name field we are going to do something a little different.  We are going to look for the attribute name value that starts with "First" and for the first name field, and we are going to look for the attribute name value that starts with "Last" for the last name.  We can add the following code to populate the "First Name" and "Last Name" field"

 $(document).ready(function(){
  $('input[name="UserId"]').val(1);
  $('input[name^="First"]').val("Jane");
  $('input[name^="Last"]').val("Doe");
 });

The code above uses the ^ symbol to tell JQuery to look for the input element that starts with the text that comes after the ^ symbol. So for example the selector $('input[name^="First"]') looks for input field that has the name that starts with the word "First" and the selector $('input[name^="Last"]') looks for input field that has the name that starts with the word "Last". The HTML page looks like the this after we added the last two lines.



















Now we will fill out the E-Mail field using an opposite selector from the previous example.  We are going to look for an input field that ends with the word "Mail".  Add the following code to the existing code.

 $(document).ready(function(){
  $('input[name="UserId"]').val(1);
  $('input[name^="First"]').val("Jane");
  $('input[name^="Last"]').val("Doe");
  $('input[name$="Mail"]').val("janedoe@doe.org");
 });

In the code that we've just added we use the $= selector symbol to look for the name attribute in the input element that ends with the word "Mail". $('input[name$="Mail"]').  The resulting form looks like this in the browser

















Now let's skip the password field and move to the Gender radio button fields.  Since Jane is a woman she wants to change the Gender field from a Male to a Female.  So she uses JQuery to change Gender selection from Male to Female.

So to select "Female" as the "Gender" type in the following code.
  <script>
 $(document).ready(function(){
  $('input[name="UserId"]').val(1);
  $('input[name^="First"]').val("Jane");
  $('input[name^="Last"]').val("Doe");
  $('input[name$="Mail"]').val("janedoe@doe.org");
  $( "input[name=gender]:radio" ).val('female').prop('checked',true);
 });
  </script>

The code above uses the :radio selector to select a radio input type with the name=gender with the value female.  Then use the .prop method to set the radio button with the female value to true.  The resulting form looks like this in the browser.



















Previous: JQuery Basics: Selectors
Next: JQuery: Search Context Parameter (Select Within A Container)

1 comment:

Subscribe to: Post Comments (Atom)

Search This Blog