i'm a total newbie to this.
I'd like to receive string in input the following:
Surname:
Name:
Country:
Region:
Email:
Phone number:
Special Requests:
Then I have to show them back in output when the button get pressed.
You can edit the code as much as you want because I think I made everything wrong.
The real problem is the output and the array.
What am I doing wrong (everything, I already know)?
Thanks.
var risposta;
var array = ["cognome", "nome", "comune", "regioni", "email", "telefono"]
function soluzione()
{
for (var i = 0; i < input.length; i++) {
var a = input[i];
k = k + "array[" + i + "].value= "
+ a.value + " ";
}
risposta = "Il numero รจ" +array+" Dai un altro numero.";
document.forms[1].risultato.value=risposta;
setTimeout(function(){window.location.reload()}, 3000);
}
#elaborato{
border-width:10px;
background-color:#FFFDC6;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
<center><td> <a href="http://www.istitutokennedy.net/">
<img alt="Istituto Kennedy" src="logokennedy.png"
width=400" height="120">
</a>
<td><h1>Form istituto Kennedy</h1></center>
</head>
<body bgcolor="#FFFDC6">
<div>
<table id="form" align="center">
<tr>
<br>
</tr>
<tr>
<td>
<form id="myForm" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
Cognome: <INPUT type="text" style="padding-top:5px;" name="cognome" size=40><br><br>
Nome: <INPUT type="text" style="padding-top:5px;"name="nome" size=30><br><br>
Comune di Residenza: <INPUT type="text" style="padding-top:5px;"name="comune" size=12><br><br>
<label for="regioni">Regione:</label>
<select id="regioni" name="regioni">
<option value="Abruzzo">Abruzzo</option>
<option value="Basilicata">Basilicata</option>
<option value="Calabria">Calabria</option>
<option value="Campania">Campania</option>
<option value="Emilia-Romagna">Emilia-Romagna</option>
<option value="Friuli-Venezia Giulia">Friuli-Venezia Giulia</option>
<option value="Lazio">Lazio</option>
<option value="Liguria">Liguria</option>
<option value="Lombardia">Lombardia</option>
<option value="Marche">Marche</option>
<option value="Molise">Molise</option>
<option value="Piemonte">Piemonte</option>
<option value="Puglia">Puglia</option>
<option value="Sardegna">Sardegna</option>
<option value="Sicilia">Sicilia</option>
<option value="Toscana">Toscana</option>
<option value="Trentino-Alto Adige">Trentino-Alto Adige</option>
<option value="Umbria">Umbria</option>
<option value="Valle d Aosta">Valle d'Aosta</option>
<option value="Veneto">Veneto</option>
</select>
Email: <INPUT type="text" style="padding-top:5px;"name="email" size=30><br><br>
Telefono: <INPUT type="text" style="padding-top:5px;"name="telefono" size=15><br><br>
<label> Richieste Particolari </label>
<textarea rows="12" cols="60">
</textarea>
<INPUT type="button" class="myButton" value=" Soluzione " onClick="soluzione()"><br>
</form>
<form>
<br>Risultato: <INPUT type="text" style="padding-top:5px;" name="risultato" size=44><br>
</form>
</html>
I think you want to add a new input value to the array.
just use array_name.push(value)
For output use an iterator, like for loop or for each.
The best solution I could come up with is this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
</head>
<body>
<form id="myForm">
Cognome: <input type="text" style="padding-top: 5px" name="cognome" size="40" /><br /><br />
Nome: <input type="text" style="padding-top: 5px" name="nome" size="30" /><br /><br />
Comune di Residenza: <input type="text" style="padding-top: 5px" name="comune" size="12" /><br /><br />
<label for="regioni">Regione:</label>
<select id="regioni" name="regioni">
<option value="Abruzzo">Abruzzo</option>
<option value="Basilicata">Basilicata</option>
<option value="Calabria">Calabria</option>
<option value="Campania">Campania</option>
<option value="Emilia-Romagna">Emilia-Romagna</option>
<option value="Friuli-Venezia Giulia">Friuli-Venezia Giulia</option>
<option value="Lazio">Lazio</option>
<option value="Liguria">Liguria</option>
<option value="Lombardia">Lombardia</option>
<option value="Marche">Marche</option>
<option value="Molise">Molise</option>
<option value="Piemonte">Piemonte</option>
<option value="Puglia">Puglia</option>
<option value="Sardegna">Sardegna</option>
<option value="Sicilia">Sicilia</option>
<option value="Toscana">Toscana</option>
<option value="Trentino-Alto Adige">Trentino-Alto Adige</option>
<option value="Umbria">Umbria</option>
<option value="Valle d Aosta">Valle d'Aosta</option>
<option value="Veneto">Veneto</option>
</select>
Email: <input type="text" style="padding-top: 5px" name="email" size="30" /><br /><br />
Telefono: <input type="text" style="padding-top: 5px" name="telefono" size="15" /><br /><br />
<label> Richieste Particolari </label>
<textarea rows="12" cols="60"> </textarea>
<input type="submit" class="myButton" value="Soluzione" /><br />
</form>
<br />Risultato:
<pre name="risultato" />
<script type="text/javascript" src="index.js" />
</body>
</html>
var risposta = {};
var array = ["cognome", "nome", "comune", "regioni", "email", "telefono"];
const formEl = document.getElementById("myForm");
formEl.addEventListener("submit", (e) => soluzione(e));
function soluzione(e) {
e.preventDefault();
for (var i = 0; i < array.length; i++) {
let value = document.getElementsByName(array[i])[0].value;
risposta[array[i]] = value;
}
document.getElementsByName("risultato")[0].innerHTML = JSON.stringify(risposta, null, 2);
}
If you can understand then perfect and if not then I can explain some parts in the comments too. Let me know :)
Related
I'm trying to develop a form where fields will be show according to already selected fields.
I'm facing problem to integrate JavaScript with html properly. I need your help to let me know how I can update the display of fields asynchronously.
Expected Behavior :
By default there will 1 choice selected and 1 input field , if user selects 2 choices from select input then there should be 2 input fields
This is minimal example where I'm trying:
document.getElementById("app").innerHTML = `
<h1>Show fields According to Selected Choice</h1>
<div>
1 field if selected one choice
2 fields if selected 2 choices
</div>
`;
body {
font-family: sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<fieldset>
<div class="form-row field-type">
<div>
<label class="required" for="id_type">Select Choices:</label>
<select name="type" id="id_type">
<option value="1" selected>1 Choice</option>
<option value="2">2 Choices</option>
</select>
</div>
</div>
<div>
<label for="id_choice_1">Choice 1:</label>
<input
type="text"
name="choice_1"
class="vTextField"
maxlength="100"
id="id_choice_1"
/>
</div>
<div>
<label for="id_choice_2">Choice 2:</label>
<input
type="text"
name="choice_2"
class="vTextField"
maxlength="100"
id="id_choice_2"
/>
</div>
</fieldset>
<script>
function myFunction() {
var x = document.getElementById("id_type").value || null;
// Put logic here
}
</script>
<script src="src/index.js"></script>
</body>
</html>
I also added this into a sandbox if you want to run the code. https://codesandbox.io/s/fervent-worker-r6xszj?file=/src/index.js
Using the onchange event of the select you can call a function that first clears all the fields and then adds N fields as selected:
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<fieldset>
<div class="form-row field-type">
<div>
<label class="required" for="id_type">Select Choices:</label>
<select name="type" id="id_type" onchange="genFields()">
<option value="1" selected>1 Choice</option>
<option value="2">2 Choices</option>
<option value="3">3 Choices</option>
<option value="4">4 Choices</option>
</select>
</div>
</div>
<div id="fields"></div>
</fieldset>
</body>
<script>
function genFields() {
document.getElementById("fields").innerHTML = "";
let numFields = document.getElementById("id_type").value;
for (let i = 1; i <= numFields; i++) {
document.getElementById(
"fields"
).innerHTML += `<div><label for='id_choice_${i}'>Choice ${i}</label><input type='text' id='id_choice_${i}' name='choice_${i}' class='vTextField' maxLength=100></div>`;
}
}
</script>
</html>
You can follow this:
let selects = document.querySelector("#id_type");
console.log(selects);
selects.onchange = function (e) {
let inputs = document.querySelector("#inputs");
inputs.innerHTML = `
<div>
<label for="id_choice_1">Choice 1:</label>
<input
type="text"
name="choice_1"
class="vTextField"
maxlength="100"
id="id_choice_1"
/>
</div>
`;
if(e.target.value == "2") {
inputs.innerHTML +=`
<div>
<label for="id_choice_1">Choice 2:</label>
<input
type="text"
name="choice_2"
class="vTextField"
maxlength="100"
id="id_choice_2"
/>
</div>
`;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<fieldset>
<div class="form-row field-type">
<div>
<label class="required" for="id_type">Select Choices:</label>
<select name="type" id="id_type">
<option value="1" selected>1 Choice</option>
<option value="2">2 Choices</option>
</select>
</div>
</div>
<div id="inputs">
<div>
<label for="id_choice_1">Choice 1:</label>
<input
type="text"
name="choice_1"
class="vTextField"
maxlength="100"
id="id_choice_1"
/>
</div>
</div>
</fieldset>
</body>
</html>
You just have to toggle the visibility of those elements with some logic to compare the selected option.
function myFunction(e) {
switch (e.target.value) {
case '1':
document.getElementById('id_choice_1_container').style.display = "block";
document.getElementById('id_choice_2_container').style.display = "none";
break;
case '2':
document.getElementById('id_choice_1_container').style.display = "none";
document.getElementById('id_choice_2_container').style.display = "block";
break;
default:
break;
}
}
<div id="app">
<h1>Show fields According to Selected Choice</h1>
</div>
<fieldset>
<div class="form-row field-type">
<div>
<label class="required" for="id_type">Select Choices:</label>
<select name="type" id="id_type" onchange="myFunction(event)">
<option value="1" selected>1 Choice</option>
<option value="2">2 Choices</option>
</select>
</div>
</div>
<div id="id_choice_1_container">
<label for="id_choice_1">Choice 1:</label>
<input type="text" name="choice_1" class="vTextField" maxlength="100" id="id_choice_1" onchange="myFunction(event)"/>
</div>
<div id="id_choice_2_container" style="display: none">
<label for="id_choice_2">Choice 2:</label>
<input type="text" name="choice_2" class="vTextField" maxlength="100" id="id_choice_2" onchange="myFunction(event)"/>
</div>
</fieldset>
I'm trying to hide a form after some input has been given, but when I use the .style.display = "none"; command, all that happens is clear the boxes.
Here is the context that I have, the JS is at the bottom. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form class = "input">
<label for = "name" required>Please enter your name</label>
<input type="text" id="name"><br><br>
<label for = "age" required>Please enter your age</label>
<input type="text" id="age"><br><br>
<label for = "colour">Please select a colour: </label>
<select id="colour" required>
<option value="Yellow">Yellow</option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
</select><br><br>
<label for="">Select your difficulty:</label>
<select id="difficulty">
<option value = "1">1. Easy</option>
<option value = "2">2. Medium</option>
<option value = "3">3. Hard</option>
</select>
<br><br>
<input type="submit" onclick="clearScreen()">
</form>
<script>
function clearScreen() {
var x = document.getElementsByID("input");
x.style.display = none;
}
</script>
</body>
</html>
Try this:
HTML
<form id="theForm">
<!-- your form elements -->
<input type="submit" />
</form>
CSS
.hide {
visibility: hidden;
}
JavaScript
var theForm = document.getElementById("theForm");
theForm.addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add("hide");
});
See this Fiddle: https://jsfiddle.net/dxwLr581/
I made three simple changes here. I changed form class="input" to id="input", I added onsubmit="return false" to the form element for the purposes of testing, and I changed the function call in the first line of your function to getElementById()
function clearScreen() {
var x = document.getElementById("input");
x.style.display = "none";
}
<form id="input" onsubmit="return false">
<label for="name" required>Please enter your name</label>
<input type="text" id="name"><br><br>
<label for="age" required>Please enter your age</label>
<input type="text" id="age"><br><br>
<label for="colour">Please select a colour: </label>
<select id="colour" required>
<option value="Yellow">Yellow</option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
</select><br><br>
<label for="">Select your difficulty:</label>
<select id="difficulty">
<option value="1">1. Easy</option>
<option value="2">2. Medium</option>
<option value="3">3. Hard</option>
</select>
<br><br>
<input type="submit" onclick="clearScreen()">
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id = "input">
<label for = "name" required>Please enter your name</label>
<input type="text" id="name"><br><br>
<label for = "age" required>Please enter your age</label>
<input type="text" id="age"><br><br>
<label for = "colour">Please select a colour: </label>
<select id="colour" required>
<option value="Yellow">Yellow</option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
</select><br><br>
<label for="">Select your difficulty:</label>
<select id="difficulty">
<option value = "1">1. Easy</option>
<option value = "2">2. Medium</option>
<option value = "3">3. Hard</option>
</select>
<br><br>
<input type="submit" onclick="clearScreen(event)">
</form>
<button onclick="toggleForm()">Toggle</button>
<script>
function clearScreen(e) {
var x = document.getElementById("input");
x.style.height = 0;
x.style.overflow = 'hidden'
}
function toggleForm() {
var x = document.getElementById("input");
if (x.style.height) {
x.style.height = '';
x.style.overflow = '';
} else {
x.style.height = 0;
x.style.overflow = 'hidden'
}
}
</script>
</body>
</html>
I was able to retrieve the input box values, but I am not sure how to retrieve the values from the drop down and radio button values using Java Script get method.
Here is my code:
INDEX PAGE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css">
<title>Test</title>
</head>
<body>
<form action="Results.html" method="get">
<fieldset class = "form1">
<legend><b>Payment</b></legend>
<input type="radio" name="payment" value="Visa" id="Visa" checked> Visa
<input type="radio" name="payment" value="MasterCard" id="MasterCard"> MasterCard
<input type="radio" name="payment" value="AmericaExpress" id="AmericaExpress"> AmericaExpress
<input type="radio" name="payment" value="Discover" id="Discover"> Discover <br>
Card #: <input type="text" name="Card" required id="Card"><br>
Expiration:
<select id="Month">
<option value="01">01</option>
<option value="02">02</option>
</select>
<select id="Day">
<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>
</select>
<br>
CVV: <input type="text" name="cvv" id="Cvv" required> <br>
</fieldset>
<input type="submit" value="Submit" id="button1" name="submit"/>
</form>
</body>
</html>
Javascript/ Output Page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Results</title>
<script>
var parseQueryString = function() {
var str = window.location.search;
var objURL = {};
str.replace(
new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
function( $0, $1, $2, $3 ){
objURL[ $1 ] = $3;
}
);
return objURL;
};
</script>
</head>
<body>
<h2> Your Form Has Been Submitted </h2>
<P> <b>Payment Information</b> </P>
<div class = "Visa"> Visa: </div>
<div class = "MasterCard"> Master Card: </div>
<div class = "AmericanExpress"> American Express: </div>
<div class = "Discover"> Discover: </div>
<div class = "Card"> Card Number: </div>
<div class = "Month"> Expiration Month: </div>
<div class = "Day"> Expiration Day: </div>
<div class = "cvv"> CVV: </div>
<script>
var params = parseQueryString();
var Visa = params["Visa"];
var MasterCard = params["MasterCard"];
var AmericanExpress = params["AmericanExpress"];
var Discover = params["Discover"];
var Card = params["Card"];
var Month = params["Month"];
var Day = params["Day"];
var cvv = params["cvv"];
console.log(Visa)
document.querySelector('.Visa').innerText += Visa;
console.log(MasterCard)
document.querySelector('.MasterCard').innerText += MasterCard;
console.log(AmericanExpress)
document.querySelector('.AmericanExpress').innerText += AmericanExpress;
console.log(Discover)
document.querySelector('.Discover').innerText += Discover;
console.log(Card)
document.querySelector('.Card').innerText += Card;
console.log(Month)
document.querySelector('.Month').innerText += Month;
console.log(Day)
document.querySelector('.Day').innerText += Day;
console.log(cvv)
document.querySelector('.cvv').innerText += cvv;
</script>
</body>
</html>
Card #: <input type="text" name="Card" required id="Card"><br>
Expiration:
<select id="Month">
<option value="01">01</option>
<option value="02">02</option>
</select>
<select id="Day">
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<br>
CVV: <input type="text" name="cvv" id="Cvv" required> <br>
</fieldset>
<input type="submit" value="Submit" id="button1" name="submit"/>
</form>
</body>
</html>
The results.html page displays the values from the input type that are text, but doesn't return the value from the radio and the drop down menu. Please help me with this. Thanks in advance.
For Radio buttons and Drop down's parameter name in query string is sent as name of the control.
You need to define a name for Month and Year. Card Type is sent as payment in query string as you gave the name as payment.
Index Page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css">
<title>Test</title>
</head>
<body>
<form action="Results.html" method="get">
<fieldset class = "form1">
<legend><b>Payment</b></legend>
<input type="radio" name="payment" value="Visa" id="Visa" checked> Visa
<input type="radio" name="payment" value="MasterCard" id="MasterCard"> MasterCard
<input type="radio" name="payment" value="AmericaExpress" id="AmericaExpress"> AmericaExpress
<input type="radio" name="payment" value="Discover" id="Discover"> Discover <br>
Card #: <input type="text" name="Card" required id="Card"><br>
Expiration:
<select id="Month" name="Month">
<option value="01">01</option>
<option value="02">02</option>
</select>
<select id="Day" name="Day">
<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>
</select>
<br>
CVV: <input type="text" name="cvv" id="Cvv" required> <br>
</fieldset>
<input type="submit" value="Submit" id="button1" name="submit"/>
</form>
</body>
</html>
Results Page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Results</title>
<script>
var parseQueryString = function() {
var str = window.location.search;
var objURL = {};
str.replace(
new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
function( $0, $1, $2, $3 ){
objURL[ $1 ] = $3;
}
);
return objURL;
};
</script>
</head>
<body>
<h2> Your Form Has Been Submitted </h2>
<P> <b>Payment Information</b> </P>
<div class = "paymentType"> Payment Type: </div>
<div class = "Card"> Card Number: </div>
<div class = "Month"> Expiration Month: </div>
<div class = "Day"> Expiration Day: </div>
<div class = "cvv"> CVV: </div>
<script>
var params = parseQueryString();
var paymentType = params["payment"];
var Card = params["Card"];
var Month = params["Month"];
var Day = params["Day"];
var cvv = params["cvv"];
document.querySelector('.paymentType').innerText += paymentType;
console.log(paymentType)
document.querySelector('.Card').innerText += Card;
console.log(Month)
document.querySelector('.Month').innerText += Month;
console.log(Day)
document.querySelector('.Day').innerText += Day;
console.log(cvv)
document.querySelector('.cvv').innerText += cvv;
</script>
</body>
</html>
Card #: <input type="text" name="Card" required id="Card"><br>
Expiration:
<select id="Month">
<option value="01">01</option>
<option value="02">02</option>
</select>
<select id="Day">
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<br>
CVV: <input type="text" name="cvv" id="Cvv" required> <br>
</fieldset>
<input type="submit" value="Submit" id="button1" name="submit"/>
</form>
</body>
</html>
This are two different things, that can be retrieved very easily, as soon as you experiment a bit around.
See the following simplified examples:
console.log(masterCard.checked)
console.log(day.value)
<input type="radio" id="masterCard" checked>
<select id="day">
<option value="2018" selected></option>
</select>
Side note: This is a standard requirement for clean scripting, use camelCase to name an id, mostly don't use uppercase in the first char for id!
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.
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>