I work in a web app with jsp. I'm doing a form in a modal window with bootstrap, this is the body code of the modal window.
<%@page import="DataBase.Querys"%>
<%@page import="Bean.Categoria"%>
<%@page import="java.util.ArrayList"%>
<!--
- Ask Simon
- Missael Armenta Peralta
-
-->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Ask Simon - Categories</title>
<link rel="shortcut icon" href="../images/escudo.png" >
<link href="../home/css/bootstrap.min.css" rel="stylesheet">
<link href="../home/css/agency.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<base target="_blank" />
</head>
<body id="page-top" class="index">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="col-lg-12 text-left">
<a href="http://t-systems.telekom.de/cms/tsi-mx/es/news/templateId=renderInternalPage/id=1538902.html">
<img src="../home/img/t-systems.png">
</a>
</div><!--col-lg-12 text-left-->
<div class="col-lg-12 text-center">
<a class="navbar-brand page-scroll" href ng-click="cominghome()">Welcome to Ask Simon</a>
</div><!--col-lg-12 text-center-->
</div><!--navbar-header page-scroll-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href ng-click="cominghome()"></a>
</li>
<li>
<a class="page-scroll" href ng-click="users()">Users</a>
</li>
<li>
<a class="page-scroll" href ng-click="helpp()">HELP</a>
</li>
<li>
<a class="page-scroll" href ng-click="goback()" >Logout</a>
</li>
</ul>
</div><!--id= "bs-example-navbar-collapse-1"-->
</div><!-- container -->
</nav><!--navbar navbar-default navbar-fixed-top-->
<!-- Categories Grid Section -->
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Categories</h2>
</div>
</div>
<div class="row">
<!--CICLO PARA COLOCAR LAS AREAS DE FORMA DINAMICA-->
<%
Querys DB=new Querys(); //OBJETO PARA CONSULTA LA BASE DE DATOS
ArrayList<Categoria> categories=DB.MostrarCategorias();//OBTENEMOS LA LISTA DE CATEGORIAS
for(int i=0;i<categories.size();i++) //CICLO PARA RECORRER TODAS LAS AREAS
{
//Div General
out.println("<div class='col-md-4 col-sm-6 portfolio-item'>");
//Div Imagen
out.println("<a href='' class='portfolio-link' data-toggle='modal'>");
out.println("<div class='portfolio-hover'>");
out.println("<div class='portfolio-hover-content'>");
out.println("<i class='fa fa-plus fa-3x'></i>");
out.println("</div>");
out.println("</div>");
String rutaImagen="../img/"+categories.get(i).getIdCategoria()+"."+categories.get(i).getExtencion(); //ALMACENA EN UN STRING LA RUTA DE LA IMAGEN
out.println("<img src="+rutaImagen+" class='img-responsive' alt=''>"); //MUESTRA LA IMAGEN
out.println("</a>");//Termina Div Imagen
//Div Nombre
out.println("<div class='portfolio-caption'>");
out.println("<h4>"+categories.get(i).getNombre()+"</h4>"); //MUESTRA EL NOMBRE
out.println("</div>"); //Termina Div Nombre
out.println("</div>");//Termina Div general
}
%><!--TERMINA CICLO PARA COLOCAR LAS AREAS DE FORMA DINAMICA-->
<div class="col-md-4 col-sm-6 portfolio-item"><!-- Add Categories-->
<!--ESTA SECCION NO CAMBIA POR TANTO QUEDA ESTATICA -->
<a class="portfolio-link" data-target="#myModal" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="imgareas/arey.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Add Categorie</h4>
</div>
</div><!-- End Add categorie-->
</div><!-- row -->
</div><!--container-->
</section><!--portfolio-->
<!-- Add Categorie -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h5 class="modal-title" id="myModalLabel">Add a new Categorie</h5>
</div><!--modal-header-->
<div class="modal-body">
Please, complete the requested information
<form name="AddCat" action="./insert" method="post" enctype="multipart/form-data"><br>
<label>Name of categorie</label><br/>
<input type=text size=60 name="nombreCat" required class="form-control"><br><br>
<label>Image of categorie</label><br/>
<label></label>
<input type=file size=60 name="file2" required><br><br>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" class="btn btn-primary" value="Save changes"></input>
</form><br><!-- AddCategorie -->
</div><!--modal-body-->
</div><!--modal-content-->
</div><!--modal-dialog-->
</div><!--modal fade-->
<!-- End Add Categorie form-->
<!-- Footer -->
<!-- Estas lineas enlazan el footer para reutilizar codigo -->
<script> var modulo= angular.module('includes',[])</script>
<footer ng-include src=" '../enlaces/footer.html' "></footer>
<!-- End Footer -->
<!--Enlaces para la ventana modal-->
<script src="../home/js/jquery.js"></script>
<script src="../home/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="../home/js/classie.js"></script>
<script src="../home/js/cbpAnimatedHeader.js"></script>
<script src="../home/js/jqBootstrapValidation.js"></script>
<script src="../home/js/contact_me.js"></script>
</body>
The problem is that you do not send the form. I click the button but it does not send me anywhere. The insert file is a servlet and I have already declared it in the web.xml Any idea why this happens?
Web.xml file configuration
<servlet-config>
<servlet-name>insert</servlet-name>
<servlet-class>Servlets.insert</servlet-class>
</servlet-config>
Blank servlet file I've only created it with netbeans I still do not use any code but I should open the servlet as such and show a blank page but it stays in the modal window
/**
*
* @author Missael
*/
@WebServlet(name = "insert", urlPatterns = {"/insert"})
public class insert extends HttpServlet {
/**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code>
* methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
/* TODO output your page here. You may use following sample code. */
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet insert</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Servlet insert at " + request.getContextPath() + "</h1>");
out.println("</body>");
out.println("</html>");
}
}
// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
/**
* Handles the HTTP <code>GET</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Handles the HTTP <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>