Checkbox (JSP PAGE) and insert on mysql database - javascript

i have a jsp page that user in form has to give a destination : city,country,url_of_city and 3 checkbox with the kind of the destination (summer,winter,christmas) , he can check max 2 boxes, so i need to take the results of this and insert them to a database in order to be able later to search for this destination , how can i do it this?
mysql code :
CREATE TABLE DEST_C(ID_DEST_C INT(5),CATEGORY VARCHAR(45))
CREATE TABLE DEST(ID1_DEST INT(6),ID2_DEST INT (6),COUNTRY VARCHAR(40),CITY VARCHAR(40),URL VARCHAR(5400));
jsp form code:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>create dest</title>
</head>
<body>
<html>
<head>
<title>CREATE DESTINATION</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> CREATING DESTINATION </h1>
<form name="createdest" method="get" action="create dest code.jsp">
Country: <input type="text" required name="id8" /> <br>
City: <input type="text" required name="id9" /> <br>
URL Video: <input type="url" required name="id10" /> <br> <br>
<i><ins>Categorize the destination (max 2): </ins></i> <br> <br>
<input type="checkbox" name="id5" value="1" onClick="return KeepCount()" >Christmas<br>
<input type="checkbox" name="id6" value="2" onClick="return KeepCount()" >Winter <br>
<input type="checkbox" name="id7" value="3" onClick="return KeepCount()" >Summer <br> <br>
<input type="submit" value="CREATE DESTINATION" />
<br>
</form>
<SCRIPT LANGUAGE="javascript">
function KeepCount() {
var NewCount = 0
if (document.createdest.id5.checked)
{NewCount = NewCount + 1}
if (document.createdest.id6.checked)
{NewCount = NewCount + 1}
if (document.createdest.id7.checked)
{NewCount = NewCount + 1}
if (NewCount == 3)
{
alert('Pick Just Two Please')
document.createdest; return false;
}
}
</SCRIPT>
JSP CODE for inserts :
<%#page import="java.sql.*" %>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>create dest code</title>
</head>
<body>
<%
int m[] = new int[5000]; String s[] = new String[5000];
Class.forName("com.mysql.jdbc.Driver");
String myDatabase = "jdbc:mysql://localhost:3306/project_app?user=root&password=1234";
Connection myConnection = DriverManager.getConnection(myDatabase);
Statement myStatement = myConnection.createStatement();
boolean check=null!=request.getParameter("id5");
boolean check1=null!=request.getParameter("id6");
boolean check2=null!=request.getParameter("id7");
String id8=request.getParameter("id8");
String id9=request.getParameter("id9");
String id10=request.getParameter("id10");
String sqlString = "INSERT INTO DEST(COUNTRY,CITY,URL) VALUES ('"+id8+"', '"+id9+"','"+id10+"')";
myStatement.executeUpdate(sqlString);
myStatement.executeUpdate(sqlString1);
myStatement.close();
myConnection.close(); %>
</body>
<h1 style="color:blue;">Successful Registration </h1>
</html>

A very simple solution would be to assign a binary value to your checkboxes. So rather than 1,2,3 you could use 1,2,4. Then you would sum the values of the selected boxes and save this unique value.
As in your code:
`input type="checkbox" name="id5" value="1" (...)`
`input type="checkbox" name="id6" value="2" (...)`
`input type="checkbox" name="id7" value="4" (...)`
The truth table below shows you the different values.
id: ID5 ID6 ID7 Sum
value: 1 2 4
x 1
x 2
x x 3
x 4
x x 5
x x 6
The solution is not SQL related, but quite frankly, neither is the question...
Good luck!

Related

Javascript not working onchange

