Método onsumit de form no funciona

blanesja · #1 (**permalink**) 11/12/2008, 14:52

Hola a otods:

Soy nuevo en javascript y también el el foro asíque perdonadme si es una tontería lo que escribo.

Me pasa lo siguiente, tengo una pagina HTML index con un formulario, que me llama al script .js donde tengo una funcio en la que he creado desde un formulario HTML dinámiamnete con

var form=document.createElement("form")

un menu desplegable select:

var select= document.createElement("select");

y sus correspondientes opiones

var opcion=document.createElement("option");
opcion.setAttribute("value","a");
opcion.innerHTML="A";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","b");
opcion.innerHTML="B";
select.appendChild(opcion);
.....

(hay en total 27 con las letras del alfabeto, es para seleccionar una letra para jugar al ahorcado) y al final del formulario un input:

var input=document.createElement("input");
input.setAttribute("type","submit");
input.setAttribute("value","Seleccionar");

Los añado al form y luego añado el form al body con: document.body.appendChild(form);

El caso es que quiero hacer que una vez se pulsa el boton del input se llame a una funcion de javascrip que tengo mas abajo y que se llama: partida(palabra) que como veis tiene un parámetro. Bueno pues me es imposible que se llame a esa funcion no consigo hacerlo ni con setAttribute("onsubmit","partida(palabra);") ni con addEventListener("submit",palabra,false)) (al que ni siquiera consigo poner el parámetro porque no me acepta lso paréntesis)

El codigo creo que es correcto porque me crea el formulario con el menu deplegable tal y como yo quiero pero al dar al boton me envia a la pagina html index de la que viene.

¿alguien me puede ayudar?Si no es posible lo que estoy intentando por favor decidmelo y lo hago de otra forma pero ya que he tecleado todo el código me gustaría poder hacerlo así, llevo dias enteros buscando una solución en google y no encuentro anda que me funcione. Muchas gracias por adelantado.

Saludos.

blanesja · #2 (**permalink**) 11/12/2008, 14:58

Por cieto también he probado a poner el onclick en el input y me hace lo mismo me envia a la pagina html index. Os pongo los códigos para que veais que os parece. primero el del html idex:

<html>
<head><TITLE>EL AHORCADO</TITLE>
<script type="text/javascript" src="ahorcado.js"></script>
</head>
<body>
<form action="ahorcado.php" method="GET" onsubmit="jugar(); return false">
<table border align="center">
<tr>
<td width="50%" align="right">
Elige tu tema:
</td>
<td width="50%" align="left">
<select name="Tema" id="idTema">
<option value="Peliculas">Peliculas</option>
<option value="Politicos">Politicos</option>
<option value="Grupos_musica">Grupos de musica</option>
<option value="Deportes">Deportes</option>
</select>
</td>
</tr>
<tr>
<td width="50%" align="right">
<input type="submit" value="Seleccionar">
</td>
<td width="50%" align="left">
<input type="reset" value="Borrar">
</td>
</tr>
</table>
</form>
</body>
</html>

Y ahora el del ahorcado.js:

function jugar() {
var input=document.getElementById("idTema");
var tema=input.value;
var politicos=new Array(3);
politicos[0]="Barack Obama";
politicos[1]="Nicolas Sarkozy";
politicos[2]="Jose Luis Rodriguez Zapatero";
var grupos_musica=new Array(3);
grupos_musica[0]="Los Heroes del Silencio";
grupos_musica[1]="Green Day";
grupos_musica[2]="Extremoduro";
var peliculas=new Array(3);
peliculas[0]="La vida es bella";
peliculas[1]="El caballero oscuro";
peliculas[2]="Quantum of Solace";
var deportes=new Array(3);
deportes[0]="futbol";
deportes[1]="baloncesto";
deportes[2]="halterofilia";
var palabra;
switch(tema) {
case "Politicos": palabra=politicos[aleatorio(0,2)];break;
case "Peliculas": palabra=peliculas[aleatorio(0,2)];break;
case "Deportes": palabra=deportes[aleatorio(0,2)];break;
case "Grupos_musica": palabra=grupos_musica[aleatorio(0,2)];break;
}
document.writeln(palabra);
muestraPantalla(palabra);

}

function muestraPantalla(palabra){
var n=palabra.length;
var h1=document.createElement("h1");
h1.setAttribute("align","center");
var s="";
for (var i=0;i < n; i++){
if(palabra[i]==" ") s+=" / ";
else s+=" __ ";
}
h1.innerHTML=s;
document.body.appendChild(h1);
var form=document.createElement("form");
form.setAttribute("action","");
form.setAttribute("method","GET");
form.setAttribute("onsubmit","partida(palabra);");
var select = document.createElement("select");
select.setAttribute("id","letra");
var opcion=document.createElement("option");
opcion.setAttribute("value","a");
opcion.innerHTML="A";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","b");
opcion.innerHTML="B";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","c");
opcion.innerHTML="C";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","d");
opcion.innerHTML="D";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","e");
opcion.innerHTML="E";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","f");
opcion.innerHTML="F";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","g");
opcion.innerHTML="G";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","h");
opcion.innerHTML="H";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","i");
opcion.innerHTML="I";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","j");
opcion.innerHTML="J";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","k");
opcion.innerHTML="K";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","l");
opcion.innerHTML="L";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","m");
opcion.innerHTML="M";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","n");
opcion.innerHTML="N";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","ñ");
opcion.innerHTML="Ñ";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","o");
opcion.innerHTML="O";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","p");
opcion.innerHTML="P";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","q");
opcion.innerHTML="Q";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","r");
opcion.innerHTML="R";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","s");
opcion.innerHTML="S";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","t");
opcion.innerHTML="T";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","u");
opcion.innerHTML="U";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","v");
opcion.innerHTML="V";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","w");
opcion.innerHTML="W";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","x");
opcion.innerHTML="X";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","y");
opcion.innerHTML="Y";
select.appendChild(opcion);
opcion=document.createElement("option");
opcion.setAttribute("value","z");
opcion.innerHTML="Z";
select.appendChild(opcion);
form.appendChild(select);
var input=document.createElement("input");
input.setAttribute("type","submit");
input.setAttribute("value","Seleccionar");
form.appendChild(input);
document.body.appendChild(form);
}

function partida() {
var l= document.getElementById("Letra");
var letra=l.input;
document.writeln(letra);
//document.writeln(palabra);
//muestraPantalla(palabra);
}

function aleatorio(inferior,superior){
numPosibilidades = superior - inferior
aleat = Math.random() * numPosibilidades
aleat = Math.round(aleat)
return parseInt(inferior) + aleat
}

buzu · #3 (**permalink**) 11/12/2008, 18:13

prueva añadiendo
form.onsubmit = function(){ jugar(//aqui pones los parametros)};
Cuando creas tu formulario, antes de agregarlo al body.

JavierB · #4 (**permalink**) 12/12/2008, 03:34

Hola blanesja

En la parte donde creas las opciones del select podrías reducir el código poniéndolo así:

Código javascript:

Ver originalvar valores='abcdefh';
  select = document.createElement('select');
  for (i=0; i<valores.length; i++) {
    option = document.createElement('option');
    option.value=valores.substr(i,1);
    option.innerHTML=valores.substr(i,1).toUpperCase();
    select.appendChild(option);
  }

Saludos,

buzu · #5 (**permalink**) 12/12/2008, 13:20

Si, a mi se me ocurrió tambien, pero como no era su pregunta ni lo mencioné. De cualquier modo es muy bueno que lo menciones javierB, porque gran parte de el codigo solo agrega las opciones.

blanesja · #6 (**permalink**) 15/12/2008, 16:42

Muchas gracias a los dos por responderme. Y también por el código del for, la verdad es que se me ocurrió que podía poner algo así pero no se me ocurría muy bien como y no me compliqué mucho jejeje.

En cuento a mi problema sigo sin poder resolverlo, creo que tal vez tenga algo que ver el tema de que viene de una página html con un form que ya tiene un onsubmit y al crear otro dinámicamente con el javascript no me lo hace porque se confunde con el primero, es lo único que se me ocurre porque he probado todos los códigos habidos y por haber para añadir la propiedad onsubmit y no consigo nada.

Pero gracias de todas formas, si se os ocurre algo más, decidmelo, pro intentarlo que no quede.