"ULSSI form new script"
Bootstrap 3.3.0 Snippet by kvnsmng

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<form class="form-horizontal cform" role="form">
<h2>Contact Information</h2>
<div class="form-group">
<label for="" class="col-sm-3 control-label">Full Name</label>
<div class="col-sm-4">
<input type="text" id="" placeholder="First Name" class="form-control" autofocus>
</div>
<div class="col-sm-4">
<input type="text" id="" placeholder="Last Name" class="form-control" autofocus>
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label for="" class="col-sm-3 control-label">Age</label>
<div class="col-sm-9">
<input type="number" id="" placeholder="ex: 23" class="form-control">
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label for="" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" id="" placeholder="ex: myname@example.com" class="form-control">
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label for="" class="col-sm-3 control-label">Phone</label>
<div class="col-sm-2">
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
.cform {
max-width: 800px;
}
.cform__adverse,
.cform__productpackaging,
.cform__submit {
display: none;
}
.cform input, .cform select, .cform textarea {
background-color: #eaf4ff;
border-color: #aab2cf;
}
.cform h2 {
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
}
.cform__subjects {
margin-top: 40px;
}
.cform .btn {
background-color: #00478c;
text-transform: uppercase;
font-weight: bold;
border-radius: 50px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function () {
$("#dd-subject").change(function() {
var subjValues = ["cform__adverse", "cform__productpackaging"];
var val = $(this).val();
var otherSubj = subjValues.filter(function(x) { return x !== val; });
for (var i = 0; i < subjValues.length; i++) {
if(val === subjValues[i]) {
$("." + val).fadeIn(500);
$(".cform__submit").fadeIn(500);
for (var i = 0; i < otherSubj.length; i++) {
$("." + otherSubj[i]).fadeOut(500);
}
} else {
$("." + subjValues[i]).fadeOut(500);
$(".cform__submit").fadeOut(500);
}
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard React
login-form
Login Form
Contact Form

Questions / Comments: