We Keep Coding

Search box with dropdown options

I want to make a search box almost like this one https://roxburylibrary.org/ this is what I have done https://jsfiddle.net/fkjow82y/ the issue is it is not searching when a different option gets selected.
<script type="text/javascript">
function dosearch() {
var sf=document.catalogSearch;
var submit = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.keyword.value);
window.location.href = submit;
return false;
}
</script>

Index 0 contains the URL, since the other indexes contain other values, the error occurs. Below the correct code.
<p>
<script type="text/javascript">
function dosearch() {
var urlSubmit = "https://catalog.mainlib.org/search/searchresults.aspx?ctx=31.1033.0.0.6&type=Keyword";
var sf=document.catalogSearch;
if(sf.keyword.value!=""){
urlSubmit += "&term=" + escape(sf.keyword.value);
}
if(sf.sengines.selectedIndex > 0){
urlSubmit += "&by=" + sf.sengines.options[sf.sengines.selectedIndex].value;
}
window.location.href = urlSubmit;
return false;
}
</script>
</p>
<div class="floatright headerright">
<div class="top_search">
<div class="searcht">
<ul>
<li><a class="selected" href="#searchtab1">Search Catalog</a></li>
<li>Search Databases</li>
<li>Search Website</li>
</ul>
<div id="searchtab1" style="display: block;">
<form name="catalogSearch" id="catalogSearch" target="_blank" onsubmit="return dosearch()"class="searchform">
<input type="text" name="keyword" type="text" placeholder="Search" value=""/>
<select class="catalogselect" name="sengines"id="SearchBy">
<option selected="selected" value="" target="_blank">Any Field</option>
<option value="TI">Title</option>
<option value="AU">Author</option>
<option value="SU">Subject</option>
<option value="NOTE">General notes</option>
<option value="PUB">Publisher</option>
<option value="GENRE">Genre</option>
<option value="SE">Series</option>
<option value="ISBN">ISBN</option>
<option value="ISSN">ISSN</option>
<option value="LCCN">LCCN</option>
<option value="PN">Publisher No.</option>
<option value="SUDOC">SuDoc</option>
<option value="CODEN">CODEN</option>
<option value="STRN">STRN</option>
</select><input type="submit" name="btnG" class="searchsubmit" value="Go" /></form></div>
</div>
</div>
<div id="searchtab2">
<form class="searchform" action="https://roxburylibrary.org/collections-resources/databases/" method="POST">
<select name="subjectid" class="databaseselect">
<option class="inputbox2" value="business-resources" >Business Resources</option>
<option class="inputbox2" value="ematerials-ebooks-audio-books-videos" >eMaterials - eBooks, Audio Books, Videos</option>
<option class="inputbox2" value="health-and-science-resources" >Health and Science Resources</option>
<option class="inputbox2" value="history-and-geneaology-resources" >History and Geneaology Resources</option>
<option class="inputbox2" value="job-and-career-help" >Job and Career Help</option>
<option class="inputbox2" value="languages" >Languages</option>
<option class="inputbox2" value="literature-resources" >Literature Resources</option>
<option class="inputbox2" value="magazines-newspapers" >Magazines & Newspapers</option>
</select>
<input class="searchsubmit" type="submit" value="Go"/>
<input type="hidden" name="catsearch" value="1"/>
</form>
</div>
<div id="searchtab3">
<p>
<script type="text/javascript">
function dosearchweb() {
var sf=document.websearch;
var submit = sf.sengine.options[sf.sengine.selectedIndex].value + escape(sf.keyword.value);
window.location.href = submit;
return false;
}
</script>
</p>
<form name ="websearch"class="searchform" target="_blank" onsubmit="return dosearchweb()" name="sengine">
<input type="text" name="keyword" type="text" placeholder="Search this Website..." value="" target="_blank" />
<select class="catalogselect" name="sengine"id="SearchBy">
<option selected="selected" value="https://roxburylibrary.org//?s=" target="_blank"></option>
<input type="submit" class="searchsubmit" value="Go" />
</form>
</select>
</div>
</div>
</div>

Javascript does not work

function Submit(){
var city = document.getElementById('Arrival').value;
var hotel = document.getElementById('Hotel').value;
var people = document.getElementById('travelers').value;
var days = document.getElementById('day').value;
var Wifi;
if ( document.getElementById('Wifi').checked = false)
wifi = 0;
if ( document.getElementById('Wifi').checked = true)
wifi = 10;
var seat;
if ( document.getElementById('recline').checked = false) seat = 0;
if ( document.getElementById('recline').checked = true) seat = 20;
var meal = document.getElementById('Meal').value;
var price1 = people * Meal;
var price2 = people * Recline;
var price3 = hotel * day;
document.getElementById("Total").innerHTML = 'Your total is ' + ( Arrival + price3 + Wifi + price1 + price2 );
return false;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Make a Reservation</title>
<script type="text/javascript" src="final_project_javascript.js"></script>
<link rel="stylesheet" type="text/css" href="final_project_css.css">
</head>
<body>
<div id="Nav">
<nav>
Make a Reservation
Contact Us
Join Our Mailing List
Home
</nav>
</div>
<div> <h1> Mad Men Bus Company </h1> </div>
<form name="reservation">
<p>First Name: <input type="text"></p>
<p>Last Name: <input type="text"></p>
<p>Arrival City:</p>
St. Louis <input type="radio" name="Arrival" id="louis" value="40"/></br>
Milwaukee <input type="radio" name="Arrival" id="milwaukee" value="20"/></br>
Detroit <input type="radio" name="Arrival" id="detroit" value="35"/></br>
<p>Hotel Choice:</p>
Economy<input type="radio" name="Hotel" id="economy" value="50"/></br>
Standard<input type="radio" name="Hotel" id="standard" value="70"/></br>
Upscale<input type="radio" name="Hotel"id="upscale" value="120"/></br>
<p>Number of Travelers</p>
<select id="travelers">
<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>
</select>
<p>Number of Days</p>
<select id="day">
<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>
</select>
<p>Extras</p>
<input type="checkbox" name="extra" id="Wifi" value="10">Wifi</br>
<input type="checkbox" name="extra" id="recline" value="20">Fully-reclining seat</br>
<div id="Meal">
<p>Meal Choice:</p>
None<input type="radio" name="Meal" id="none"/></br>
Snack<input type="radio" name="Meal" id="snack" value="5"/></br>
Full Meal<input type="radio" name="Meal" id="fullmeal" value="10"/></br>
</div>
<p>Special Requests:</p>
<input type="text" name="SpecialRequests"/>
<div>
</br><input type="button" value="Book My Trip" onclick="Submit">
</div>
<h1>Total</h1>
</form>
</body>
</html>
I am trying to run a calculation but javascript does not return anything or work. I have given every variable something to tie back to. I have including their values and I have everything but when I click "book my trip" button nothing happens. Can anyone see why this may be happening?
I want to calculate everything the user chooses and output the cost but the button is not doing anything.

To answer your question in short (why the button does nothing and your code doesn't execute) , Is because the input[type="button"] onsubmit property is referencing a function (Submit) that has not yet.. (according to the DOM) been loaded/defined.
Plus you forgot to add the parentheses e.g <input type="button" onclick="Submit()"/>
Your code was poorly formatted and lacked the semantics necessary to accomplish the task. I did some heavy refactoring and got this...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Make a Reservation</title>
<script type="text/javascript" src="final_project_javascript.js"></script>
<link rel="stylesheet" type="text/css" href="final_project_css.css">
</head>
<body>
<div id="Nav">
<nav>
Make a Reservation
Contact Us
Join Our Mailing List
Home
</nav>
</div>
<div>
<h1> Mad Men Bus Company </h1>
</div>
<form name="reservation">
<p>First Name: <input required type="text"></p>
<p>Last Name: <input required type="text"></p>
<div id="Arrival">
<p>Arrival City:</p>
St. Louis <input checked type="radio" name="Arrival" id="louis" value="40"/></br>
Milwaukee <input type="radio" name="Arrival" id="milwaukee" value="20"/></br>
Detroit <input type="radio" name="Arrival" id="detroit" value="35"/></br>
</div>
<div id="Hotel">
<p>Hotel Choice:</p>
Economy<input type="radio" name="Hotel" id="economy" value="50"/></br>
Standard<input checked type="radio" name="Hotel" id="standard" value="70"/></br>
Upscale<input type="radio" name="Hotel" id="upscale" value="120"/></br>
</div>
<p>Number of Travelers</p>
<select id="travelers">
<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>
</select>
<p>Number of Days</p>
<select id="day">
<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>
</select>
<p>Extras</p>
<input type="checkbox" name="extra" id="Wifi" value="10">Wifi</br>
<input type="checkbox" name="extra" id="recline" value="20">Fully-reclining seat</br>
<div id="Meal">
<p>Meal Choice:</p>
None<input checked type="radio" name="meal" id="none" value="0" /></br>
Snack<input type="radio" name="meal" id="snack" value="5"/></br>
Full Meal<input type="radio" name="meal" id="fullmeal" value="10"/></br>
</div>
<p>Special Requests:</p>
<input type="text" name="SpecialRequests"/>
<div>
</br><input type="button" value="Book My Trip" />
</div>
<h1 id="Total">Total</h1>
</form>
<script type="text/javascript">
document.querySelector('input[type="button"]').onclick = Submit;
function Submit(){
var city = Number(document.querySelector('input[name="Arrival"]:checked').value);
var hotel = Number(document.querySelector('input[name="Hotel"]:checked').value);
var people = Number(document.getElementById('travelers').value);
var days = Number(document.getElementById('day').value);
var wifi = document.getElementById('Wifi').checked === false ?
0 :
10;
var seat = document.getElementById('recline').checked === false ?
0 :
20;
var meal = Number(document.querySelector('input[name="meal"]:checked').value);
var price1 = people * meal;
var price2 = people * seat;
var price3 = hotel * days;
document.getElementById("Total").innerHTML = 'Your total is ' + (city + price3 + wifi + price1 + price2 );
return false;
}
</script>
</body>
</html>

Javascript total price calclator?

yeah im having some trouble with this, it wont calculate the prices and i was hoping some one would could help me please
function calculatePrice(myForm){
//Get selected data
var elt = document.getElementById("tickets1");
var tickets1 = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("tickets2");
var tickets2 = elt.options[elt.selectedIndex].value;
//convert data to integers
tickets1 = parseInt(tickets1);
tickets2 = parseInt(tickets2);
//calculate total value
var total = tickets1 + tickets2;
//print value to PicExtPrice
document.getElementById("PicExtPrice").value=total;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/stylepage.css">
<script type="text/javascript" src="../JS/prcecal.js">
</script>
</head>
<center>
<body>
<fieldset>
<div id="box_1">
<center><h2>Order</h2></center>
<form name="myForm">
Email:
<br>
<input type="email" name="email" id="email" required />
<br>
<br>
Date:
<br>
<input type="date" name="date" id="date" min="today" required />
<br>
<br>
<div id="dropdowns">
<SELECT NAME="Ticketsadults" onChange="calculatePrice()" id="tickets1">
<OPTION value="0">0</OPTION>
<OPTION value="20">1</OPTION>
<OPTION value="40">2</OPTION>
<OPTION value="60">3</OPTION>
<OPTION value="80">4</OPTION>
</SELECT>
<br>
<SELECT NAME="Ticketskids" onChange="calculatePrice()" id="tickets2" >
<OPTION value="0">0</OPTION>
<OPTION value="20">1</OPTION>
<OPTION value="40">2</OPTION>
<OPTION value="60">3</OPTION>
<OPTION value="80">4</OPTION>
</SELECT>
</div>
<br>
<br>
<br>
<button type="button" onclick="calculatePrice()">Calculate</button>
<INPUT type="text" id="PicExtPrice" Size=8>
</form>
</center>
</div>
</fieldset>
</body>
</html>
Ive tried changing it around and stuff but it still wont calcualte the two select drop downs

You put parseInt(tick1) and parseInt(tick2) instead of parseInt(tickets1) and parseInt(tickets2).
Also, you put tick1 + tick2 instead of tickets1 + tickets2.

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>

Show form based on radio button select [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have the following html which has two forms with form id=cardpayment for first form and form id="intenetpayment" for the second.
Also I have 3 radio buttons named "Debit card","Credit Card","Internet Banking".
All I want to do is,when I select the radio button Debitcard or Credit card,form with id="cardpayment" should be shown and the other form should be hidden and when i click on Internetbanking radio button , form with id="cardpayment" should be hidden and form with id="internetpayment" should be shown. Im new to jquery and javascript.I checked online that this can be done using a css by adding/removing a css class
{
display:none;
}
But i dont know how to make it work using javascript.
You can find the fiddle at http://jsfiddle.net/d5qDb/1/
Pardon for the long question,and I havnt included the css here for not confusing the question.It is in the fiddle anyway.thanks in advance for any help.I have given the division to two forms below.
<body>
<div id="credit-card">
<header>
<span class="title" style="background-image: url('images/fethrpowered.png');"><strong>Card Payment:</strong> Enter payment details</span>
<span class="close"><img src="images/close.png"/></span>
</header>
<section id="content">
<div class="title"><strong>Payment Mode- Select your payment mode</strong></div>
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios"value="false">
<label for="radio2">Debit Card</label>
<input type="radio" id="radio3" name="radios"value="false">
<label for="radio3">Internet Banking</label>
<form method="post" id="cardpayment">
<div style="float:right;margin-top:50px;">
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</div>
<div class="table form-fields">
<div class="row">
<div class="label">Card Number:</div>
<div class="input full"><input type="text" name="ccnumber" id="ccnumber" placeholder="8763125487533457"/><br/></div>
</div>
<div class="row">
<div class="label">Card Type:</div>
<div class="input full">
<select class="styled">
<option selected>Visa</option>
<option>Mastercard</option>
<option>Maestro</option>
<option>SBI Maestro</option>
</select>
</div>
<div class="valid"></div>
</div>
<div class="row">
<div class="label">Your name:</div>
<div class="input full"><input type="text" name="name" id="name" placeholder="Mr. Personality of TV"/></div>
</div>
<div class="row name">
<div class="label">Expires On:</div>
<div class="input size50">
<select class="styled">
<option selected>Select Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select class="styled">
<option selected>Select Year</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option> <option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
<div class="valid"></div>
</div>
<div class="row name">
<div class="label">CVV Number:</div>
<div class="input size50"><input type="text" name="cvv" id="cvv" placeholder="490" maxlength="3"/></div>
</div>
</div>
<input type="submit" style="float:right" value="Pay Now"/>
</form>
<form method="post" id="internetpayment">
<div class="table form-fields">
<div class="row name">
<div class="label">Name:</div>
<div class="input full"><input type="text" name="name" id="Name" placeholder="Enter your name"/></div>
</div>
<div class="row name">
<div class="label">Email:</div>
<div class="input full"><input type="text" name="email" id="email" placeholder="Enter Email address"/></div>
</div>
<div class="row name">
<div class="label">Mobile Number:</div>
<div class="input size50"><input type="text" name="Mobile Number" id="mobileNo"/></div>
</div>
<div class="row name">
<div class="label">Bank:</div>
<div class="input size50">
<select name="BankId" class="styled" data-required="true" data-trigger="change">
<option value="CORP">Corporation </option>
<option value="HDFC"> HDFC </option>
<option value="ICICI"> ICICI </option>
<option value="IDBI"> IDBI </option>
<option value="SBI"> STATE BANK OF INDIA </option>
<option value="DB"> DEUTSCHE </option>
</select>
</div>
<div class="valid"></div>
</div>
<div class="row name">
<div class="label">Amount:</div>
<div class="input size50"><input type="text" name="amount" id="amount" placeholder="10.00"/></div>
</div>
</div>
<input type="submit" style="float:right" value="Pay Now"/>
</form>
</section>
</div>
</body>

Using pure JavaScript:
Write this in your Script section.
var radios = document.getElementsByName("radios");
var cardpayment = document.getElementById("cardpayment");
var internetpayment = document.getElementById("internetpayment");
/* If Credit Card is selected by default, add these two lines of code.
cardpayment.style.display = 'block'; // show
internetpayment.style.display = 'none';// hide
*/
for(var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
var val = this.value;
if(val == 'radio1' || val == 'radio2'){ // Assuming your value for radio buttons is radio1, radio2 and radio3.
cardpayment.style.display = 'block'; // show
internetpayment.style.display = 'none';// hide
}
else if(val == 'radio3'){
cardpayment.style.display = 'none';
internetpayment.style.display = 'block';
}
}
}
fiddle: http://jsfiddle.net/LbrCf/

Try this, using jQuery Onchange
$("#radio1, #radio2").on("change", function(){
$("#cardpayment").show();
$("#internetpayment").hide();
});
$("#radio3").on("change", function(){
$("#cardpayment").hide();
$("#internetpayment").show();
});

I added this JavaScript code into your JSFiddel to create that effect
$('#radio1').change(function() {
if(this.checked) {
$('#cardpayment').show();
$('#internetpayment').hide();
}
});
$('#radio2').change(function() {
if(this.checked) {
$('#internetpayment').show();
$('#cardpayment').hide();
}
});

Your jQuery code should look something like this:
$(document).ready(function(){
$('#internet_radio').on('click', function(){
$('#cardpayment').hide();
$('#internetpayment').show();
})
$('#debit_radio').on('click', function(){
$('#cardpayment').show();
$('#internetpayment').hide();
})
})
Don't forget to load jQuery libraries to make this work.
Also the next time you need this type of functionality, you could use this. You don't really have to load their css files, only the js libraries, and you can style your tabs as you like.

Pretty simple. Just do this:
$("#radio1, #radio2").on("click", function(){
$("#cardpayment").show();
$("#internetpayment").hide();
});
$("#radio3").on("click", function(){
$("#cardpayment").hide();
$("#internetpayment").show();
});