JSP form not submitting on button click - javascript

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>

Related

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>

Dropdown that has an option to input a field

I'm trying to include in the option, that if the user chooses/clicks the Other please specify option, he gets an option to give input. The characters thus input will instantly show relevant nationalities in a dropdown bar.
For a javascript function based solution for this, how can I make a call to that function in my html code or in dropdown. Thanks! :D
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
</div>
Check the below code
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code" />
</div>
Below is the full implementation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nationality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required="required">
<option></option>
<option value="" disabled="disabled" selected="selected">Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code">
</div>
<script>
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
</script>
</body>
</html>
Try this:
You need to have a listener for your select and take the action as per the selected value..
var inputLabel = $('#inputLabel');
var onOptionChange = function() {
if (this.value == 'other') {
inputLabel.fadeIn(100);
} else {
inputLabel.fadeOut(100);
}
};
$('#status').on('change', onOptionChange);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">Nationality</label>
<select name="status" id="status" required>
<option value="" disabled selected>Select your Nationality</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<label for="input" id="inputLabel" style="display: none">Other:
<input type="text" id="input">
</label>
</div>

Html/ javascript form calculation issues

I'm new to coding for websites and am really struggling! I'm trying to add the select values from different select menu options to a total which will then give me a figure I can add to a number entered in a free text box.
I"ve searched extensively on the net and on this site and have found examples that are similar but when I've tried them out it doesn't work with my additions/changes!
Any help would be greatly appreciated!!!! Below is my html and also javascript.
Thanks in advance!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="example.js"></script>
</head>
<form action="" id="myform" onsubmit="return false;">
<div class="cont_order">
<div data-role="fieldcontain">
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<select name="Sport" id="Sport" data-native-menu="false" data-theme="a" onchange="calculateTotal()">
<option value="0">Sport</option>
<option value="Tennis">Tennis</option>
<option value="Golf">Golf</option>
<option value="Soccer">Soccer</option>
<option value="Rugby">Rugby</option>
<option value="Polo">Polo</option>
<option value="Fencing">Fencing</option>
<option value="Swimming">Swimming</option>
</select>
<br/>
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<select name="Star Sign" id="SS" data-native-menu="false" onchange="calculateTotal()">
<option value="0">Star Sign</option>
<option value="1.5">Aries</option>
<option value="3">Taurus</option>
<option value="1.5">Gemini</option>
<option value="2">Cancer</option>
<option value="3">Leo</option>
<option value="1.5">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="1.5">Capricorn</option>
<option value="0.5">Aquarius</option>
<option value="0.5">Pisces</option>
</select>
<br/>
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<br/>
<select name="Hobby" id="Hobby" data-native-menu="false" onchange="calculateTotal()">Hobby
<option value="0">Hobby</option>
<option value="A lot">A lot</option>
<option value="Some">Some</option>
<option value="Few">Few</option>
<option value="None">None</option
</select>
</div>
<br/>
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<br/>
<select name="Favourite Colour" id="FC" data-native-menu="false" onchange="calculateTotal()">
<option value="0">Favourite Colour</option>
<option value="1.5">Black</option>
<option value="3">Blue</option>
<option value="1.5">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="1.5">Pink</option>
<option value="2">Purple</option>
<option value="3">Red</option>
<option value="2">Yellow</option>
<option value="1.5">White</option>
<option value="4">Other</option>
</select>
<br/>
<p>
<br/>
<div data-role="fieldcontain">
<label for="Age">
<div align="center">Age
:
</div>
</label>
<div align="center">
<input type="number" name="Age" id="Age" value="" />
</div>
</div>
</form>
<p> </p>
<p> <a href="#" data-role="button"> <input type='submit' id='Submit' value='submit' onclick="calculateTotal()"/>
<br/>
</div>
</form>
</div>
</body>
</html>
// JavaScript Document
var Sport = new Array();
Sport["Tennis"]=1.5;
Sport["Golf"]=3;
Sport["Soccer"]=2;
Sport["Rugby"]=3;
Sport["Polo"]=1.5;
Sport["Fencing"]=2;
Sport["Swimming"]=3;
var SS = new Arr4ay();
Star_Sign["Aries"]=1.5;
Star_Sign["Taurus"]=3;
Star_Sign["Cancer"]=2;
Star_Sign["Leo"]=3;
Star_Sign["Virgo"]=1.5;
Star_Sign["Libra"]=2;
Star_Sign["Scorpio"]=3;
Star_Sign["Sagittarius"]=2;
Star_Sign["Capricorn"]=1.5;
Star_Sign["Aquarius"]=0.5;
Star_Sign["Pisces"]=1.5;
var Hobby = new Array();
Hobby["A lot"]=0.5;
Hobby["Some"]=1;
Hobby["Few"]=1;
Hobby["None"]=2;
var FC = new Array();
Favourite_Colour["Blue"]=3;
Favourite_Colour["Brown"]=1.5;
Favourite_Colour["Green"]=2;
Favourite_Colour["Orange"]=3;
Favourite_Colour["Pink"]=1.5;
Favourite_Colour["Purple"]=2;
Favourite_Colour["Red"]=3;
Favourite_Colour["Yellow"]=2;
Favourite_Colour["White"]=1.5;
Favourite_Colour["Other"]=4;
function calc() {
var Sport = Number(document.getElementsById("Sport").value);
var SS = Number(document.getElementsById("SS").value);
var Hobby = Number(document.getElementsById("Hobby").value);
var FC = Number(document.getElementsById("FC").value);
var Age = Number(document.getElementsById("Age").value);
var total = Sport + SS + Hobby + FC;
var Score = Age = Score
}// JavaScript Document
In your function calc replace Number with either parseInt if you always expect an integer from your value or parseFloat otherwise.
Unless I am misunderstanding what you're after you could just use the Array.reduce function:
Array.reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
So for you:
function calc() {
new tempAry = [
Number(parseInt (document.getElementsById("Sport").value),10),
Number(parseInt (document.getElementsById("SS").value),10),
Number(parseInt (document.getElementsById("Hobby").value),10),
Number(parseInt (document.getElementsById("FC").value),10)
];
var total = tempAry.reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
//No idea what these are for
//var Age = Number(document.getElementsById("Age").value);
//var Score = Age = Score
}
Not sure exactly what you're after, nor what `Score is meant for, but total should equal the total number.

