Friday, April 17, 2015
There's actually two selector parameters in JQuery. The second parameter is the context parameter. The context parameter specify the context that the selector should operate within that context. Let's use the bootstrap form field markup below as an example:
Basically, we've created two duplicate forms with different ids. The form looks like this in the browser:
For this demo will get rid of the placeholders on the first form and leave the second form's placeholder values in place. We can accomplish this by specifying the search context for the selector using the form id attribute.
To get rid of the placeholders, type the following code inside the <script> tag
The code above selects the input form fields with he class "form-control" and then remove the attribute "placeholder" on the form fields. But because we passed in the id '#registration-form' in the second parameter the "placeholder" attribute is only removed from the first form leaving the second form as is because it is not within the context of the selection.
As you can see from the screen shot below the first firm's placeholder values are gone, however the second form field selector is still intact.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<title></title>
<style>
.form-label-spacing{
margin-top: 15px;
}
.form-group-spacing
{
margin-left: 20px;
}
</style>
</head>
<body>
<form>
<div class="row">
<div class="form-group form-group-spacing col-lg-4 col-md-4" id="registration-form">
<label for="firstName" class="form-label-spacing">First Name:</label>
<input class="form-control" type="text" id="firstName" placeholder="First Name">
<label for="firstName" class="form-label-spacing">Last Name:</label>
<input class="form-control" type="text" id="lastName" placeholder="Last Name">
<label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
<input class="form-control" type="email" id="E-Mail" placeholder="Email">
<label class="form-label-spacing" for="password">Password:</label>
<input name="Password" class="form-control" type="password" placeholder="Password">
<div class="form-group">
<label class="form-label-spacing" for="gender">Gender:</label>
<div class="radio">
<label><input type="radio" name="gender" id="gender">Male</label><br/>
<label><input type="radio" name="gender" id="gender">Female</label>
</div>
</div>
<button type="button" class="btn btn-default">Sign Up</button>
</div>
<div class="col-lg-8 col-md-8"/>
</div>
<div class="row">
<div class="form-group form-group-spacing col-lg-4 col-md-4" id="another-registration-form">
<label for="firstName" class="form-label-spacing">First Name:</label>
<input class="form-control" type="text" id="firstName" placeholder="First Name">
<label for="firstName" class="form-label-spacing">Last Name:</label>
<input class="form-control" type="text" id="lastName" placeholder="Last Name">
<label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
<input class="form-control" type="email" id="E-Mail" placeholder="Email">
<label class="form-label-spacing" for="password">Password:</label>
<input name="Password" class="form-control" type="password" placeholder="Password">
<div class="form-group">
<label class="form-label-spacing" for="gender">Gender:</label>
<div class="radio">
<label><input type="radio" name="gender" id="gender">Male</label><br/>
<label><input type="radio" name="gender" id="gender">Female</label>
</div>
</div>
<button type="button" class="btn btn-default">Sign Up</button>
</div>
<div class="col-lg-8 col-md-8"/>
</div>
</form>
</body>
</html>
Basically, we've created two duplicate forms with different ids. The form looks like this in the browser:
For this demo will get rid of the placeholders on the first form and leave the second form's placeholder values in place. We can accomplish this by specifying the search context for the selector using the form id attribute.
To get rid of the placeholders, type the following code inside the <script> tag
<script>
$(document).ready(function(){
$('input.form-control','#registration-form').removeAttr('placeholder');
});
</script>
The code above selects the input form fields with he class "form-control" and then remove the attribute "placeholder" on the form fields. But because we passed in the id '#registration-form' in the second parameter the "placeholder" attribute is only removed from the first form leaving the second form as is because it is not within the context of the selection.
As you can see from the screen shot below the first firm's placeholder values are gone, however the second form field selector is still intact.
Subscribe to:
Post Comments (Atom)
Thank you for the post. I will definitely comeback. Let make your life even better with game sims 4 cheats
ReplyDeleteThank you for the post. I will definitely comeback. Let make your life even better with game sims 4 cheats
ReplyDeleteGreat code, the author is handsome! It seemed to me that you have it too detailed and from this large in size, I think you can reduce it at least twice if you use pseudo-classes and identifiers, for example, I generally recommend watching a video on YouTube on how to shorten any code by almost five times and not cut it its functionality, unfortunately I don't remember the name of this video, but I do remember that it had about 17 thousand views! I am sure that the author of this video used services https://soclikes.com/ to buy views.
ReplyDeleteGreat code, the author is handsome! It seemed to me that you have it too detailed and from this large in size, I think you can reduce it at least twice if you use pseudo-classes and identifiers, for example, I generally recommend watching a video on YouTube on how to shorten any code by almost five times and not cut it its functionality, by the way, the author of this video is always use the services of https://viplikes.net/ to quickly increase the number of views.
ReplyDeleteRockfon Soffit is the ultimate solution for all basement car park soffits
ReplyDeleteMua vé máy bay tại Aivivu, tham khảo
ReplyDeletevé máy bay đi Mỹ hạng thương gia
đặt vé máy bay từ mỹ về việt nam
giá vé máy bay từ nhật bản về việt nam
chuyến bay từ đức về hà nội hôm nay
giá vé máy bay từ Vancouver về việt nam
ve may bay tu han quoc ve viet nam
chuyến bay chuyên gia
It is very nice BTW! But If you really want to write something good, you can ask this guys for help! They really know how to write essay www.personalstatementwriter.org and will help you with homework! Just write to them thesis help and be happy about it! Enjoy!
ReplyDelete