[SOLUCIONADO] Enviar datos de una caja de texto creada con javascript a una pagina JSP

xredesycx · #1 (**permalink**) 28/01/2015, 23:41

Hola amigos buenos días.

Actualmente estoy creando un formulario para registrar usuarios, el cual tiene una parte en la cual a traves de un boton y utilizando javascript creo cajas de texto donde se ingresan números telefonicos. Bueno al final del formulario hay un boton enviar el cual al darle click deberia de enviar los datos del formulario incluido los valores de las cajas de texto creadas con javascript al server jsp para que los procese y posteriormente lo grabe en una base de datos, lo que sucede es que utilizando el metodo "get" veo que se pasan las variables definidas en en el formulario de manera estatica pero no se como pasar las cajas de texto creadas con javascript. No se si me podrian dar alguna idea.

Aqui pongo el codigo que actualmente e estado creando:

Código Java:

Ver original<%@page import="java.text.ParseException"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.sql.Date"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="pkgAplicaciones.grabarProfesores"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Mant. Prof</title>
        
        <script>
 
    function Mkbtn1() {
        var tabla = document.getElementById("telefonos"); 
 
        var etqtelefono = document.createElement("label");
            etqtelefono.setAttribute("form","ntelefonos");
            etqtelefono.innerHTML = "N. Telefonico: ";
 
        var saltolinea1 = document.createElement("br");
        var saltolinea2 = document.createElement("br");
 
        var txtnumero = document.createElement("input"); 
            txtnumero.setAttribute("type","text");
            txtnumero.setAttribute("maxlength",10);
 
        var btneliminar = document.createElement("input");
            btneliminar.setAttribute("type","button")
            btneliminar.setAttribute("value","borrar")
            btneliminar.setAttribute("id","btnelimina")
            btneliminar.addEventListener('click',function borra(){
                telefonos.removeChild(etqtelefono)
                telefonos.removeChild(saltolinea1)
                telefonos.removeChild(saltolinea2)
                telefonos.removeChild(txtnumero)
                telefonos.removeChild(espacioblank)
                telefonos.removeChild(btneliminar)})
 
        var espacioblank = document.createTextNode("    ");
 
    tabla.appendChild(etqtelefono);
    tabla.appendChild(txtnumero);
    tabla.appendChild(espacioblank);
    tabla.appendChild(btneliminar);
    tabla.appendChild(saltolinea1);
    tabla.appendChild(saltolinea2);
 
}
 
        function Mkbtn2() {
        var tabla = document.getElementById("correos"); 
 
        var etqcorreo = document.createElement("label");
            etqcorreo.setAttribute("form","ntelefonos");
            etqcorreo.innerHTML = "Correo : ";
 
        var saltolinea1 = document.createElement("br");
        var saltolinea2 = document.createElement("br");
 
        var txtcorreo = document.createElement("input"); 
            txtcorreo.setAttribute("type","text");
            txtcorreo.setAttribute("maxlength",150);
 
        var btneliminar = document.createElement("input");
            btneliminar.setAttribute("type","button")
            btneliminar.setAttribute("value","borrar")
            btneliminar.setAttribute("id","btnelimina")
            btneliminar.addEventListener('click',function borra(){
                correos.removeChild(etqcorreo)
                correos.removeChild(saltolinea1)
                correos.removeChild(saltolinea2)
                correos.removeChild(txtcorreo)
                correos.removeChild(espacioblank)
                correos.removeChild(btneliminar)})
 
        var espacioblank = document.createTextNode("    ");
 
    tabla.appendChild(etqcorreo);
    tabla.appendChild(txtcorreo);
    tabla.appendChild(espacioblank);
    tabla.appendChild(btneliminar);
    tabla.appendChild(saltolinea1);
    tabla.appendChild(saltolinea2);
 
}
 
    </script>
 
