We Keep Coding

Boostrap form wizard messing'up with Javascript changes

I'm trying to change input disabled and enabled or on select via Javascript and is working but when I switch tabs the changes is messing up,not showing, I don't know why, after switch tabs my select input doesn't show my values anymore.
HTML FORM UPDATED:
<div class="choice sectiuni btn-next" data-toggle="wizard-checkbox" rel="tooltip" id="solo" title="Solo">
<input type="checkbox" id="solo" name="sectiuni" value="Solo">
<h6>Solo</h6>
</div>
<div class="choice sectiuni btn-next" data-toggle="wizard-checkbox" rel="tooltip" id="duo" title="Duo/Trio/Quartet">
<input type="checkbox" id="duo" name="sectiuni" value="Duo/Trio/Quartet">
<div class="icon">
<img style="width: 48px;" src="assets/img/icons/duotrio.svg" />
</div>
<h6>Duo/Trio/Quartet</h6>
</div>
<div class="choice sectiuni btn-next" data-toggle="wizard-checkbox" rel="tooltip" id="grupuri" title="Grupuri 5-12 dansatori">
<input type="checkbox" id="grupuri" name="sectiuni" value="Grupuri">
<div class="icon">
<img style="width: 48px;" src="assets/img/icons/grupuri.png" />
</div>
<h6>Groups</h6>
</div>
<div class="choice sectiuni btn-next" data-toggle="wizard-checkbox" rel="tooltip" id="formatii" title="Formaţii peste 13 dansatori.">
<input type="checkbox" id="formatii" name="sectiuni" value="Formatii">
<div class="icon">
<img style="width: 48px;" src="assets/img/icons/formatii.png" />
</div>
<h6>Formations</h6>
</div>
<div class="form-group">
<select required name="category" class="form-control">
<option id="alege" value="">Category</option>
<option id="baby" value="4-6 ani - BABY">4-6 ani - BABY</option>
<option id="mini" value="7-9 ani - MINI">7-9 ani - MINI</option>
<option id="copii" value="10-12 ani - COPII">10-12 ani - COPII</option>
<option id="juniori" value="13-15 ani - JUNIORI">13-15 ani - JUNIORI</option>
<option id="seniori" value="+ 16 ANI - SENIORI">+ 16 ani - SENIORI</option>
<option id="solo7" value="7 ani">Solo 7 ani</option>
<option id="solo8" value="8 ani">Solo 8 ani</option>
<option id="solo9" value="9 ani">Solo 9 ani</option>
<option id="solo10" value="10 ani">Solo 10 ani</option>
<option id="solo11" value="11 ani">Solo 11 ani</option>
<option id="solo12" value="12 ani">Solo 12 ani</option>
</select>
</div>
<input required type="text" name="numecoregrafie" class="form-control" placeholder="Nume Coregrafie (*)">
<input required type="text" disabled name="numeformatie" id="numeformatie" class="form-control" placeholder="Nume Formatie (*)">
<input required type="text" name="coregraf" class="form-control" placeholder="Coregraf / Instructor (*)">
<input data-role="tagsinput" class="tagsinput" required type="text" name="dansator1" class="form-control" placeholder="dancer1,2,3">
<input required type="text" name="nrdansatori" class="form-control" placeholder="Numar Dansatori (*)">
JAVASCRIPT Code:
I think the problem is on JS code for the changes, but I don't have a clue why if I switch back a tab if I forgot something to complete the form is messing up.
$('document').ready(function(){
$('#solo').on('click', function () {
$('#baby,#mini,#copii,#juniori,#seniori').attr('style','display:none;');
});
$('#duo').on('click', function () {
$('#solo7,#solo8,#solo9,#solo10,#solo11,#solo12').attr('style','display:none;');
$("input[type='text'][name='numeformatie']").removeAttr('disabled');
});
$('#grupuri').on('click', function () {
$('#solo7,#solo8,#solo9,#solo10,#solo11,#solo12').attr('style','display:none;');
$("input[type='text'][name='numeformatie']").removeAttr('disabled');
$("input[type='text'][name='dansator1']").prop('disabled', true);
});
$('#formatii').on('click', function () {
$('#solo7,#solo8,#solo9,#solo10,#solo11,#solo12').attr('style','display:none;');
$("input[type='text'][name='numeformatie']").removeAttr('disabled');
$("input[type='text'][name='dansator1']").prop('disabled', true);
});
});

Generate input box based on dropdown selection

I want to be able to make a selection from the dropdown list then have it generate a input box dynamically with an appropriate label above it. Example:
if i select school from dropdown:
<label>Enter School name:</label>
<input name="name">
if i select individual from dropdown:
<label>Enter Individual name:</label>
<input name="firstName">
<input name="lastName">
$('#elementreg').change(function() {
$('#input-holder').empty();
if ($(this).val() == "individual") {
$('#input-holder').append('<input type="text" name="input" value="test" >');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-holder"></div>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>

Your code works, but why not show/hide? It is much faster than manipulating the DOM each time
$("#elementreg").on("change", function() {
var val = $(this).val();
$(".types").hide().find('input:text').val(''); // hide and empty
if (val) $("#" + val).show();
});
.types {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>
<div class="types" id="individual">
<label>Enter Individual name:</label>
<input name="firstName">
<input name="lastName">
</div>
<div class="types" id="school">
<input .... />
</div>
Your version:
$("#elementreg").on("change", function() {
var val = $(this).val(), $div = $("#input-holder"),fields=" ";
switch (val) {
case "individual":
fields='<label>Your name: </label><input type="text" /><input type="text"/>';
break;
case "school":
fields='<label>School: </label><input type="text" />';
break;
}
$div.html(fields);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-holder"> </div>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>

JSP form not submitting on button click

Hello I am new to JSP Programming. I have been given a task where I create a personal loan application form. When a user enters all the details in the form and hits submit the form gets stored in the database. I have created the form and all the required JSP pages and connectivity statements. My problem is that when I give values and click on submit nothing happens. It is staying in the same page. I don't know where the problem is. Please help me out. Thanks in advance.
Application form.jsp
<%# page language="java" import="java.util.Random"%>
<%!
public int generateRandomNumber(int start, int end ){
Random random = new Random();
long fraction = (long) ((end - start + 1 ) * random.nextDouble());
return ((int)(fraction + start));
}
%>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function changeContents(){
var dropDown = document.getElementById("employmenttype");
var showDetails = document.getElementById("salariedType");
showDetails.style.display = dropDown.value == "salaried" ? "block" : "none";
var elements = document.getElementById("employmenttype");
var businessDetails = document.getElementById("selfEmployedType");
businessDetails.style.display = elements.value == "self_employed_business" ? "block" : "none";
}
</script>
<title>Bank</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Welcome to Bank</h1>
<p></p>
</div>
<form action="personalloanhandler.jsp" method="POST">
<div class="row">
<div class="col-md-3">
Your Application ID: <input type="text" name="app_id" value="<%=generateRandomNumber(10000,99999)%>" />
</div>
<div class="col-md-6">
</div>
<div class="col-md-5">
Full Name:*
<input class="form-control" name="fullname" type="text" />
<br><br>
Mobile No.:*
<input name="mobilenumber" class="form-control" type="text" pattern="[7-9]{1}[0-9]{9}" title="ex:9870367035"required />
<br><br>
Email_ID:*<input name="email" class="form-control" type="email" title="ex:hari21#gmail.com" required />
<br><br>
Pancard NO:*<input name="pan" class="form-control" type="text" pattern="[A-Za-z]{5}\d{4}[A-Za-z]{1}" title="ex:AIAPY3476G" required />
<br><br>
Gender: <input class="form-control"
name="gender" type="radio">Male
<input class="form-control"name="gender" type="radio">Female
<br><br>
Date OF Birth (DD/MM/YYYY):<input class="form-control" type="date" name="seldob" required>
<br><br>
Age*<input class="form-control"name="age" type="text" required />
<br><br>
Address* <textarea class="form-control" name="address" rows="2" cols="20" required>
</textarea>
<br><br>
City*<input class="form-control" name="city" id="focusedInput" type="text" required />
<br><br>
State*
<select name="state" onchange ="showText(this.value)">
<option value="">Select</option>
<option value='Andamans and Nicobar' >Andamans and Nicobar</option><option value='Andhra Pradesh' >Andhra Pradesh</option><option value='Arunachal Pradesh' >Arunachal Pradesh</option><option value='Assam' >Assam</option><option value='Bihar' >Bihar</option><option value='Chandigarh (UT)' >Chandigarh (UT)</option><option value='Chhattisgarh' >Chhattisgarh</option><option value='Dadra and Nagar Haveli' >Dadra and Nagar Haveli</option><option value='Daman Dui' >Daman Dui</option><option value='Delhi' >Delhi</option><option value='Goa' >Goa</option><option value='Gujarat' >Gujarat</option><option value='Habra' >Habra</option><option value='Haryana' >Haryana</option><option value='Himachal Pradesh' >Himachal Pradesh</option><option value='Jammu and Kashmir' >Jammu and Kashmir</option><option value='Jharkhand' >Jharkhand</option><option value='Karnataka' >Karnataka</option><option value='Kerala' >Kerala</option><option value='Madhya Pradesh' >Madhya Pradesh</option><option value='Maharashtra' >Maharashtra</option><option value='Manipur' >Manipur</option><option value='Meghalaya' >Meghalaya</option><option value='Mizoram' >Mizoram</option><option value='Nagaland' >Nagaland</option><option value='Odisha' >Odisha</option><option value='Puducherry' >Puducherry</option><option value='Punjab' >Punjab</option><option value='Rajasthan' >Rajasthan</option><option value='Sikkim' >Sikkim</option><option value='Tamil Nadu' >Tamil Nadu</option><option value='Telangana' >Telangana</option><option value='Tripura' >Tripura</option><option value='Uae' >Uae</option><option value='Uttar Pradesh' >Uttar Pradesh</option><option value='Uttarakhand' >Uttarakhand</option><option value='West Bengal' >West Bengal</option>
</select>
Pincode* <input class="form-control" id="focusedInput" type="text" required />
<br><br>
Type of employment*
<select name="employmenttype" id="employmenttype"
class="employer-info" onchange="changeContents()">
<option value="">Select</option>
<option value="salaried" id="salaried" >Salaried</option>
<option value="self_employed_business" id="self_employed_business">Self Employed business</option>
</select><br/></div>
<div id="salariedType" class="employer-info" style="display:none;">
<br/>Retirement age:*<input class="employer-info" name="retirementage"
id="focusedInput" type="text" required />
<br><br>
Date of joining:*<input class="employer-info" name="doj"
id="focusedInput" type="text" required />
<br><br>
Experience:<select class="form-control" name="workexperience">
<option value="select">Select</option>
<option value="0"> <1 </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">>10</option>
</select>
<br><br>
</div>
<br><br>
<div id = "self_employed_business" style="display:none">
TIN no:*<input class="form-control" name="tin" id="focusedInput" type="text" required /><br/>
<br><br>
Net profit (annually):*<input class="form-control" name="profit" id="focusedInput" type="text" required /><br/><br/>
</div>
<div class="form-control" id="salariedType1" style="display:none;">
<br/>Employer name:*
<select name="employer_name" id="focusedInput"
class="employer-info">
<option value="">Select</option>
<option value="IBM" >IBM</option>
<option value="Fujitsu" >Fujitsu</option>
<option value="CSC" >CSC</option>
<option value="Accenture" >Accenture</option>
<option value="Northrop Grumman" >Northrop Grumman</option>
<option value="Hitachi" >Hitachi</option>
<option value="Capgemini" >Capgemini</option>
<option value="NTT Data Corporation" >NTT Data Corporation</option>
<option value="NEC" >NEC</option>
<option value="Ericsson" >Ericsson</option>
<option value="BT Global Services" >BT Global Services</option>
<option value="Atos Origin" >Atos Origin</option>
<option value="T-Systems" >T-Systems</option>
<option value="Siemens" >Siemens</option>
<option value="Lockheed Martin" >Lockheed Martin</option>
<option value="Nokia Siemens Networks" >Nokia Siemens Networks</option>
<option value="SAIC" >SAIC</option>
<option value="Microsoft" >Microsoft</option>
<option value="ACS" >ACS</option>
<option value="Huawei" >Huawei</option>
<option value="Dell" >Dell</option>
<option value="Logica" >Logica</option>
<option value="General Dynamics" >General Dynamics</option>
<option value="Alcatel-Lucent" >Alcatel-Lucent</option>
<option value="Self Employed Professional">Self Employed
Professional</option>
</select><br/><br/>
</div>
Monthly Income<input class="form-control" id="focusedInput" type="text" name="monthly_income" required />
<br><br>
Reason for loan:*
<select class="form-control" name="reason_for_loan">
<option value="select">Select</option>
<option value="newcar">Car</option>
<option value="marriage">Marriage</option>
<option value="Other">Other</option>
</select>
<br><br>
Total years of work experience:*
<select class="form-control" name="experience">
<option value="select">Select</option>
<option value="0"> <1 </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">>10</option>
</select>
<br><br>
Tenure:*<input name="loan_tenure" type="text" class="form-control"required />
<br><br>
Loan Amount:*<input type="text" name="loan_amt" class="form-control" required />
<br/><br/>
ROI:10.5<input name="emi" type="text" value=10.5 class="form-control" disabled>
<br><br>
EMI:* <input name="emi" type="text" class="form-control" required />
<br><br>
Guarantor Name:*<input name="guarantorname" type="text" class="form-control" required />
<br><br>
Guarantor's Annual income(Rs):*<input name="guarantor_address" class="form-control" type="text"required />
<br><br>
Guarantor's Phone number:*<input name="guarantor_contact" class="form-control" type="text"required />
<br><br>
Existing customer:* <input class="form-control" name="cust_gender" type="radio" value="yes">Yes
<input class="form-control" name="cust_gender" type="radio">No<br/>
<br><br>
<input class="form-control" type="checkbox"required /> I agree with terms & conditions:*
<br><br>
Savings account number:*<input class="form-control" name="acc_no" type="text"required >
<br><br>
<input type="submit" value="Submit" name="personalloanhandler" />
</div>
</form>
</div>
<script>
$(document).ready(function() {
$("#divLoanApplicationForm").hide();
$("#salariedType").hide();
$("#selfEmployedType").hide();
});
$("#salaried").click(function(e){
$("#divLoanApplicationForm").hide();
$("#salariedType").show();
$("#selfEmployedType").hide();
});
$("#self_employed_business").click(function(e){
$("#divLoanApplicationForm").show();
$("#salariedType").hide();
$("#selfEmployedType").show();
});
/*$("#employmenttype").ready(function(e) {
var value=$("#employmenttype").val();
$("#divLoanApplicationForm").show();
if(value=="SALARIED")
{
$("#selfEmployedType").hide();
$("#salariedType").show();
}
if(value=="SELF_EMPLOYED_BUSINESS")
{
$("#selfEmployedType").show();
$("#salariedType").hide();
}
});*/
</script>
</body>
</html>
The Jsp Page(personalloanhandler.jsp):
<%# page language="java" import="java.sql.*"%>
<%
String appid = request.getParameter("app_id");
String mobileNumber = request.getParameter("mobilenumber");
String emailId = request.getParameter("email");
String pancardNumber = request.getParameter("pan");
String applicantGender = request.getParameter("gender");
String dateofBirth = request.getParameter("seldob");
String applicantAddress = request.getParameter("address");
String cityofResidence = request.getParameter("city");
String stateofResidence = request.getParameter("state");
String typeofEmployment = request.getParameter("employmenttype");
String retirementAge = request.getParameter("retirementage");
int retiringAge = Integer.parseInt(retirementAge);
String dateofJoining = request.getParameter("doj");
String workExperience = request.getParameter("workexperience");
int experienceinWork = Integer.parseInt(workExperience);
String tinNo = request.getParameter("tin");
int tin = Integer.parseInt(tinNo);
String netProfit = request.getParameter("profit");
int profit = Integer.parseInt(netProfit);
String employeeName = request.getParameter("employer_name");
String monthlyIncome = request.getParameter("monthly_income");
int monthIncome = Integer.parseInt(monthlyIncome);
String reasonforLoan = request.getParameter("reason_for_loan");
String totalworkExpreience = request.getParameter("experience");
int workExperienceTotal = Integer.parseInt(totalworkExpreience);
String loanTenure = request.getParameter("loan_tenure");
int tenure = Integer.parseInt(loanTenure);
String loanAmount = request.getParameter("loan_amt");
int loanAmt = Integer.parseInt(loanAmount);
String guarantorName = request.getParameter("guarantorname");
String guarantorAddress = request.getParameter("guarantor_address");
String guarantorContact = request.getParameter("guarantor_contact");
int guarantorNo = Integer.parseInt(guarantorContact);
String emiAmount = request.getParameter("emi");
int emiAmt = Integer.parseInt(emiAmount);
String savingsaccntNumber = request.getParameter("acc_no");
int accNo = Integer.parseInt(savingsaccntNumber);
String applicantName = request.getParameter("fullname");
try{
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:#localhost:1521:xe","hr","themoonwalker");
PreparedStatement prepare = conn.prepareStatement("INSERT INTO BOI_Personal_loan_app-form values(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)");
prepare.setString(1,appid);
prepare.setString(2,mobileNumber);
prepare.setString(3,emailId );
prepare.setString(4,pancardNumber );
prepare.setString(5,applicantGender);
prepare.setString(6,dateofBirth );
prepare.setString(7,applicantAddress);
prepare.setString(8,cityofResidence);
prepare.setString(9,stateofResidence);
prepare.setString(10,typeofEmployment);
prepare.setInt(11,retiringAge);
prepare.setString(12,dateofJoining);
prepare.setInt(13,experienceinWork);
prepare.setInt(14,tin);
prepare.setInt(15,profit);
prepare.setString(16,employeeName);
prepare.setInt(17,monthIncome);
prepare.setString(18,reasonforLoan);
prepare.setInt(19,workExperienceTotal);
prepare.setInt(20,tenure);
prepare.setInt(21,loanAmt);
prepare.setString(22,guarantorName);
prepare.setString(23,guarantorAddress );
prepare.setInt(24,guarantorNo );
prepare.setInt(25,emiAmt );
prepare.setInt(26,accNo);
prepare.setString(27,applicantName );
int i = prepare.executeUpdate();
if (i > 0){
out.println("Success");
}
}catch(Exception e){
System.out.println("Sorry couldn't process the request. Please try again");
}
out.close();
%>
I have included the necessary jar files and everything in the project. Please help

tin and profit inputs are required but not visible, so you can't submit the form
<div id = "self_employed_business" style="display:none">
TIN no:*<input class="form-control" name="tin" id="focusedInput" type="text" required /><br/>
<br><br>
Net profit (annually):*<input class="form-control" name="profit" id="focusedInput" type="text" required /><br/><br/>
</div>

Text area not being rendered

I made a website that takes what you put into the text area and displays it to another text area below.
So what you do is once you go to the site you type in the text area. Once you are satisfied you need to tab out of the text box. Once you are tabbed out you should see the text you entered at the bottom of the site. Once it is in the rendered section you should be able to modify it by using javscript. You can change the color, font size etc with sliders. The site looks correct and seems to be fine but my text wont render. I think I am missing something in my html because I know the java-script is all correct. I think I may have a spelling error or something I am not catching. The html needs to match the javascript and I am too close to this see an error. All help is welcome, thanks!
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 6
Case Problem 3
WidgetMage
Author: James DuBois
Date: 4/14/2015
Filename: cssDemo.htm
Supporting files: back.png, cssForms.css, modernizr-1.5.js,
rundemo.js, wm.css, wmlogo.png
-->
<meta charset="UTF-8" />
<title>CSS Styles Demo</title>
<script src="modernizr-1.5.js"></script>
<script type="text/javascript"src="rundemo.js"></script>
<link href="wm.css" rel="stylesheet" type="text/css" />
<link href="cssforms.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="wmlogo.png" alt="WidgetMage" />
<nav class="horizontal">
<ul>
<li>Home</li>
<li>Tutorials</li>
<li>Widgets</li>
<li>Forums</li>
<li>Demos</li>
</ul>
</nav>
</header>
<nav class="vertical">
<ul>
<li class="newgroup">Home</li>
<li class="newgroup">Animations</li>
<li>Buttons</li>
<li>Calendars</li>
<li>Cookies</li>
<li>Drag & Drop</li>
<li>Image Tools</li>
<li>Icons</li>
<li>Layout Tools</li>
<li>List Boxes</li>
<li>Menus</li>
<li>Popups</li>
<li>Ribbons</li>
<li>Sliders</li>
<li>Spinners</li>
<li>Toolbars</li>
<li>Tooltips</li>
<li>Tree Views</li>
<li class="newgroup">Tutorials</li>
<li>Tips & Tricks</li>
<li>White Papers</li>
<li>User Forums</li>
<li>External Links</li>
<li class="newgroup">Demonstrations</li>
<li class="newgroup">Contact Us</li>
</ul>
</nav>
<section>
<h1>CSS Demo</h1>
<p>Select the CSS style values from the form below and preview the
effect on the sample text in the preview box.
</p>
<form>
<fieldset id="textstring">
<label>Enter your sample text below</label>
<textarea autofocus tabindex="1" wrap="hard" name="sampletext" id="sampletext">
</textarea>
</fieldset>
<fieldset id="fonts">
<legend>
Fonts
</legend>
<label for="fontfamily">Font Family</label>
<select id="fontfamily" name="fontfamily">
<optgroup label="generic">
<option value="default">default</option>
<option value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
<option value="monospace">monospace</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
</optgroup>
<optgroup label="specific">
<option value="Arial">Arial</option>
<option value="'Book Antiqua'">'Book Antiqua'</option>
<option value="'Courier New'">'Courier New'</option>
<option value="Geneva">Geneva</option>
<option value="Helvetica">Helvetica</option>
<option value="Impact">Impact</option>
<option value="Palatino">Palatino</option>
<option value="'Times New Roman'">'Times New Roman'</option>
</optgroup>
</select>
<label for="fontstyle">Font Style</label>
<select id="fontstyle" name="fontstyle">
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
<label for="fontweight">Font Weight</label>
<select id="fontweight" name="fontweight">
<option value="normal">normal</option>
<option value="bold">bold</option>
</select>
<label for="textdecoration">Text Decoration</label>
<select id="textdecoration" name="textdecoration">
<option value="none">none</option>
<option value="line-through">line-through</option>
<option value="overline">overline</option>
<option value="underline">underline</option>
</select>
<label for="texttransform">Text Transform</label>
<select id="texttransform" name="texttransform">
<option value="none">none</option>
<option value="capitalize">capitalize</option>
<option value="lowercase">lowercase</option>
<option value="uppercase">uppercase</option>
</select>
<label for="fontvariant">Font Variant</label>
<select id="fontvariant" name="fontvariant">
<option value="normal">normal</option>
<option value="small-caps">small-caps</option>
</select>
</fieldset>
<fieldset id="colors">
<legend>
Colors
</legend>
<label for="color">Font Color (hexadecimal)</label>
<input type="color" value="#000000" placeholder="#rrggbb" name="fontcolor" id="fontcolor">
<label for="color">Background Color (hexadecimal)</label>
<input type="color" value="#FFFFF" placeholder="#rrggbb" name="backgroundcolor" id="backgroundcolor">
</fieldset>
<fieldset id="sizes">
<legend>
Sizes
</legend>
<label>Font Size (px)</label>
<input type="range" value="14" min="8" max="40" step="1" name="fontsize" id="fontsize">
<label>Letter Spacing (px)</label>
<input type="range" value="0" min="0" max="10" step="1" name="letterspacing" id="letterspacing">
<label>Word Spacing (px)</label>
<input type="range" value="14" min="8" max="40" step="1" name="wordspacing" id="wordspacing">
<label>Line Height (em)</label>
<input type="range" value="1" min="0" max="4" step="0.2" name="lineheight" id="lineheight">
<label>Text Indent (px)</label>
<input type="range" value="0" min="0" max="10" step="1" name="textindent" id="textindent">
</fieldset>
<button type="button" id="removestyles">Remove Styles</button>
</form>
<h2>Rendered Text</h2>
<div id="output"></div>
</section>
</body>
</html>
JAVASCRIPT
/*
New Perspectives on HTML and CSS
Tutorial 6
Case Problem 3
Author: Anna Lopez
Date: 3/1/2014
Filename: rundemo.js
Purpose: The purpose of this program is to update the
appearance of the rendered text based on the styles
selected by the user from the form.
*/
function updatePreview() {
formStyles=document.forms[0];
inputtext=formStyles.sampletext.value;
previewobject=document.getElementById("output");
previewobject.innerHTML=inputtext.replace(/\n/g,"<br />");
ffi=formStyles.fontfamily.selectedIndex;
previewobject.style.fontFamily=formStyles.fontfamily.options[ffi].text;
fsi=formStyles.fontstyle.selectedIndex;
previewobject.style.fontStyle=formStyles.fontstyle.options[fsi].text;
fwi=formStyles.fontweight.selectedIndex;
previewobject.style.fontWeight=formStyles.fontweight.options[fwi].text;
tdi=formStyles.textdecoration.selectedIndex;
previewobject.style.textDecoration=formStyles.textdecoration.options[tdi].text;
tti=formStyles.texttransform.selectedIndex;
previewobject.style.textTransform=formStyles.texttransform.options[tti].text;
fvi=formStyles.fontvariant.selectedIndex;
previewobject.style.fontVariant=formStyles.fontvariant.options[fvi].text;
previewobject.style.color=formStyles.color.value;
previewobject.style.backgroundColor=formStyles.backgroundcolor.value;
previewobject.style.fontSize=formStyles.fontsize.value + "px";
previewobject.style.letterSpacing=formStyles.letterspacing.value+"px";
previewobject.style.wordSpacing=formStyles.wordspacing.value+"px";
previewobject.style.lineHeight=formStyles.lineheight.value+"em";
previewobject.style.textIndent=formStyles.textindent.value+"px";
}
window.onload=function() {
formStyles=document.forms[0];
formStyles.fontfamily.onchange=updatePreview;
formStyles.fontstyle.onchange=updatePreview;
formStyles.fontweight.onchange=updatePreview;
formStyles.textdecoration.onchange=updatePreview;
formStyles.texttransform.onchange=updatePreview;
formStyles.fontvariant.onchange=updatePreview;
formStyles.color.onchange=updatePreview;
formStyles.backgroundcolor.onchange=updatePreview;
formStyles.fontsize.onchange=updatePreview;
formStyles.letterspacing.onchange=updatePreview;
formStyles.wordspacing.onchange=updatePreview;
formStyles.lineheight.onchange=updatePreview;
formStyles.textindent.onchange=updatePreview;
formStyles.textstring.onchange=updatePreview;
document.getElementById("removestyles").onclick = redo;
}
function redo() {
window.location.reload();
}

The console tells you where your problem is:
Uncaught TypeError: Cannot set property 'onchange' of undefined
on line:
formStyles.color.onchange=updatePreview;
change to:
formStyles.fontcolor.onchange=updatePreview;
then we get:
Uncaught TypeError: Cannot read property 'value' of undefined
on line:
previewobject.style.color=formStyles.color.value;
change to:
previewobject.style.color=formStyles.fontcolor.value;
function updatePreview() {
formStyles=document.forms[0];
inputtext=formStyles.sampletext.value;
previewobject=document.getElementById("output");
previewobject.innerHTML=inputtext.replace(/\n/g,"<br />");
ffi=formStyles.fontfamily.selectedIndex;
previewobject.style.fontFamily=formStyles.fontfamily.options[ffi].text;
fsi=formStyles.fontstyle.selectedIndex;
previewobject.style.fontStyle=formStyles.fontstyle.options[fsi].text;
fwi=formStyles.fontweight.selectedIndex;
previewobject.style.fontWeight=formStyles.fontweight.options[fwi].text;
tdi=formStyles.textdecoration.selectedIndex;
previewobject.style.textDecoration=formStyles.textdecoration.options[tdi].text;
tti=formStyles.texttransform.selectedIndex;
previewobject.style.textTransform=formStyles.texttransform.options[tti].text;
fvi=formStyles.fontvariant.selectedIndex;
previewobject.style.fontVariant=formStyles.fontvariant.options[fvi].text;
previewobject.style.color=formStyles.fontcolor.value;
previewobject.style.backgroundColor=formStyles.backgroundcolor.value;
previewobject.style.fontSize=formStyles.fontsize.value + "px";
previewobject.style.letterSpacing=formStyles.letterspacing.value+"px";
previewobject.style.wordSpacing=formStyles.wordspacing.value+"px";
previewobject.style.lineHeight=formStyles.lineheight.value+"em";
previewobject.style.textIndent=formStyles.textindent.value+"px";
}
window.onload=function() {
formStyles=document.forms[0];
formStyles.fontfamily.onchange=updatePreview;
formStyles.fontstyle.onchange=updatePreview;
formStyles.fontweight.onchange=updatePreview;
formStyles.textdecoration.onchange=updatePreview;
formStyles.texttransform.onchange=updatePreview;
formStyles.fontvariant.onchange=updatePreview;
formStyles.fontcolor.onchange=updatePreview;
formStyles.backgroundcolor.onchange=updatePreview;
formStyles.fontsize.onchange=updatePreview;
formStyles.letterspacing.onchange=updatePreview;
formStyles.wordspacing.onchange=updatePreview;
formStyles.lineheight.onchange=updatePreview;
formStyles.textindent.onchange=updatePreview;
formStyles.textstring.onchange=updatePreview;
document.getElementById("removestyles").onclick = redo;
}
function redo() {
window.location.reload();
}
<body>
<section>
<h1>CSS Demo</h1>
<p>Select the CSS style values from the form below and preview the
effect on the sample text in the preview box.
</p>
<form>
<fieldset id="textstring">
<label>Enter your sample text below</label>
<textarea autofocus tabindex="1" wrap="hard" name="sampletext" id="sampletext">
</textarea>
</fieldset>
<fieldset id="fonts">
<legend>
Fonts
</legend>
<label for="fontfamily">Font Family</label>
<select id="fontfamily" name="fontfamily">
<optgroup label="generic">
<option value="default">default</option>
<option value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
<option value="monospace">monospace</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
</optgroup>
<optgroup label="specific">
<option value="Arial">Arial</option>
<option value="'Book Antiqua'">'Book Antiqua'</option>
<option value="'Courier New'">'Courier New'</option>
<option value="Geneva">Geneva</option>
<option value="Helvetica">Helvetica</option>
<option value="Impact">Impact</option>
<option value="Palatino">Palatino</option>
<option value="'Times New Roman'">'Times New Roman'</option>
</optgroup>
</select>
<label for="fontstyle">Font Style</label>
<select id="fontstyle" name="fontstyle">
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
<label for="fontweight">Font Weight</label>
<select id="fontweight" name="fontweight">
<option value="normal">normal</option>
<option value="bold">bold</option>
</select>
<label for="textdecoration">Text Decoration</label>
<select id="textdecoration" name="textdecoration">
<option value="none">none</option>
<option value="line-through">line-through</option>
<option value="overline">overline</option>
<option value="underline">underline</option>
</select>
<label for="texttransform">Text Transform</label>
<select id="texttransform" name="texttransform">
<option value="none">none</option>
<option value="capitalize">capitalize</option>
<option value="lowercase">lowercase</option>
<option value="uppercase">uppercase</option>
</select>
<label for="fontvariant">Font Variant</label>
<select id="fontvariant" name="fontvariant">
<option value="normal">normal</option>
<option value="small-caps">small-caps</option>
</select>
</fieldset>
<fieldset id="colors">
<legend>
Colors
</legend>
<label for="color">Font Color (hexadecimal)</label>
<input type="color" value="#000000" placeholder="#rrggbb" name="fontcolor" id="fontcolor">
<label for="color">Background Color (hexadecimal)</label>
<input type="color" value="#FFFFF" placeholder="#rrggbb" name="backgroundcolor" id="backgroundcolor">
</fieldset>
<fieldset id="sizes">
<legend>
Sizes
</legend>
<label>Font Size (px)</label>
<input type="range" value="14" min="8" max="40" step="1" name="fontsize" id="fontsize">
<label>Letter Spacing (px)</label>
<input type="range" value="0" min="0" max="10" step="1" name="letterspacing" id="letterspacing">
<label>Word Spacing (px)</label>
<input type="range" value="14" min="8" max="40" step="1" name="wordspacing" id="wordspacing">
<label>Line Height (em)</label>
<input type="range" value="1" min="0" max="4" step="0.2" name="lineheight" id="lineheight">
<label>Text Indent (px)</label>
<input type="range" value="0" min="0" max="10" step="1" name="textindent" id="textindent">
</fieldset>
<button type="button" id="removestyles">Remove Styles</button>
</form>
<h2>Rendered Text</h2>
<div id="output"></div>
</section>
</body>
</html>

Just to add to DTing's answer, to help you check bugs like these, you could hit F12 and reload your page. Check for errors in the Console tab, in this case:
Uncaught TypeError: Cannot set property 'onchange' of undefined
You could also check the Source tab, that would give you a hint on where the error is.
*No rep to comment

jQuery select to make HTML DIV visable

The HTML:
<select name="reports" id="sr">
<option value="">Select Report...</option>
<option value="avg" class="1">Average Sold</option>
<option value="mma" class="1">Min|Max|Avg Sold</option>
<option value="oh" class="2">On Hand Qty</option>
<option value="mr" class="2">Money Report</option>
</select>
<div id='1' class='box box-primary'>
<p>Start Date: <input type="text" id="datepicker" name="startdate" ></p>
<p>End Date: <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/>
</div>
The jQuery:
$(document).ready(function () {
$('#1').hide();
$('#sr').change(function () {
$('#'+$(this).val()).show();
});
});
I am trying to get this to function where when the avg or min, max, avg reports are selected in the select box, the DIV to enter the dates will become visible.
As of right now the page loads with the DIV hidden but it never become visible.
Thanks in advance.

You need to look at the accepted option, you can not use the value like you are doing.
$(document).ready(function () {
$('.region').hide();
$('#sr').change(function () {
$(".region").hide();
var region = $(this).find("option:selected").data("region");
$('#'+region).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reports" id="sr">
<option value="">Select Report...</option>
<option value="avg" data-region="1">Average Sold</option>
<option value="mma" data-region="1">Min|Max|Avg Sold</option>
<option value="oh" data-region="2">On Hand Qty</option>
<option value="mr" data-region="2">Money Report</option>
</select>
<div id='1' class='region box box-primary'>
<p>Start Date: <input type="text" id="datepicker" name="startdate" ></p>
<p>End Date: <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/>
</div>
<div id='2' class='region'>
2
</div>