¿Cómo enviar de forma confiable un formulario HTML con JavaScript?

¿Hay alguna manera de enviar un formulario HTML usando JavaScript que está garantizado para funcionar en todas las situaciones?¿Cómo enviar de forma confiable un formulario HTML con JavaScript?

Elaboro. El enfoque común parece ser:

formElement.submit()

Eso está bien y bien, excepto por una cosa. Los campos de un formulario están disponibles como atributos de formElement, por lo que si hay un campo con nombre o id "text1", se puede acceder como formElement.text1.

Esto significa que si un elementos se denomina "submit" (ya sea su nombre o suIdentificación), entonces formElement.submit() no funcionará. Esto es porque formElement.submit no será un método del formulario, sino el campo con ese nombre. Desafortunadamente, es bastante común que los botones de enviar tengan un nombre o id de "envío".

Dos ejemplos para ilustrar mi punto. En primer lugar, el siguiente no funcionará, porque un elemento del formulario tiene nombre de "enviar":

<form name="example" id="example" action="/"> <button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button> </form>

El siguiente trabajo sin embargo. La única diferencia es que me han quitado el nombre de "enviar" de la forma:

<form name="example" id="example" action="/"> <button type="button" onclick="document.example.submit(); return false;">Submit</button> </form>

Entonces, ¿hay alguna otra manera de presentar un formulario HTML usando JavaScript?

Fuente

2010-01-04 pablobm

bastante molesto ... Yo tenía el mismo problema con la propiedad "longitud" de la forma (número de controles) se sustituye por el valor de una control llamado "longitud". Al final, cambié el nombre del control. –

Ver http://stackoverflow.com/questions/876243/why-does-naming-your-html-form-submit-button-submit-break-things –

Soy estúpido si sugiero darle otro nombre. .? P.ej. '" acción "' o '" ejecutar "'. – BalusC

Crear otra forma en JavaScript, y aplicar su método submit() en su forma original:

<html> 
    <script> 
     function hack() { 
      var form = document.createElement("form"); 
      var myForm = document.example; 
      form.submit.apply(myForm); 
     } 
    </script> 

    <form name="example" id="example" method="get" action=""> 
     <input type="hidden" value="43" name="hid"> 
     <button 
      type="button" 
      name="submit" 
      onclick="hack();return false;" 
     >Submit</button> 
    </form> 
</html>

form.submit es la referencia a un fresco y limpio método de envío, a continuación, utiliza apply(myForm) para ejecutarlo con la forma original.

Fuente

2010-01-04 14:56:40 Jerome

Entonces, ¿hay alguna otra manera de enviar un formulario HTML usando JavaScript?

actualización: Tome el consejo de Jerome (en otro lugar en este hilo). Dejaré esta respuesta por interés histórico, pero no es tan buena ni confiable como la solución de Jerome.

El siguiente enfoque es feo, pero funciona.

var x = document.forms.example; 
    var f = document.createElement('form'); 
    f.action = x.action; 
    f.method = x.method; 
    f.enctype = x.enctype; 
    for (var i = 0; i < x.elements.length; i++) { 
     var el = x.elements[i]; 
     if (el.name !== "submit") { 
      f.appendChild(el); 
     } 
    } 
    x.parentNode.replaceChild(f,x); 
    f.submit();

Fuente

2010-01-04 14:50:26 Quentin

En Firefox

formElement.constructor

devuelve "HTMLFormElement".Por lo que puede enviar el formulario mediante el uso de:

HTMLFormElement.prototype.submit.call(formElement)

Usted puede extender esto a otros navegadores también:

formElement.constructor.prototype.submit.call(formElement)

Fuente

2010-01-04 14:56:43 Alsciende

Sin embargo, no todos los navegadores exponen 'constructor' en los elementos del formulario (o cualquier otro objeto host, para el caso). – kangax

Obviamente esto no es un navegador cruzado –

La mejor idea es no nombrar a un botón de enviar 'Enviar', pero se puede moverse IT

function reallysubmitform(n){ 
n= n || 0; 
var f= document.forms[n]; 
f.onsubmit= function(){ 
    return true 
}; 
var sub= f.elements['submit']; 
if(sub && sub.type== 'submit') sub.click(); 
else f.submit(); 
}

reallysubmitform()

Fuente

2010-01-04 15:06:57 kennebec

Realmente resolvió uno de mis problemas, donde no puedo cambiar el nombre del botón de enviar aunque tengo el formulario HTML en mi archivo, ya que tengo que enviarlo a un servidor externo y tenían un cheque si el formulario enviado tiene un elemento ENVIAR o no. –

El envío de un formulario usando JavaScript no puede, por diseño, ser seguro.

Sus usuarios pueden navegar por su sitio web en su teléfono, han deshabilitado JavaScript, modificado el origen de su página, o usando Lynx.

En cualquier caso, para fines de accesibilidad, necesitará el buen botón de envío de HTML y algunas comprobaciones de entrada en el lado del servidor.

Fuente

2010-01-04 15:08:33

Por supuesto, pero aún se pueden agregar mejoras razonables que hacen uso de estas características. En cuanto a la "seguridad", no lo estaba pidiendo: era la confiabilidad que quería, en la forma de una interfaz estable – pablobm

Para un formulario llamado enviar solo llamar a sus botones, la función de hacer clic funciona para mí.

document.forms[0].submit.click(); //where submit here is just the name of the button/input tied to the form.

Fuente

2012-12-09 15:09:12 Jonathon

Cuando originalmente hice la pregunta, estaba desarrollando una biblioteca JS. Tuve que asumir lo menos posible sobre el medio ambiente. Por lo tanto, esta solución no me habría funcionado, ya que habría tenido que asumir que los usuarios usarían el marcado correcto. – pablobm

Sólo tiene que utilizar onsubmit ...

<form name="example" id="example" action="/" onsubmit="document.example.submit();"> 
    <button type="submit" name="submit" onclick="document.example.submit(); return false;">Submit</button> 
</form>

Fuente

2016-07-07 06:29:00 Zigri2612

¿Cómo enviar de forma confiable un formulario HTML con JavaScript?

Respuesta

Cuestiones relacionadas