Skip to content

Instantly share code, notes, and snippets.

@jerrylee

jerrylee/gist:965c9ecb6f1a26ffca8e

Created November 19, 2015 22:49
Show Gist options
  • Save jerrylee/965c9ecb6f1a26ffca8e to your computer and use it in GitHub Desktop.
Save jerrylee/965c9ecb6f1a26ffca8e to your computer and use it in GitHub Desktop.
Download ZIP
Form functionality
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form>
<p id="stepOne">Are you a current client?
<select class="one form-control">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select></p>
<p id="stepTwo">Are you currently receiving disability?
<select class="two form-control">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</p>
<p id="stepThree">Are you currently working more then 10 hours per week?
<select class="three form-control">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</p>
<p id="stepFour">Are you unable to work a full time job because of your disability?
<select class="four form-control">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</p>
<p id="stepFive">
<input type="text" class="fName form-control" placeholder="first name"><br />
<input type="text" class="lName form-control" placeholder="last name"><br />
<input type="text" class="email form-control" placeholder="email"><br />
<input type="text" class="phone form-control" placeholder="phone"><br />
<textarea name="message" class="message form-control" cols="30" rows="10"></textarea>
</p>
</form>
</body>
</html>
$(document).ready(function($){
//$("#stepOne").hide();
$('#stepTwo').hide();
$('#stepThree').hide();
$('#stepFour').hide();
$('#stepFive').hide();
$(".one").change(function(){
if($(".one option:selected").val() == "Yes"){
$("#stepTwo").show();
} else {
$("#stepTwo").hide();
}
});
$(".two").change(function(){
if($(".two option:selected").val() == "Yes"){
$("#stepThree").show();
} else {
$("#stepThree").hide();
}
});
$(".three").change(function(){
if($(".three option:selected").val() == "Yes"){
$("#stepFour").show();
} else {
$("#stepFour").hide();
}
});
$(".four").change(function(){
if($(".four option:selected").val() == "Yes"){
$("#stepFive").show();
} else {
$("#stepFive").hide();
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment