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