Dispongo de un select
con cuatro opciones, puedo elegir las que quiera, al pulsar el button
"enviar" se debe enviar el texto de las opciones seleccionadas a una div
.
Éste es mi código:
//Función que crea una caja con los datos del resumen. Se debe crear usando DOM.
function crearCajaResumen() {
//Creamos el elemento/objeto que deseamos, sea <p> o <div> o <form>, etc.
var div = document.createElement("div");
//DIV tiene la propiedad style, la cual permite acceder a atributos CSS. Ejemplo: div.style.width = "280px"; ...
div.setAttribute("style", "width: 280px; height: 170px; background-color: #FE775A; float: left;");
//Guardamos en una variable el elemento/objeto que deseamos, <body>
//var variable = document.getElementsByTagName("etiqueta")[posicion];
var body = document.getElementsByTagName("body")[0];
//Añadimos al documento body un hijo llamado "div".
document.body.appendChild(div);
//Guardamos en una variable el elemento/objeto que deseamos, <center>
var center = document.getElementsByTagName("center")[0];
//Insertamos el elemento "div" antes que el "center".
body.insertBefore(div, center);
//Creamos un nodo de texto que agregaremos al div.
var titulo = document.createTextNode("DATOS RESUMEN FORMULARIO:\n\n");
//Añade un nuevo nodo al final de la lista.
div.appendChild(titulo);
//Creamos un nodo de texto que agregamos al div.
var contar = document.createTextNode("Has seleccionado " + contar_seleccionados() + " elementos.");
div.appendChild(contar);
}
var texto_opciones = ["Analisis y programacion", "Hardware, redes y seguridad", "Administracion de bases de datos", "Telecomunicaciones"];
var textos_seleccionados = "";
//Función que cuenta los checkboxs seleccionados (marcados).
function contar_seleccionados() {
//Guardamos en una variable los checkboxs (un array) del elemento <form> con la propiedad checkbox.
var checkboxs = document.getElementById("miformulario").getElementsByName("prefe");
var contador = 0;
//Recorremos el array y guardamos en una variable los checkboxs seleccionados.
for (var i = 0; i < checkboxs.length; i++) {
if (checkboxs[i].checked) {
contador = contador + 1;
textos_seleccionados = textos_seleccionados + texto_opciones[i] + "<br/>";
}//Cerramos el for para que me acepte la correcion
}
console.log(textos_seleccionados);
console.log(contador);
return contador;
}
// **Manejo de eventos "onclick" y métodos enviar.**
miformulario.btnEnviar.addEventListener("click", function() {
return confirmEnviar();
}, false);
function confirmEnviar() {
var pregunta = confirm("¿Deseas enviar el formulario?");
if (pregunta == true) {
deshabilitar_btnEnviar();
} else {
//No hacer nada.
event.preventDefault();
}
}
function deshabilitar_btnEnviar() {
miformulario.btnEnviar.disabled = true;
miformulario.btnEnviar.value = "Enviando...";
setTimeout(function() {
miformulario.btnEnviar.disabled = false;
miformulario.btnEnviar.value = "Enviar";
//Llamada a la función crearCajaResumen();
crearCajaResumen();
}, 3000);
return false;
}
<form id="miformulario">
<table>
<tr>
<td align=left colspan=4> <u>Selecciona tus Preferencias:</u></td>
</tr>
<tr>
<td align=right></td>
<td align=left><input type="checkbox" name="prefe" value="si" colspan=3>Analisis y programacion</td>
</tr>
<tr>
<td align=right></td>
<td align=left><input type="checkbox" name="prefe" value="si" colspan=3>Hardware, redes y seguridad</td>
</tr>
<tr>
<td align=right></td>
<td align=left><input type="checkbox" name="prefe" value="si" colspan=3>Administracion de bases de datos</td>
</tr>
<tr>
<td align=right></td>
<td align=left><input type="checkbox" name="prefe" value="si" colspan=3>Telecomunicaciones</td>
</tr>
</table>
<input type="button" id="btnEnviar" value="Enviar" />
</form>
¿Por qué me selecciona bien las opciones marcadas pero no se muestran los textos?
Y éste el error por consola:
funciones.js:446
undefined<br/>undefined<br/>undefined<br/>undefined<br/>
funciones.js:447 4
setTimeout
), puede darse el caso de que las opciones seleccionadas no coincidan entre el momento que se da al botón y el momento en el que se ejecuta el código.