submit en javascript

sowa · #1 (**permalink**) 03/01/2008, 17:27

Buenas, Soy nuevo en JavaScript y me gustaria realizar un cambio en mi web, la idea es quitar lo que cito abajo y poner un "submit en javascript"

asi tengo el form :

Código:

<form id="form2" name="form2" method="post" action="derecha.php">

y aqui esta el boton:

Código:

<td width="31%"><input type="submit" name="button2" id="button2" value="Submit" style="height:19px; width:44px; filter: alpha(opacity=0); cursor:pointer;" /></td>

y algo asi que me gustaria tener:

Código:

<td width="31%" onclick="Submit'></td>

no se como realizar un submite desde javascript para que los datos del formulario si envie correctamente como ahora, lo unico que tenfo que seguir es que " si alguien clicar dentro del espacio de las <td> que se envie el formulario.
espero que he sido algo de claro en lo que necesito
gracias

posman · #2 (**permalink**) 03/01/2008, 17:50

prueba con esto

<td width="31%" onclick="document.forms[0].submit();">Click aqui</td>

El_Metallick · #3 (**permalink**) 03/01/2008, 18:17

Cita:

Iniciado por posman

prueba con esto

<td width="31%" onclick="document.forms[0].submit();">Click aqui</td>

eso siempre y cuando sea el único formulario de tu página.

saludos

derkenuke · #4 (**permalink**) 03/01/2008, 19:41

Creo que hay que tener en cuenta la accesibilidad: No se puede eliminar el imprescindible botón de submit de un formulario a la ligera.

Una "solución" podría ser ésta:

Código PHP:

  <form name="fr" method="post" action=""> 
    <table style="border-collapse: collapse" border="1"> 
        <tr> 
            <td><input type="text" name="wo" value="a" /></td> 
            <td><input type="text" name="wi" value="e" /></td> 
        </tr> 
        <tr> 
            <td><input type="text" name="wa" value="i" /></td> 
            <td><input type="text" name="wu" value="o" /></td> 
        </tr> 
        <tr> 
            <td><button type="reset">RESET</button></td> 
            <td id="celdaReset"><button type="submit">SUBMIT</button></td> 
        </tr> 
    </table> 
</form> 
 
 
<script type="text/javascript"> 
<!-- 
 
var cR = document.getElementById("celdaReset"); 
var hijoBoton = cR.getElementsByTagName("button")[0]; 
var formulario = hijoBoton.form; 
cR.onclick = function() { 
    formulario.submit(); 
} 
cR.removeChild(hijoBoton); 
 
// --> 
</script>

Es decir, quitar el botón sólo si se tiene javascript, detectando para qué formulario sirve.

Aunque algo habría que poner en la celda ¿no?

Un saludo.

sowa · #5 (**permalink**) 04/01/2008, 04:21

en la misma pagina tiene 3 formulario ( 1 de newsletter, 1 de contacto, 1 de busqueda) a mi me gustaria poner algo sencillo como lo que se fue presentado:
<td width="31%" onclick="document.forms[0].submit();">Click aqui</td>
no he probado pero si es cierto lo que dijo derkenuke de que no funcionaria por tener mas de 1 formulario. pero si pongo asi:
<td width="31%" onclick="document.form2.submit();">Click aqui</td>
asi estamos diciendole que busque algo con el name form2 en el documento.
estare realizando una prueba con los "ojos cerrado para ver" la function me parece mas correcta pero estaria bien no necesitarnos hacer una funcion solo para llamar un submit..
jeje
igualmente Gracias

derkenuke · #6 (**permalink**) 04/01/2008, 08:15

No no, si yo no digo que lo que escribas está mal cuando tienes más de un formulario; digo que no es accesible si tienes javascript desactivado (luego no recomendable). Lo de tener 3 formularios es trivial, se salva como se puede y punto, no añade complejidad.

No entiendo el script. ¿Por qué no poner un botón? Si luego quieres darle apariencia de texto con CSS, y hacer que ocupe el 100% del ancho del elemento padre (la celda), ya es otra cosa.

Algo así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" /> 
<meta name="Author" content="derkeNuke" /> 
<title>Página nueva</title> 
<style type="text/css"> 
#btnSubmit { 
    background-color:transparent; 
    border: none; 
    width: 100%; 
    text-align: left; 
} 
</style> 
</head> 
 
<body> 
 
 
<form name="fr" method="post" action=""> 
    <table style="border-collapse: collapse" border="1"> 
        <tr> 
            <td><input type="text" name="wo" value="a" /></td> 
            <td><input type="text" name="wi" value="e" /></td> 
        </tr> 
        <tr> 
            <td><input type="text" name="wa" value="i" /></td> 
            <td><input type="text" name="wu" value="o" /></td> 
        </tr> 
        <tr> 
            <td><button type="reset">RESET</button></td> 
            <td><button type="submit" id="btnSubmit">SUBMIT</button></td> 
        </tr> 
    </table> 
</form>  
 
 
</body> 
</html>

Te ahorrarás problemas.

Saludos.

sowa · #7 (**permalink**) 04/01/2008, 09:13

hay un boton en modo invisible ( "><input type="submit" name="button2" id="button2" value="Submit" style="height:19px; width:44px; filter: alpha(opacity=0); cursor:pointer;" />)
lo que quiero es quitar el boton y poner en javascript
¿ porque quiero quitar ?
- Porque cuando abro la pagina con FIREFOX si ve el boton, por eso prefiero poner que se realice el submit del formulario cuando alguien clica dentro de las <td>
( el formulario que me indicaste es lo mismo que tengo si te fijas veras
saludos y gracias.

derkenuke · #8 (**permalink**) 04/01/2008, 10:25

Hola sowa:

Cita:

Iniciado por sowa

el formulario que me indicaste es lo mismo que tengo si te fijas veras

Ah, Lo siento, no había entendido lo del filter: alpha(opacity=0), es que de códigos propietarios de IE poco me manejo... En Firefox no se ve el efecto, como tú dices, porque ese código no es estándar (esta mal, para que nos entendamos). Pero es que tampoco se verá en Opera, ni en Safari, ni en muchos otros navegadores...

Insisto en que tu código y el mío difieren muchísimo, pero bueno, si te empeñas en no ver la diferencia no puedo hacer nada más por ti.

Cita:

Iniciado por sowa

lo que quiero es quitar el boton y poner en javascript

Cita:

Iniciado por derkenuke

No se puede eliminar el imprescindible botón de submit de un formulario a la ligera.

Saludos.

sowa · #9 (**permalink**) 05/01/2008, 12:42

perdon, creo que no he sido muy claro pero ya encontre lo que buscava.
la idea era quitar eso: filter: alpha(opacity=0) . porque como ya sabes en firefox, safari etc no se ve el efecto.
ahora he puesto asi:
<td width="31%" onclick="javascript:form4.submit()" style="cursor:pointer;"></td>
y arreglado, asi me parece perfecto

Gracias y un saludo

ansonmola · #10 (**permalink**) 15/05/2009, 04:52

Hola,
Es mi primera participación y no se cómo hacer para iniciar un tema, así que lanzo aquí mi pregunta, he localizado la discusión buscando sobre accesibilidad) y ya me orientareis sino es adecuado haberla enviado aquí.

Tengo un problema de accesibilidad con el evento onclick() de Javascript, el test hera (www sidar org/hera) me da lo siguiente:

incorrecto Punto 6.4 - Resultado: incorrecto
Para los scripts y applets, asegúrese de que la ejecución de los manejadores de evento sea independiente del tipo de dispositivo. (Este punto incluye el 9.3). (Prioridad 2)
incorrecto Manejadores de evento: Se utilizan eventos dependientes del dispositivo y no existen eventos redundantes.
* Instrucciones:
Los eventos deben poder activarse de igual forma con el ratón que con el teclado. Por tanto debe haber manejadores de evento independientes del tipo de dispositivo ("onfocus", "onblur", "onselect") o redundantes para el tipo de dispositivo (si se indica "Onmousedown" debe indicarse también "Onkeydown", si "onmouseup" también "onkeyup", si "onclick" también "onkeypress").

incorrecto Punto 9.3 - Resultado: incorrecto
Para los scripts, especifique manejadores de evento lógicos en vez de manejadores de evento dependientes del dispositivo. (Prioridad 2)
incorrecto Manejadores de evento: Se utilizan eventos dependientes del dispositivo.
* Instrucciones:
Se destacan los elementos que responde a eventos dependientes del dispositivo, aquellos que resultan independientes del dispositivo y los que no pueden ser emulados a través del teclado. Deberían utilizarse siempre manejadores de evento lógicos.

El código de la parte con problemas es un input en un formulario:

<input type="button" value="Buscar" onClick='submit();'>

¿Sabeis que puedo hacer, añadirle, para solucionarlo?
Muchas gracias
M.A.

JavierB · #11 (**permalink**) 15/05/2009, 05:07

El mensaje original es de hace más de 1 año. Por favor, no reviváis temas tan antiguos.

Saludos,