"Drop Down Form Hide Field"
Bootstrap 3.1.0 Snippet by escapedlion

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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-lg-12">
<div class="page-header">
<h1 id="forms">Forms</h1>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="well bs-component">
<form class="form-horizontal">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="emailFrom" class="col-lg-2 control-label">From:</label>
<div class="col-lg-10">
<select class="form-control" id="emailFrom" name="emailFrom">
<option>Select Email Address</option>
<option value="Sergio Rodriguez|sergio.rodriguez@tix.com">Sergio Rodriguez (sergio.rodriguez@tix.com)</option>
<option value="Silvia Mahoney|silvia.mahoney@tix.com">Silvia Mahoney (sergio.rodriguez@tix.com)</option>
<option value="Steve Moore|steve.moore@tix.com">Steve Moore (sergio.rodriguez@tix.com)</option>
<option value="Luke Perria|luke.perria@tix.com">Adam Hettinger (sergio.rodriguez@tix.com)</option>
<option value="Luke Perria|luke.perria@tix.com">Luke Perea (sergio.rodriguez@tix.com)</option>
</select>
</div>
</div>
<div class="form-group">
<label for="emailTo" class="col-lg-2 control-label">To:</label>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
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
//Purpose: toggle the visibility of fields depending on the value of another field
$(document).ready(function ()
{
toggleFields();
//call this first so we start out with the correct visibility depending on the selected form values
//this will call our toggleFields function every time the selection value of our underAge field changes
$("#emailTo").change(function ()
{
toggleFields();
});
//Function: this toggles the visibility of the child field depending on the selected value of the parent
function toggleFields()
{
if ($("#emailTo").val() == 0)
$(".emailAlternate").show();
else
$(".emailAlternate").hide();
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: