Foros del Web » Programando para Internet » Javascript »

añadir/borrar elementos de una lista

Estas en el tema de añadir/borrar elementos de una lista en el foro de Javascript en Foros del Web. Hola Tengo un formulario donde pido los datos personales de un alumno, y dentro de él, dos formularios para pedir telefonos y faxes. Para pedirlos ...
  #1 (permalink)  
Antiguo 29/08/2008, 02:41
Avatar de morenita7722  
Fecha de Ingreso: enero-2007
Ubicación: aquí, ¿donde sino?
Mensajes: 261
Antigüedad: 17 años, 3 meses
Puntos: 1
añadir/borrar elementos de una lista

Hola
Tengo un formulario donde pido los datos personales de un alumno, y dentro de él, dos formularios para pedir telefonos y faxes. Para pedirlos hay una lista en la que se ven los elementos que vamos añadiendo, con posibilidad de poner o quitar otro. El problema es el siguiente: si tengo solo el formulario de los telefonos funciona bien, pero cuando pongo el otro formulario para los faxes los botones no hacen nada. Dejo la parte del código que hace referencia eso.

trozo de formulario principal donde pido telefonos y faxes:

<tr>
<td><label for="telefonos">Teléfonos:</label>
<form name="form">
<select name="telefonos" size="7" >
</select>
<input type="button" value="Añadir" onClick="addT()">
<input type="button" value="Borrar" onClick="delT()">
</form>
</td>

<td><label for="faxes">Faxes:</label>
<form name="form1">
<select name="faxes" size="10" >
<option></option>
</select>

<input type="button" value="Añadir" onClick="addF()">
<input type="button" value="Borrar" onClick="delF()">
</form>
</td>

</tr>


y la parte de javaScript:

//función para añadir telefonos a la lista
function addT() {
var newitem=prompt("Añadir teléfono:");
document.form.telefonos[document.form.telefonos.length] = new Option(newitem, document.form.telefonos.length);
}

//función para borrar telefonos de la lista
function delT() {
if (document.form.telefonos.selectedIndex >= 0) {
document.form.telefonos.options[document.form.telefonos.selectedIndex]=null;
document.form.telefonos.selectedIndex=0;
}

//función para añadir faxes a la lista
function addF() {
var newitem=prompt("Añadir fax:");
document.form1.faxes[document.form1.faxes.length] = new Option(newitem, document.form1.faxes.length);
}

//función para borrar faxes de la lista
function delF() {
if (document.form1.faxes.selectedIndex >= 0) {
document.form1.faxes.options[document.form1.faxes.selectedIndex]=null;
document.form1.faxes.selectedIndex=0;
}

Saludos!
  #2 (permalink)  
Antiguo 29/08/2008, 04:15
 
Fecha de Ingreso: agosto-2008
Mensajes: 32
Antigüedad: 15 años, 8 meses
Puntos: 1
Respuesta: añadir/borrar elementos de una lista

Acabo de probarlo y funciona todo correctamente... eso sí, tienes errores de sintaxis, concretamente te falta la llave de cierre de los métodos del. Las que tienes puestas son de las sentencias if...

Saludos.
  #3 (permalink)  
Antiguo 29/08/2008, 04:27
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 6 meses
Puntos: 45
Respuesta: añadir/borrar elementos de una lista

Hola morenita7722:

A mi también me funciona con la corrección que ha comentado Wyatt_2009 en IE6 y FF3. En el select de faxes hay una opción vacía en el código HTML que no sé si te interesa.

Un consejo, prohibido maquetar con tablas. formularios+css


Saludos.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #4 (permalink)  
Antiguo 29/08/2008, 04:30
Avatar de colote  
Fecha de Ingreso: julio-2008
Ubicación: Rosario - Santa Fe - Argentina
Mensajes: 729
Antigüedad: 15 años, 10 meses
Puntos: 8
Respuesta: añadir/borrar elementos de una lista

@derkenuke : Perdon que me meta, pero a que te referis con maquetar tablas ?

Saludos
__________________
Mail: [email protected]
  #5 (permalink)  
Antiguo 29/08/2008, 05:19
Avatar de morenita7722  
Fecha de Ingreso: enero-2007
Ubicación: aquí, ¿donde sino?
Mensajes: 261
Antigüedad: 17 años, 3 meses
Puntos: 1
Respuesta: añadir/borrar elementos de una lista

Muchas gracias por la ayuda, a pesar de tener el error de sintaxis sigue sin funcionarme, debo de tener algo más. Voy a pasar todo el código de la página jsp para que lo probeis y así me comentais si hay algo más. (Lo siento por maquetar con tablas, estoy empezando y tendré vuestros consejos muy en cuenta)

Ahí va:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ include file="taglibs.jsp" %>

<sql:setDataSource
var="datasource"
driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://10.0.1.26:3306/gesta"
user=""
password="" />

<sql:query var="empresas" dataSource="${datasource}">
select * from empresa
</sql:query>

<sql:query var="cursos" dataSource="${datasource}">
select * from curso
</sql:query>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>NUEVO ALUMNO</title>


<script language="Javascript">

// función para validar los datos del formulario

function validar(formulario){
var correcto=true;
var mensaje="";
if (formulario.operacion.value=="GUARDAR"){
if (isNaN(formulario.horasAsistenciaReal.value)){
formulario.horasAsistenciaReal.focus();
mensaje="El valor de las horas de asistencia real debe ser numérico";
correcto=false;
}

if (formulario.DNI.value==""){
mensaje="El DNI no puede estar vacío";
formulario.DNI.focus();
correcto=false;
}
if (!correcto)alert(mensaje);

return correcto;
}
}

//función para añadir telefonos a la lista
function addT() {
var newitem=prompt("Añadir teléfono:");
document.form.telefonos[document.form.telefonos.length] = new Option(newitem, document.form.telefonos.length);
}

//función para borrar telefonos de la lista
function delT() {
if (document.form.telefonos.selectedIndex >= 0) {
document.form.telefonos.options[document.form.telefonos.selectedIndex]=null;
document.form.telefonos.selectedIndex=0;
}
}

//función para añadir faxes a la lista
function addF() {
var newitem=prompt("Añadir fax:");
document.form1.faxes[document.form1.faxes.length] = new Option(newitem, document.form1.faxes.length);
}

//función para borrar faxes de la lista
function delF() {
if (document.form1.faxes.selectedIndex >= 0) {
document.form1.faxes.options[document.form1.faxes.selectedIndex]=null;
document.form1.faxes.selectedIndex=0;
}
}

//función para añadir emails a la lista
function addE() {
var newitem=prompt("Añadir email:");
document.form2.emails[document.form2.emails.length] = new Option(newitem, document.form2.emails.length);
}

//función para borrar emails de la lista
function delE() {
if (document.form2.emails.selectedIndex >= 0) {
document.form2.emails.options[document.form2.emails.selectedIndex]=null;
document.form2.emails.selectedIndex=0;
}
}

//funciones para cambiar la lista de valores de estudios

function addOpt(oCntrl, iPos, sTxt, sVal){
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);
}

function cambia(oCntrl){
while (oCntrl.length) oCntrl.remove(0);
switch (document.frm.categoriaEstudios.selectedIndex){
case 0:
addOpt(oCntrl, 0, "EGB", "0");
addOpt(oCntrl, 1, "ESO", "1");
addOpt(oCntrl, 2, "Graduado escolar", "2");
break;
case 1:
addOpt(oCntrl, 0, "FP1", "0");
addOpt(oCntrl, 1, "FP2", "1");
addOpt(oCntrl, 2, "F.P.G. Medio", "2");
addOpt(oCntrl, 3, "F.P.G. Superior", "3");
addOpt(oCntrl, 4, "BACHIL Elemental", "4");
addOpt(oCntrl, 5, "BUP", "5");
addOpt(oCntrl, 6, "1º BACHILL LOGSE", "6");
addOpt(oCntrl, 7, "2º BACHILL LOGSE", "7");
addOpt(oCntrl, 8, "COU", "8");
break;
case 2:
addOpt(oCntrl, 0, "Diplomatura", "0");
addOpt(oCntrl, 1, "Licencitura", "1");
addOpt(oCntrl, 2, "E.U. 1º ciclo", "2");
addOpt(oCntrl, 3, "E.U. 2º ciclo", "3");
addOpt(oCntrl, 4, "E.U. 3º ciclo", "4");
break;
}
}




}

</script>
</head>

<body>
<form action="alumnos.do" onsubmit="return validar(this)">
<table>
<tr>
<td><label for="DNI">DNI:</label>
<input type="text" name="DNI" size="20" />
</td>

<td><label for="nombre">Nombre:</label>
<input type="text" name="nombre" size="30" />
</td>
</tr>

<tr>
<td><label for="apellido1">Primer apellido:</label>
<input type="text" name="apellido1" size="25" />
</td>

<td><label for="apellido2">Segundo apellido:</label>
<input type="text" name="apellido2" size="25" />
</td>
</tr>

<tr>
<td>
<label for="sexo">Sexo:</label>
<br>
<input type="radio" name="sexo" value="mujer" checked="checked">Mujer
<br>
<input type="radio" name="sexo" value="hombre">Hombre
</td>

</tr>

<tr>
<td><label for="estudios">Estudios:</label>
<form name="frm">
<table border="0">
<tr>
<td>
Categoría
</td>
<td>
<select name="categoriaEstudios" onchange="cambia(document.frm.subcategoriaEstudios )">
<option value="primarios">Estudios Primarios</option>
<option value="secundarios">Estudios Secundarios</option>
<option value="universitarios">Estudios Universitarios</option>
</select>
</td>
<td>
Subcategoría
</td>
<td>
<select name="subcategoriaEstudios">
<option value="0">EGB</option>
<option value="1">ESO</option>
<option value="2">Graduado Escolar</option>
</select>
</td>
</tr>
</table>
</form>
</td>
</tr>

<tr>
<td colspan="4"><label for="tipoColectivo">Tipo de colectivo:</label>
<br>
<input type="checkbox" name="tipoColectivo" value="Menor de 25 años sin empleo fijo (indefinido)">Menor de 25 años sin empleo fijo (indefinido)
<br>
<input type="checkbox" name="tipoColectivo" value="Trabajador reincorporado a vida laboral, tras una interrupción de 3 años, como mínimo">Trabajador reincorporado a vida laboral, tras una interrupción de 3 años, como mínimo
<br>
<input type="checkbox" name="tipoColectivo" value="Trabajador en paro"> En paro
<br>
<input type="checkbox" name="tipoColectivo" value="Trabajador mayor de 45 años">Trabajador mayor de 45 años
<br>
<input type="checkbox" name="tipoColectivo" value="Otra situación" checked="checked">Otra situación
</td>
</tr>

<tr>
<td><label for="certificacion">Certificación:</label>
<input type="text" name="certificacion" size="15" />
</td>

<td><label for="horasAsistenciaReal">Horas de asistencia real:</label>
<input type="text" name="horasAsistenciaReal" size="15" />
</td>
</tr>

<tr>
<td><label for="tipoContrato">Tipo de contrato:</label>
<br>
<input type="radio" name="tipoContrato" value="Temporal">Temporal
<br>
<input type="radio" name="tipoContrato" value="Indefinido">Indefinido
<br>
<input type="radio" name="tipoContrato" value="Autónomo">Autónomo
<br>
<input type="radio" name="tipoContrato" value="Otros" checked="checked">Otros
</td>
</tr>
<tr>

<td><label for="experienciaLaboral">Experiencia laboral:</label>
<textarea name="experienciaLaboral" rows="10" cols="30">Indique profesión y duración...</textarea>
</td>

<td><label for="formacionComplementaria">Formacion complementaria:</label>
<textarea name="formacionComplementaria" rows="10" cols="30"></textarea>
</td>
</tr>

<tr>
<td><label for="telefonos">Teléfonos:</label>
<form name="form">
<select name="telefonos" size="7" >
</select>
<input type="button" value="Añadir" onClick="addT()">
<input type="button" value="Borrar" onClick="delT()">
</form>
</td>

<td><label for="faxes">Faxes:</label>
<form name="form1">
<select name="faxes" size="7" >
<option></option>
</select>

<input type="button" value="Añadir" onClick="addF()">
<input type="button" value="Borrar" onClick="delF()">
</form>
</td>

<td><label for="emails">Emails:</label>
<form name="form2">
<select name="emails" size="7" >
<option></option>
</select>

<input type="button" value="Añadir" onClick="addE()">
<input type="button" value="Borrar" onClick="delE()">
</form>
</td>
</tr>

<tr>
<td><label for="codigo">Curso:</label>
<select name="codigo" size="1">
<c:forEach items="${cursos.rows}" var="curso">
<option value="${curso.codigo}">${curso.nombre}</option>
</c:forEach>
</select>
</td>

<td><label for="CIF">Empresa:</label>
<select name="CIF" size="1">
<c:forEach items="${empresas.rows}" var="empresa">
<option value="${empresa.CIF}">${empresa.nombre}</option>
</c:forEach>
<option value="Otra">Otra</option>
</select>
</td>
</tr>

<tr>
<td><input type="submit" name="operacion" value="CANCELAR" /></td>
<td><input type="submit" name="operacion" value="GUARDAR" /></td>
<td><input type="reset" name="limpiar" value="LIMPIAR FORMULARIO" /></td>
</tr>
</table>
</form>
</body>
</html>




Por cierto, la lista de los estudios tampoco cambia en función de los estudios que eliges.
Saludos!!
  #6 (permalink)  
Antiguo 29/08/2008, 05:25
Avatar de morenita7722  
Fecha de Ingreso: enero-2007
Ubicación: aquí, ¿donde sino?
Mensajes: 261
Antigüedad: 17 años, 3 meses
Puntos: 1
Respuesta: añadir/borrar elementos de una lista

Lo de los telefonos, faxes y emails ya está!!! un paréntesis de más, jeje
Ahora falta lo de la lista de los estudios
  #7 (permalink)  
Antiguo 29/08/2008, 07:44
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 6 meses
Puntos: 45
Respuesta: añadir/borrar elementos de una lista

@colote: Maquetar es una expresión para posicionar los elementos en el documento. Se refiere a no mezclar elementos HTML (estructurales) con elementos de estilo y estéticos (CSS). Sobre por qué no utilizar tablas está todo dicho.

morenita7722, veo un form dentro de otro form, un ejemplo ilegal (fíjate en que admite como hijos elementos (%block;|SCRIPT)+ -(FORM), dejando muy claro el -FORM ).

Así la referencia por javascript a document.frm da undefined, y no se pueden hallar las propiedades de ese formulario. Tendrás que arreglar el HTML antes de trabajar con el javascript.

Después todo debería funcionar como se espera.



Saludos.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #8 (permalink)  
Antiguo 29/08/2008, 08:08
Avatar de colote  
Fecha de Ingreso: julio-2008
Ubicación: Rosario - Santa Fe - Argentina
Mensajes: 729
Antigüedad: 15 años, 10 meses
Puntos: 8
Respuesta: añadir/borrar elementos de una lista

ok gracias derkenuke
__________________
Mail: [email protected]
  #9 (permalink)  
Antiguo 01/09/2008, 00:58
Avatar de morenita7722  
Fecha de Ingreso: enero-2007
Ubicación: aquí, ¿donde sino?
Mensajes: 261
Antigüedad: 17 años, 3 meses
Puntos: 1
Respuesta: añadir/borrar elementos de una lista

Gracias derkenuke!! Cambié un poco el código antes de ver tu mensaje, pero el fallo era ese, un form dentro de otro form, al final lo dejé así por si a alguien le sirve en un futuro:

en la parte de javascript:

var Primarios = new Array("Seleccione...", "EGB", "ESO", "Estudios primarios");
var PrimariosX = new Array("", "0", "1", "2");
var Secundarios = new Array("Seleccione...", "FP1", "FP2", "F.P.G. Medio", "F.P.G. Superior", "BACHIL Elemental", "B.U.P.", "1º BACHILL. LOGSE", "2º BACHILL. LOGSE", "COU");
var SecundariosX = new Array("", "0", "1", "2", "3", "4", "5" , "6", "7", "8");
var Universitarios = new Array("Seleccione...", "Diplomatura", "Licenciatura", "E.U. 1º ciclo", "E.U. 2º ciclo", "E.U. 3º ciclo");
var UniversitariosX = new Array("", "0", "1", "2", "3", "4");

function haceCambio(que_array, que_valores)
{
var el_array = eval(que_array);
var los_valores = eval(que_valores);
cambiarDatos(document.estudios.subcategoriaEstudio s, el_array, los_valores);
document.estudios.subcategoriaEstudios.selectedInd ex=0;
}

function cambiarDatos(elCampo, el_array, los_valores)
{
elCampo.options.length = el_array.length;
for (loop=0; loop < el_array.length; loop++)
{
elCampo.options[loop].text = el_array[loop];
elCampo.options[loop].value = los_valores[loop];
}
}


en la parte html:


<form name="estudios">
<label for="estudios">Estudios:</label>
Categoria estudios:
<select name="categoriaEstudios" size="1" onChange="haceCambio(document.estudios.categoriaEs tudios.options[selectedIndex].text, document.estudios.categoriaEstudios.options[selectedIndex].value);">
<option value="PrimariosX">Primarios</option>
<option value="SecundariosX">Secundarios</option>
<option value="UniversitariosX">Universitarios</option>
</select>
Subcategoria estudios
<select name="subcategoriaEstudios" size="1">
<option value="Seleccione..." selected>Seleccione...</option>
<option value="0">EGB</option>
<option value="1">ESO</option>
<option value="2">Estudios primarios</option>
</select>
</form>


Saludos!!
  #10 (permalink)  
Antiguo 01/09/2008, 02:08
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 6 meses
Puntos: 45
Respuesta: añadir/borrar elementos de una lista

De nada, me alegro de que lo resolvieras

Y recuerda echar un vistazo a la especificación de vez en cuando.

Saludos
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:38.