</head>
    <body>
        
    <form id="teacher" method="get" action="profesores.jsp">
        <fieldset>
            <label for="appaterno">Apellido Paterno: </label>
            <input type="text" name="appaterno">
            <br>
            <br>
            <label form="apmaterno">Apellido Materno: </label>
            <input type="text" name="apmaterno">
            <br>
            <br>
            <label form="nombres">Nombres: </label>
            <input type="text" name="nombres">
            <br>
            <br>
            <label form="fecha">Fecha: </label>
            <input type="text" name="fecha" placeholder="year-month-day">
            <br>
            <br>
            <label form="direccion">Direccion: </label>
            <input type="text" name="direccion">
            <br>
            <br>
            <label form="referencia">Referencia: </label>
            <input type="text" name="referencia">
            <br>
                        <br>
            <fieldset>
                <label form="genero">Genero: </label>
                <input type="radio" name="genero" value="M">Masculino</input>
                <input type="radio" name="genero" value="F">Femenino</input>
            </fieldset>
            <br>
            <fieldset>
                <label form="estado">Estado: </label>
                <input type="radio" name="estado" value="S">Soltero(a)</input>
                <input type="radio" name="estado" value="C">Casado(a)</input>
                <input type="radio" name="estado" value="V">Viudo(a)</input>
            </fieldset>
                        <br>
                        <br>
                        <input type="button" onClick="Mkbtn1()" value="Agregar Numeros">
                        <br>
                        <fieldset id="telefonos"></fieldset>
                        <br>
                        <br>
                        <input type="button" onClick="Mkbtn2()" value="Agregar Correos">
                        <br>
                        <fieldset id="correos"></fieldset>
                        <br>
                        <br>
                        <input type="submit" value="Enviar">
        </fieldset> 
    </form>
        
        <%
        String vfappaterno = request.getParameter("appaterno");
        String vfapmaterno = request.getParameter("apmaterno");
        String vfnombres = request.getParameter("nombres");
        String vffecha = request.getParameter("fecha"); 
        String vfdireccion = request.getParameter("direccion");
        String vfreferencia = request.getParameter("referencia");
        String vfgenero = request.getParameter("genero");
        String vfestado = request.getParameter("estado");
        
        try{
        java.sql.Date vffechac = java.sql.Date.valueOf(vffecha);
        
        grabarProfesores grabando = new grabarProfesores();
        
        grabando.grabarProfes(vfappaterno, vfapmaterno, vfnombres, vffechac, vfdireccion, vfreferencia, vfgenero, vfestado);
        
        out.println("Cadena de texto guardada");
        
        } catch (Exception e){
        
        e.printStackTrace();
        }
        
            
        %>
    </body>
</html>

Obs: espero el post este creado en el grupo correcto, disculpen si no es asi.

Profesor_Falken · #2 (**permalink**) 29/01/2015, 01:40

Buenas,

Los campos creados dinamicamente se envian por formulario de la misma manera que el resto. Lo que pasa es que no les estas dando un nombre:

var txtnumero = document.createElement("input");
txtnumero.setAttribute("type","text");
txtnumero.setAttribute("maxlength",10);
txtnumero.setAttribute("name", "numTelefono");

[...]

var txtcorreo = document.createElement("input");
txtcorreo.setAttribute("type","text");
txtcorreo.setAttribute("maxlength",150);
txtcorreo.setAttribute("name", "dirCorreo");

Luego para recoger los valores:

Código Java:

Ver originalString vfTelefono = request.getParameter("numTelefono");
String vfCorreo = request.getParameter("dirCorreo");

Un saludo

xredesycx · #3 (**permalink**) 29/01/2015, 15:29

Profesor_Falken -- muchas gracias por el dato, es correcto ahora si puedo enviar lo capturado en las cajas de texto creadas utilizando javascript..

Lo que ahora sucede es que como se puede ver en el codigo, el boton crea las caja de texto que yo desee por ejemplo si deseo agregar 5 numeros telefonicos creo 5 cajas de texto ingreso los numeros y despues le doy en enviar.. pero lo que ahi sucede es que solo me graba en la base de datos el numero de la primera caja de texto. E estado revisando la cadena que se manda al servidor por el metodo "get" y veo que todos los numeros se mandan con el mismo nombre de variable por lo cual pienso que por ahi estaria el problema... Alguna sugerencia de como podria manejar esta parte?

xredesycx · #4 (**permalink**) 29/01/2015, 16:49

Cita:

Iniciado por Profesor_Falken

Buenas,

Los campos creados dinamicamente se envian por formulario de la misma manera que el resto. Lo que pasa es que no les estas dando un nombre:

var txtnumero = document.createElement("input");
txtnumero.setAttribute("type","text");
txtnumero.setAttribute("maxlength",10);
txtnumero.setAttribute("name", "numTelefono");

[...]

var txtcorreo = document.createElement("input");
txtcorreo.setAttribute("type","text");
txtcorreo.setAttribute("maxlength",150);
txtcorreo.setAttribute("name", "dirCorreo");

Luego para recoger los valores:

Código Java:

Ver originalString vfTelefono = request.getParameter("numTelefono");
String vfCorreo = request.getParameter("dirCorreo");

Un saludo

Profesor_Falken -- muchas gracias por el dato, es correcto ahora si puedo enviar lo capturado en las cajas de texto creadas utilizando javascript..

Lo que ahora sucede es que como se puede ver en el codigo, el boton crea las caja de texto que yo desee por ejemplo si deseo agregar 5 numeros telefonicos creo 5 cajas de texto ingreso los numeros y despues le doy en enviar.. pero lo que ahi sucede es que solo me graba en la base de datos el numero de la primera caja de texto. E estado revisando la cadena que se manda al servidor por el metodo "get" y veo que todos los numeros se mandan con el mismo nombre de variable por lo cual pienso que por ahi estaria el problema... Alguna sugerencia de como podria manejar esta parte?

Profesor_Falken · #5 (**permalink**) 30/01/2015, 03:02

Buenas,

Lo que te pasa es normal y un problema muy comun (sobre todo cuando se envian datos de tablas). Si envias varias variables con el mismo nombre obviamente solo recogera el valor de la ultima.

Lo normal es que utilices un indice. Deberas crear un campo de formulario "hidden" con el numero de telefonos a enviar y despues nombrar los telefonos de la forma "numTelefono_" + index.

Posteriormente desde Java sera facil recuperar los valores.

Código Java:

Ver originalint numTelefonos  = Integer.parseInt(request.getParameter("numTelefonos"));
String[] telefonos = new String[numTelefonos];
for (int i = 0; i<numTelefonos; i++) {
    telefonos[i] = request.getParameter("numTelefono_" + i);
  [...]    
}
[...]

Un saludo

xredesycx · #6 (**permalink**) 01/02/2015, 21:30

Cita:

Iniciado por Profesor_Falken

Buenas,

Lo que te pasa es normal y un problema muy comun (sobre todo cuando se envian datos de tablas). Si envias varias variables con el mismo nombre obviamente solo recogera el valor de la ultima.

Lo normal es que utilices un indice. Deberas crear un campo de formulario "hidden" con el numero de telefonos a enviar y despues nombrar los telefonos de la forma "numTelefono_" + index.

Posteriormente desde Java sera facil recuperar los valores.

Código Java:

Ver originalint numTelefonos  = Integer.parseInt(request.getParameter("numTelefonos"));
String[] telefonos = new String[numTelefonos];
for (int i = 0; i<numTelefonos; i++) {
    telefonos[i] = request.getParameter("numTelefono_" + i);
  [...]    
}
[...]

Un saludo

Gracias Profe!!.. ahora ya logre implementar la parte del proyecto que estava implementando. Saludos.