Add Up All Javascript Divs For Total Amount

Okay, So I have a javascript function setup to add a div with an ID up and total it, and have the value displayed at the top. Well It works fine and all, But Due to it being multiple Id's I'm confused on how to get the total number!
function GetCost(ID) {
var cost = $('#Cost'+ID).val();
var income = $('#Income'+ID).val();
var owned = $('#Own'+ID).val();
var new_cost = number_format(cost * owned / 10 + 1000);
$('#PropCost'+ID).html('Cost: $'+new_cost);
$('#TotalIncome').html(number_format(income * owned));
}
As you can see it's with a Div plus an ID. Well here's the HTML with multiple divs. They're split up with different Id's Such as: owned1 And then for instance owned2.
<!-- Property Start-->
<div id="PropBlock">
<form action="javascript:void" method="post">
<div id="PropName">News Stand</div>
<div align="center"><img src="http://cdn0.mobwarsapp.com/rpg_images/opensocial/mob/ingame/territory/big/newsstand.gif" /></div>
<div id="PropIncome">Income: $100</div>
<div id="PropCost1" class="PropCost">Cost: $1,000</div>
<div id="PropOwn" align="center">
Own: <input type="text" ID="Own1" value="0" size="3" maxlength="5" onkeyup="GetCost(1)" />
</div>
<div id="PropBuy">
<select id="Numbers1">
<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>
</select>
<input type="submit" value="Calculate" onClick="CalcProp(1)" />
<input type="hidden" id="Cost1" value="1000" />
<input type="hidden" id="Income1" value="100" />
<input type="hidden" id="Name1" value="News Stand" />
</form>
</div>
</div>
<!-- Property End -->
<!-- Property Start-->
<div id="PropBlock">
<form action="javascript:void" method="post">
<div id="PropName">Empty Lot</div>
<div align="center"><img src="http://cdn0.mobwarsapp.com/rpg_images/opensocial/mob/ingame/territory/big/empty_lot.gif" /></div>
<div id="PropIncome">Income: $100</div>
<div id="PropCost2" class="PropCost">Cost: $4,500</div>
<div id="PropOwn" align="center">
Own: <input type="text" ID="Own2" value="0" size="3" maxlength="5" onkeyup="GetCost(2)" />
</div>
<div id="PropBuy">
<select id="Numbers2">
<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>
</select>
<input type="submit" value="Calculate" onClick="CalcProp(2)" />
<input type="hidden" id="Cost2" value="4500" />
<input type="hidden" id="Income2" value="100" />
<input type="hidden" id="Name2" value="Empty Lot" />
</div>
</form>
</div>
<!-- Property End -->
Here's The Income Div.
<div id="Basic" align="center">Basic Properties: (Income: $<span id="TotalIncome">0</span>)</div>
Well, How it's a onkeyup Function, When I change the form for the property1. It will display the math total. But if I change the form for property2 it will display the total math for property 2. How would I have it add the 2 up and display the total for both added up? I'm going to have about 15 different ones and when you change the value, So I'm kind of confused on what to do, Please help!! Thanks!!
To understand what I'm talking about, Here's my sites link: http://psychowars.net/addtrain/property_cost
I'm not exactly sure what you want. Assuming you want to get the total (sum of all income*owned) and put it on #TotalIncome, Here you have (replace your GetCost by all this):
//Just calculates. Doesn't affect UI
function getCostsById(ID) {
var cost = $('#Cost'+ID).val();
var income = $('#Income'+ID).val();
var owned = $('#Own'+ID).val();
var new_cost = cost * owned / 10 + 1000;
return {
cost: cost,
income: income,
owned: owned,
new_cost: new_cost
};
}
//I assume total is sum of every income*owned
function getTotalCost(){
var total = 0;
for(var id=1; id<=10; id++){
var costs = getCostsById(id)
total += costs.income * costs.owned;
}
return total;
}
//This affects UI
function GetCost(ID){
var costs = getCostsById(ID);
$('#PropCost'+ID).html('Cost: $'+number_format(costs.new_cost) );
$('#TotalIncome').html(number_format(getTotalCost()));
}
Cheers, from La Paz, Bolivia
The #TotalIncome is revised with only the income from the most recently edited property. It needs to also include all the other property locations when calculating the total. Just revamp the calculated function.
$('#TotalIncome').html((income * owned));
To this:
var sum = 0;
$('[id^="Own"]').each(function(){
var id = $(this).attr('id');
id = id.replace("Own","");
sum += (( $('#Income'+id).val())*$('#Own'+id).val())
});
$('#TotalIncome').html(sum);

Categories