Why does the form does not send on submit?
In the form there are some validations to ensure the data is correct, but when I submir the form, it does not send to the jsp.
I tried this before and it worked, but when I tried to submit an user latter it didn´t submitted nothing, and I don´t know where exactly the problem is. I think it may be on the html or in the jsp, but i´m not sure exactly what it is because when I try to submit the form, the web page does not mark any error.
Here is the coding I think may be helpful to resolve the problem.
Database
The only part of the database that matters is the Persona and RelTipoPer. The last part is to add an admin user, its relation to CatTipoPer, and the type of users that are declared in CatTipoPer.
drop database if exists cafeteria;
create database cafeteria;
use cafeteria;
create table CatTipoPer(
IDTipo int,
TipoPer varchar(20),
primary key(IDTipo)
);
create table Persona(
IDPer int auto_increment,
Correo varchar(50),
Nombre varchar(20),
Apellido varchar(20),
Contrasenia varchar(20),
FotoPerfil blob,
Calle varchar(50),
NCasa varchar(50),
Col varchar (50),
CP varchar(10),
PRecup varchar(50),
RRecup varchar(50),
primary key(IDPer, Correo)
);
create table RelTipoPer(
IDRelTipo int auto_increment,
IDPer int,
IDTipo int,
primary key (IDRelTipo),
foreign key(IDPer) references Persona(IDPer),
foreign key(IDTipo) references CatTipoPer(IDTipo)
);
create table EnPedido(
IDPedido int auto_increment,
IDPer int,
FechaPedido timestamp default now(),
FechaEntrega timestamp,
EstadoPedido varchar(15) default "Pendiente",
Total int,
primary key(IDPedido),
foreign key(IDPer)references Persona(IDPer)
);
create table Libro(
IDLibro int,
Nombre varchar(50),
Precio int,
Clasificacion varchar(35),
Descripcion text(1000),
primary key(IDLibro)
);
create table Alimento(
IDAlimento int,
Nombre varchar(50),
Descripcion text(1000),
Precio int,
Imagen blob,
primary key(IDAlimento)
);
create table DetPedido(
IDDetalle int auto_increment,
IDPedido int,
IDLibro int default 0,
IDAlimento int default 0,
primary key (IDDetalle),
foreign key(IDPedido)references EnPedido(IDPedido),
foreign key(IDLibro)references Libro(IDLibro),
foreign key(IDAlimento)references Alimento(IDAlimento)
);
insert into Persona (Correo, Nombre, Contrasenia) values("[email protected]","Admin","1234");
insert into CatTipoPer values(0,"Administrador"),(1,"Cliente"),(3,"Empleado");
insert into RelTipoPer(IDPer, IDTipo) values(1,0);
select * from Persona;
HTML
This is the form, basicly is the form to an account register page, there are validations to ensure the information is correctly written to submit to the database. There is also a CSS stylesheet. I don´t know if the problem may be on the html or in the javascript part, but when I try to submit it, it does not do nothing, neither does it marks a mistake.
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="registro.css" type="text/css">
<script>
function alerta() {
alert("Solamente son válidas las letras.");
}
function alerta1() {
alert("Solamente son válidos los números.");
}
function nombre(e) {
var clave = " abcdefghijklmnñopqrstuvwxyzABCCDEFGHIJKLMNÑOPQRSTUVWXYZ";
var a = e.which || e.keyCode;
var letraa = String.fromCharCode(a);
var b = clave.indexOf(letraa);
if (b === -1) {
alerta();
return false;
} else {
return true;
}
}
function numeros(e) {
var numeritos = " 1234567890";
var y = e.which || e.keyCode;
var num = String.fromCharCode(y);
var f = numeritos.indexOf(num);
if (f === -1) {
alerta1();
return false;
} else {
return true;
}
}
function validarCorreo(event) {
var texto = event.target.value;
var arrobas = texto.split("").filter((c) => c === "@");
if (arrobas.length > 1) {
alert("Por favor, ingresa solamente un '@', borre el sobrante");
document.getElementsByName("correo")[0].focus();
return false;
} else {
return true;
}
}
function validar_cuadros() {
var textito1 = document.getElementsByName("nombresito")[0].value;
var textito2 = document.getElementsByName("apellidopa")[0].value;
var textito3 = document.getElementsByName("correo")[0].value;
var textito4 = document.getElementsByName("calle")[0].value;
var textito5 = document.getElementsByName("ncasa")[0].value;
var textito6 = document.getElementsByName("col")[0].value;
var textito7 = document.getElementsByName("cp")[0].value;
var textito8 = document.getElementsByName("contra1")[0].value;
var textito9 = document.getElementsByName("contra2")[0].value;
a = "";
if (textito1 !== a && textito1 !== 'Nombre') {
if (textito2 !== a && textito2 !== 'Apellido Paterno') {
if (textito3 !== a && textito3 !== 'correo Electrónico') {
if (textito4 !== a && textito4 !== 'Casa') {
if (textito5 !== a && textito5 !== '# de Casa') {
if (textito6 !== a && textito6 !== 'Colonia') {
if (textito7 !== a && textito7 !== 'CP') {
if (textito8 !== a && textito8 !== 'Contraseña') {
if (textito9 !== a && textito9 !== 'Confirmar Contraseña') {
mostrardiv();
} else {
document.getElementsByName("contra2")[0].focus();
alert("la contraseña no tiene datos, profavor ingrese los datos requeridos");
return false;
}
} else {
document.getElementsByName("contra1")[0].focus();
alert("la contraseña no tiene datos, profavor ingrese los datos requeridos");
return false;
}
} else {
document.getElementsByName("cp")[0].focus();
alert("el codigo postal no tiene datos, profavor ingrese los datos requeridos");
return false;
}
} else {
document.getElementsByName("col")[0].focus();
alert("la colonia no tiene datos, profavor ingrese los datos requeridos");
return false;
}
} else {
document.getElementsByName("ncasa")[0].focus();
alert("el numero de casa no tiene datos, profavor ingrese los datos requeridos");
return false;
}
} else {
document.getElementsByName("calle")[0].focus();
alert("la calle no tiene datos, profavor ingrese los datos requeridos");
return false;
}
} else {
document.getElementsByName("correo")[0].focus();
alert("el correo no tiene datos, profavor ingrese los datos requeridos");
return false;
}
} else {
document.getElementsByName("apellidopa")[0].focus();
alert("el apellido paterno no tiene datos, profavor ingrese los datos requeridos");
return false;
}
} else {
document.getElementsByName("nombresito")[0].focus();
alert("el nombre no tiene datos, profavor ingrese los datos requeridos");
return false;
}
}
function validarContrasena() {
var contrasena1 = document.getElementsByName("contra1")[0].value;
var contrasena2 = document.getElementsByName("contra2")[0].value;
if (contrasena1 !== contrasena2) {
alert("Las contraseñas no coinciden.");
document.getElementsByName("contra2")[0].focus();
return false;
} else {
validar_cuadros();
}
}
function mostrarContraseña() {
var contrasena1 = document.getElementById("contra1");
var contrasena2 = document.getElementById("contra2");
var mostrar = document.getElementById("mostrar-contraseña");
if (mostrar.checked) {
contrasena1.type = "text";
contrasena2.type = "text";
} else {
contrasena1.type = "password";
contrasena2.type = "password";
}
}
function mostrardiv() {
var divtext = document.querySelector('.textos');
var divpreg = document.querySelector('.preguntas');
divtext.style.visibility = "hidden";
divpreg.style.visibility = "visible";
}
function validartres() {
var resp = document.getElementsByName("respuesta")[0].value;
b = "";
if (resp !== b) {
return true;
} else {
alert("ESCRIBA UNA RESPUESTA");
return false;
}
}
</script>
</head>
<body>
<form method="post" name="registradita" action="registro.jsp" onsubmit="return validartres()">
<div class="principal">
<div class="titulo">
<h1>Cafetería Carrusel</h1>
</div>
<div class="abajo">
<div class="botones">
<button onclick="location.href = 'registro.html'">registro</button>
<br>
<button onclick="location.href = 'iniciodesesion.html'">Iniciar sesion</button>
<br>
<button onclick="location.href = 'recuperar.html'">recuperar cuenta</button>
<div class="redes">
<img src="imagenes/face.png">
<img src="imagenes/ig.png">
</div>
</div>
<div class="textos">
<div class="titulodos">
<h1>Registro de usuario</h1>
</div>
<div class="nombresitos">
<!--NOMBRE-->
<input type="text" name="nombresito" placeholder="Nombre" onkeypress="return nombre(event)"
onfocus="borrarTexto(this)" onpaste="return false" oncopy="return false"
oncut="return false" autocomplete="off" maxlength="20" />
<!--APELLIDO PATERNO-->
<input type="text" name="apellidopa" onkeypress="return nombre(event)"
placeholder="Apellido Paterno" onpaste="return false" oncopy="return false"
oncut="return false" autocomplete="off" onclick="" maxlength="20" />
</div>
<div class="correito">
<!--CORREO ELECTRÓNICO-->
<input type="text" name="correo" onkeypress="return validarCorreo(event)"
placeholder="Correo Electrónico" onpaste="return false" oncopy="return false"
oncut="return false" autocomplete="off" maxlength="50">
</div>
<div class="contra">
<!--CONTRASEÑA-->
<input type="password" name="contra1" placeholder="Contraseña" onpaste="return false"
oncopy="return false" oncut="return false" autocomplete="off" maxlength="20" id="contra1">
<!--COMFIRMAR CONTRASEÑA-->
<input type="password" name="contra2" placeholder="Confirmar contraseña" onpaste="return false"
oncopy="return false" oncut="return false" autocomplete="off" maxlength="20" id="contra2">
<!---MOSTRAR CONTRASEÑA-->
<input type="checkbox" id="mostrar-contraseña" onclick="mostrarContraseña()"> Mostrar
</div>
<div class="direc">
<!--CALLE-->
<input type="text" name="calle" placeholder="Calle" onpaste="return false" oncopy="return false"
oncut="return false" autocomplete="off" maxlength="50">
<!--NUMERO DE CASA-->
<input type="text" name="ncasa" placeholder="# de Casa" onpaste="return false"
oncopy="return false" oncut="return false" autocomplete="off" maxlength="5"
onkeypress="return numeros(event)">
<!--COLONIA-->
<input type="text" name="col" placeholder="Colonia" onpaste="return false" oncopy="return false"
oncut="return false" autocomplete="off" maxlength="50">
<!--CODIGO POSTAL-->
<input type="text" name="cp" placeholder="Código Postal" onpaste="return false"
oncopy="return false" oncut="return false" autocomplete="off"
onkeypress="return numeros(event)" maxlength="10">
</div>
<div class="subtonsito">
<!--SUBMIT-->
<button onclick="return validarContrasena()">SEGUIR CON SEGURIDAD</button>
<!--TIPO-->
<input type="hidden" name="tipo" value="1">
</div>
</div>
<!--PARTE DOS. AYUDA PIPIPIPIPI-->
<div class="preguntas">
<div class="tituloo">
Preguntas de Seguridad
</div>
<div class="aviso">
<td>
De las siguientes preguntas escoje una para que esta sea usada en caso de querer recuperar
tu
cuenta
<td>
</div>
<div class="preguntitas">
<select name="seguridad" id="seguridaad">
<option value="seleccionar" disabled>SELECCIONE ALGUNA PREGUNTA</option>
<option value="opcion1">¿Cuál es tu animal favorito?</option>
<option value="opcion2">¿En qué ciudad naciste?</option>
<option value="opcion3">¿Cuál es tu comida favorita?</option>
<option value="opcion4">¿Cuál es el nombre de tu mejor amigo/a de la infancia?</option>
<option value="opcion5">¿Cuál es tu película favorita?</option>
</select>
</div>
<div class="respuestita">
<input type="text" name="respuesta" placeholder="escriba su respuesta por favor" size="50">
</div>
<div class="subtonsito">
<input type="hidden" name="tipo" value="1">
<input type="submit" value="Subir datos" name="subidita">
</div>
</div>
</div>
</div>
</form>
</body>
</html>
JSP
This us the jsp where the data given in the form is uploaded to the database, I tried it before and I think everything in it is correct, but maybe there are a few mistakes.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Registro</title>
</head>
<body>
<%@page import="java.sql.*, Clasesita.Conectadita" %>
<%
Connection con = null;
Conectadita cnx = new Conectadita();
con = cnx.conectar();
PreparedStatement ps=null;
int idper = 0;
String correo = request.getParameter("correo");
String nombre = request.getParameter("nombresito");
String apaterno = request.getParameter("apellidopa");
String contra = request.getParameter("contra1");
String calle = request.getParameter("calle");
String ncasa = request.getParameter("ncasa");
String col = request.getParameter("col");
String cp = request.getParameter("cp");
String precup = request.getParameter("seguridad");
String rrecup = request.getParameter("respuesta");
int tipoper = Integer.parseInt(request.getParameter("tipo"));
int existe = 1;
ps = con.prepareStatement("select * from Persona where Correo=?");
ps.setString(1, correo);
ResultSet rs = ps.executeQuery();
if (rs.next()) {
existe = 1;
} else {
existe = 0;
}
if (existe == 0) {
ps = con.prepareStatement("insert into Persona(Correo,Nombre,Apellido,Contrasenia, Calle, NCasa,Col,CP,PRecup,RRecup) values(?,?,?,?,?,?,?,?,?,?);");
ps.setString(1, correo);
ps.setString(2, nombre);
ps.setString(3, apaterno);
ps.setString(4, contra);
ps.setString(5, calle);
ps.setString(6, ncasa);
ps.setString(7, col);
ps.setString(8, cp);
ps.setString(9, precup);
ps.setString(10, rrecup);
ps.executeUpdate();
ps.close();
ps = con.prepareStatement("select * from Persona where Correo=?");
ps.setString(1, correo);
rs = ps.executeQuery();
while (rs.next()) {
idper = rs.getInt("IDPer");
}
ps = con.prepareStatement("insert into RelTipoPer (IDPer, IDTipo) values(?,?)");
ps.setInt(1, idper);
ps.setInt(2, tipoper);
ps.executeUpdate();
ps.close();
rs.close();
con.close();
%>
<script>
alert("Usuario registrado con éxito");
</script>
<%
request.getRequestDispatcher("index.html").forward(request, response);
} else {
%>
<script>
alert("Correo ya registrado");
</script>
<%
request.getRequestDispatcher("registro.html").forward(request, response);
}
%>
</body>
</html>
Connection
And this is the connection to the base in mysql, this i’m sure is correct.
package Clasesita;
import java.sql.*;
import static java.lang.System.out;
public class Conectadita {
Connection cnx=null;
public Connection conectar(){
try{
Class.forName("com.mysql.cj.jdbc.Driver");
cnx=DriverManager.getConnection("jdbc:mysql://localhost:3308/"+"cafeteria?autoReconnect=true&useSSL=false","root","n0m3l0");
}catch(ClassNotFoundException | SQLException error){
out.print(error.toString());
}
return cnx;
}
}
Honestly the security part is not really important in this project, so just help me figuring out why does the form is not sent when the submit button is pressed.