Error en document.forms['1'].submit();

SrTrp · 24 Septiembre 2017, 04:13 AM

Se supone que debe ejecutar el form de id 1 pero no, dice que no es una función el document.forms.1.submit .

Código (html4strict) [Seleccionar]


   <img width="100" height="100" onclick="document.forms['1'].submit();" src="/imgs/web/Cp.png"/>

**Aincrad** · 24 Septiembre 2017, 04:34 AM

Aquí tienes, mas fácil imposible.

HTML:

Código (html) [Seleccionar]


<html>
<head>
/////////////////////////////////////////////////////////
//tu formulario. By **Aincrad6**
/////////////////////////////////////////////////////////
<form id="formu" style="display: none;">
...
.....
......
</form>
/////////////////////////////////////////////////////////
//el js para mostrar el formulario
/////////////////////////////////////////////////////////
<script language="text/javascript">
function mostrar(){
var formulario = document.getElementById('formu');
formulario.style.display = block;
}
</script>
/////////////////////////////////////////////////////////
//el boton
/////////////////////////////////////////////////////////
</head>
<input type="button" onclick="mostrar();" />
</html>

Comenta si te sirvio

SrTrp · 24 Septiembre 2017, 04:48 AM

Sigue sin funcionar, trate de poner mi ejecucion en la función pero no..

**Aincrad** · 24 Septiembre 2017, 04:59 AM

Cita de: SrTrp en 24 Septiembre 2017, 04:48 AM
Sigue sin funcionar, trate de poner mi ejecucion en la función pero no..

Prueba el la parte del js:

Código (javascript) [Seleccionar]


<script language="text/javascript">
function mostrar (idFormulario){
        document.forms[idFormulario].submit();
}
</script>

Comenta

SrTrp · 24 Septiembre 2017, 16:48 PM

Ahora me dice que no esta definida :S.
Uncaught ReferenceError: mostrar is not defined
at HTMLImageElement.onclick

SrTrp · 24 Septiembre 2017, 17:10 PM

Ya lo solucione, tenia que quitar lo botenes submit de los formularios ya que con ellos lo detectaba como una función.

#!drvy · 24 Septiembre 2017, 17:14 PM

el document.forms representa una colección de elementos (objeto) representado por un index (numero asociativo). No puedes pedirle un ID de forma directa ya que no lo reconocería. En cambio, si puede reconocer un nombre y como he mencionado, un index.

Por otro lado, muchos se siguen rigiendo por la regla establecida en HTML4 en la que se dicta que un ID no puede empezar por un numero (debe empezar forzosamente por una letra [a-z]). A pesar de que HTML5 lo permite, tanto javascript como CSS pueden tener dificultades interpretandolo.

Puedes hacerlo de múltiples maneras:

Código (html5) [Seleccionar]

<form id='prueba' name='hola' action='https://yahoo.com'></form>

<form id='test' name='adios' action='https://google.com'></form>

Supongamos que tenemos esos dos formularios en todo el documento. Para activar el primero, usaria el index 0 y para activar el segundo activaria el index 1. 0, 1, 2, 3....

Código (html5) [Seleccionar]


<!-- Esto activa el formulario con ID test que es el numero 2 (1) en el documento. -->
<img width="100" height="100" onclick="document.forms[1].submit();" src="/imgs/web/Cp.png"/>

También puedes activarlos por nombre (el atributo name en el formulario)

Código (html5) [Seleccionar]


<!-- Esto activa el formulario con nombre adios y ID test -->
<img width="100" height="100" onclick="document.forms['adios'].submit();" src="/imgs/web/Cp.png"/>

Recuerda, NUMERO ASOCIATIVO Y NOMBRE, NO ID.

Siendo tal, para activarlo por ID

Código (html5) [Seleccionar]


<!-- Esto activa el formulario con ID test -->
<img width="100" height="100" onclick="document.getElementById('test').submit()" src="/imgs/web/Cp.png"/>

Yo lo haría de la siguiente forma, puesto que es mucho más limpio, separas el código JS del HTML y evitas futuros dolores de cabeza.

Código (html5) [Seleccionar]

<form id="formulario1" action="https://google.com"></form>
<img id='enviarFormulario' width="100" height="100" src="/imgs/web/Cp.png"/>


<script type='text/javascript'>
    document.getElementById('enviarFormulario').addEventListener('click', function(){
        document.getElementById('formulario1').submit();
    });
</script>

https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/es/docs/Web/API/Document/getElementById

Saludos