"Relationship Form"
Bootstrap 3.3.0 Snippet by alefrost

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div id="relContainer0" class="relcontainer col-md-12">
<button type="button" onclick="relationshipDelete(0);return false;" class="redX pull-right relDelete">
<span class="glyphicon glyphicon-remove"></span>
</button>
<input type="hidden" id="relatedCharacterId0" name="related_to[0][related_character][id]" value="72">
<div class="checkbox clearfix">
<label>
<input type="checkbox" id="NameToggle0" data-toggle="related_to[0][related_character][name]" class="existingCharacter" checked="True">
<small>Existing Character</small></label>
</div>
<div class="relationshipFirstRow" style="overflow:auto; padding-top: 10px;" >
<select id="relationship0name" name="related_to[0][related_character][name]" class="arcPointSelect fieldTitle pull-left underlined" style="width:49%;" required="">
<option value="" selected hidden disabled>Character Name</option>
<option value="2nd Character" data-objectid="72" >2nd Character</option>
<option value="2nd Character" data-objectid="71">2nd Character</option>
<option value="2nd Character" data-objectid="70">2nd Character</option>
<option value="Test 3" data-objectid="69">Test 3</option>
<option value="1st Character" data-objectid="68">1st Character</option>
<option value="Test 3" data-objectid="67">Test 3</option>
<option value="1st Character" data-objectid="66">1st Character</option>
<option value="Test 3" data-objectid="65">Test 3</option>
<option value="Rel Test" data-objectid="64">Rel Test</option>
<option value="1st Character" data-objectid="63">1st Character</option>
<option value="Test 3" data-objectid="62">Test 3</option>
<option value="2nd Character" data-objectid="61">2nd Character</option>
<option value="1st Character" data-objectid="60">1st Character</option>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.fieldcontainer, .relcontainer {
border-style: solid;
padding: 10px;
}
ul.fieldItemList {
padding-left:20px;
margin-bottom:0px;
}
div.fieldItem:hover {
color:#d9534f;
}
div.fieldItem input:hover {
color:#333;
}
input:not([type=checkbox]):not([type=radio]) {
border-top: 0 solid;
border-right: 0 solid;
border-bottom: 1px solid;
border-left: 0 solid;
border-color: #999;
padding-left: 5px;
padding-right: 5px;
width: 94%;
}
textarea {
background-color: transparent;
border-top: 0 solid;
border-right: 0 solid;
border-bottom: 0 solid;
border-left: 2px solid;
border-color: #999;
padding-left: 6px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() {
$('.arcPointSelect').each(function(index) {
if ($(this).val() === null) {
$(this).css('color','#999')
}
});
$('.arcPointSelect').change(function() {
var current = $(this).val();
if (current != 'null') {
$(this).css('color','black');
} else {
$(this).css('color','gray');
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Bootstrap Wizard
login-form
Login Form
Contact Form

Questions / Comments: