<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.
No comments:
Post a Comment