Bootstrap Snippet ULSSI Form using HTML CSS Bootstrap jQuery

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 ---------->
<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" min="1">
            </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">Subject</label>
            <div class="col-sm-9">
                <select id="dd-subject" class="form-control">
                    <option>Please choose your enquiry</option>
                    <option value="adverse-events">Adverse Events</option>
                    <option value="product-packaging">Product of Packaging Complaint</option>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
.cform {
    max-width: 800px;
}
.cform__adverse,
.cform__productpackaging,
.cform__submit {
    display: none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function () {
  $("#dd-subject").change(function() {
    var subjValues = ["adverse-events", "product-packaging"];
    var val = $(this).val();
    
    
    if(val === "adverse-events") {
        $(".cform__adverse").fadeIn(500);
        $(".cform__submit").fadeIn(500);
        $(".cform__productpackaging").fadeOut(500);        
    }
    else if(val === "product-packaging") {
        $(".cform__productpackaging").fadeIn(500);
        $(".cform__submit").fadeIn(500);
        $(".cform__adverse").fadeOut(500);
    } 
    else {
        $(".cform__adverse").fadeOut(500);
        $(".cform__productpackaging").fadeOut(500);
        $(".cform__submit").fadeOut(500);
    }
  });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"ULSSI Form"
Bootstrap 3.3.0 Snippet by kvnsmng

Related: See More

Questions / Comments:

"ULSSI Form" Bootstrap 3.3.0 Snippet by kvnsmng

Related: See More

Questions / Comments:

"ULSSI Form"
Bootstrap 3.3.0 Snippet by kvnsmng