I've got a simple html and JS script, but it doesn't fire the alert message onchange when I enter 2 in the input number field.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("partysize");
if (x==2) window.alert ("You entered" + x);
}
</script>
</head>
<body bgcolor="#6BD3FF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<div align="center">
<br> Please enter the party size:
<input type="number" id = "partysize" name="partySize" onchange="myFunction()" >
<br />
<input type="SUBMIT" name="submitButton">
</form>
<br />
</div>
</body>
</html>
ugh, fixed by getting the value of the element:
function myFunction() {
var x = document.getElementById("partysize").value;
if (x==2) window.alert ("You entered" + x);
}
You need to get the value from the input box but in your snippet x is the only dom element. Pass the value to the change handler using this.value. Also parseInt will convert the number value in string to number
function myFunction(x) {
if (parseInt(x, 10) === 2) {
alert("You entered" + x);
}
}
<body bgcolor="#6BD3FF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<div align="center">
<br> Please enter the party size:
<input type="number" id="partysize" name="partySize" onchange="myFunction(this.value)">
<br/>
<input type="submit" name="submitButton">
<br />
</div>
</body>

i want div content disappears after i click on textbox

<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<style>
#myloc,#mypass{
color: red;
}
</style>
<script>
function validateform(){
var username=document.login.username.value;
var password=document.login.password.value;
if (username==null || username==""){
var data="username should not be blank.";
document.getElementById("myloc").innerHTML=data;
return false;
}else if(password.length<6){
var p="Password must be at least 6 characters long.";
document.getElementById("mypass").innerHTML=p;
return false;
}
}
</script>
<body>
<form action="/loginusingservlet/LoginSES" onsubmit="return validateform()" method="post" name="login">
<table>
<tr>
<td>username</td><td> <input type="text" name="username"></td></tr>
<tr><td></td><td><div id="myloc"></div></td>
</tr><tr><td>password</td><td> <input type="text" name="password"></td></tr>
<tr><td></td><td><div id="mypass"></div></td></tr>
<tr><td></td><td><input type="submit" value="submit"></td></tr>
</table>
</form>
</body>
</html>
this program works great...when i click submit buttons it displays messages like "username should not be blank " or "password atleast 6".after getting message..if i click on a textbox i want the message disappear untill i click "submit" button.
Here you go. New function in script (it checks argument and removes text from specific element:
function removeWarning(type)
{
(type == 1) ? document.getElementById('myloc').innerHTML = "" : document.getElementById('mypass').innerHTML = "";
}
And add onClick event in inputs.
<input type="text" name="username" onClick="removeWarning(1)">
<input type="text" name="password" onClick="removeWarning(2)">
To me it is working but it was a quick solution, it is possible to improve a little.

Gas Mileage Calculator Returning Negative

I'm trying to calculate the gas mileage. The function works but for some reason it returns a negative number, any solutions for this?
<!DOCTYPE HTML>
<html>
<head>
<title>Gas Mileage</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function calcMPG(en,st,gal){
var total= ((parseFloat(en) - parseFloat(st)))/(parseFloat(gal));
document.milespergal.mpg.value = total;
}
</script>
</head>
<body>
<h3>Gas Mileage</h3>
<form name="milespergal">
<p>Starting Mileage:<input type="text" value="0" name="start"><br>
Ending Mileage:<input type="text" value="0" name="end"><br>
Gallons Used:<input type="text" value="0" name="gallons"><br>
<input type="button" value="submit" onclick="calcMPG(document.milespergal.start.value,document.milespergal.end.value ,document.milespergal.gallons.value)">
<br>
Miles Per Gallon:<input value="0" type="text" name="mpg"></p>
</form>
</body>
</html>
Looks like you have your parameters backwards. Try defining calcMPG as this:
//Reordered st & en
function calcMPG(st, en ,gal){
var total= ((parseFloat(en) - parseFloat(st)))/(parseFloat(gal));
document.milespergal.mpg.value = total;
}
Here's a JSFiddle

the submit button doesn't work

when i click on the submit button nothing happens , am not sure what is the problem.
this program just adds 2 numbers and the output should be an alerts message.
please help
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GlassFish JSP Page</title>
</head>
<body>
<%
int a = 6, b = 8, c;
c=a+b;
%>
<p>
Value 1 =
<%=a%></p>
<p>
Value 2 =
<%=b%></p>
<p>
Enter the value :<br /> <input type="text" id="c" /></br>
<input type="submit" value="Submit"
onclick="validate();" />
</p>
<script type="text/javascript">
function validate() {
var a = <%=a%>;
var b = <%=b%>;
var c = <%=c%>;
if (c!= parseInt(document.getElementById("c").value, 10))
alert("The values you entered is incorrect.");
} else {
alert("Correct!");
}
}
</script>
</body>
</html>
You are missing the opening bracket on the if statement
if (c!= parseInt(document.getElementById("c").value, 10))
should be
if (c!= parseInt(document.getElementById("c").value, 10)){

document.getElementById on an input element returning undefined

I am creating a quid of quizz splitted on mulitple pages and I try to pass the score of each question to the next page using the get method with javascript.
I use a function called gValue() to get the variables from the previous page (called "s" + the number of the page) in the url, and then I want to add this variable (that I call 'score') to the values of the 3 multiple choices answers on the following page and replicate the whole process over and over.
I have a problem with inserting the newscore into the values of each of the radio input fields.
I don't get any console error nor javascript error but I get "undefined" when I want to check if the new values are added the right way to each input element in the form.
Here is the code of my first page and then of the second page, where I want to see the new values inserted into the form:
First page sending the s1 variable:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
</head>
<body>
<div>Choose between<br />
<form name="fo" method="get" action="part1.html">
<input type="radio" name="s1" value="1" />one<br />
<input type="radio" name="s1" value="2" />two<br />
<input type="radio" name="s1" value="3" />three<br />
<input type="submit" value="continuer" />
</form>
</div>
</body>
</html>
second page, where I want to extract the value of s1 and add it to the values of the 3 inputs in the form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<script type="text/javascript">
<!--
function subnewsc() {
for (i = 1; i <= 3; i++) {
var score = gValue();
score = parseInt(score);
i = parseInt(i);
var newscore = score + i;
var doc = 'document.getElementById("a' + i + '")';
doc.value = newscore;
}
}
function gValue() {
var url = window.location.href;
var qparts = url.split("?");
if (qparts.length == 0) {
return "";
}
var query = qparts[1];
var vars = query.split("&");
var value = "";
for (var i = 0; i < vars.length; i++) {
var parts = vars[i].split("=");
for (var f = 1; f <= 3; f++) {
var ss = "s" + f;
if (parts[0] == ss) {
value = parts[1];
break;
}
}
}
return value;
}
// -->
</script>
</head>
<body>
<div>choose between<br />
<form name="fo" method="get" action="part2.html">
<input id="a1" type="radio" name="s2" value="1" />one again<br />
<input id="a2" type="radio" name="s2" value="2" />two again<br />
<input id="a3" type="radio" name="s2" value="3" />three again<br />
<input type="submit" value="continuer" />
</form>
<script type="text/javascript">
<!--
var boby = subnewsc();
document.write(boby);
//-->
</script>
</div>
</body>
</html>
I don't know why I am getting undefined when I check using the "boby" variable. I first thought that it was because of the DOM, that the function subnewsc() was called too early so that the elements weren't yet there but it shouldn't be the case as I am now calling it later.
It also doesn't seem to have to do with the nature of the id name in the document.getElementById as it should be a string (a string plus a number becoming a string)
maybe
var doc = document.getElementById("a'+ i +'");
without single quotes
javascript can be a little funky - mere spaces in code can cause this error, here is an example of what i expierienced, here is a script I wrote:
<select id="mySelect" multiple="multiple"> <option>Apple</option>
when I ran this javascript and tried to find the firstchild, got error message stating "undefined"
However, I removed the space from the following line and that fixed it:
<select id="mySelect" multiple="multiple"><option>Apple</option>
please notice how I removed the space between multiple and option

Categories