Crear y enviar formularios dinámicamente

81

¿Hay alguna forma en jQuery de crear y enviar un formulario sobre la marcha?

Algo como a continuación.

<html>
    <head>
    <title> Title Text Goes Here </title>
    <script src="http://code.jquery.com/jquery-1.7.js"></script>
    <script>
        $(document).ready(function(){alert('hi')});
        $('<form/>').attr('action','form2.html').submit();
    </script>
    </head>
    <body>

        Content Area

    </body>
    </html>

¿Se supone que esto funciona o hay una forma diferente de hacerlo?

javascript jquery forms submit Santosh Gokak
fuente
¿Has leído la API ?
geoffreak
También eche un vistazo a la respuesta aceptada aquí: stackoverflow.com/questions/14836557/…
thdoan

Respuestas:

108

Había dos cosas mal con su código. La primera es que incluyó $(document).ready();pero no envolvió el objeto jQuery que está creando el elemento con él.

El segundo fue el método que estaba utilizando. jQuery creará cualquier elemento cuando el selector (o donde normalmente colocaría el selector) sea reemplazado por el elemento que desea crear. Luego, simplemente lo adjunta al cuerpo y lo envía.

$(document).ready(function(){
    $('<form action="form2.html"></form>').appendTo('body').submit();
});

Aquí está el código en acción. En este ejemplo, no se envía automáticamente, solo para demostrar que agregaría el elemento de formulario.

Aquí está el código con envío automático. Funciona bien. Jsfiddle te lleva a una página 404 porque "form2.html" no existe en su servidor, obviamente.

Purag
fuente
Sin embargo, el primer problema que mencionaste no es un problema :)
Santosh Gokak
2
@ user42540: No necesariamente, pero es mejor disparar su código JS cuando la página haya terminado de cargarse. Esto evitará errores no deseados.
Purag
3
Puede funcionar en algunos navegadores, pero hay una buena razón para incluir la mayor parte del código de manipulación de DOM dentro de un $(document).ready()bloque: garantiza que el navegador pueda realizar cambios en el DOM de forma segura. De lo contrario, los navegadores exigentes como IE6 / 7 escupen el maniquí si intenta cambiar algo antes de que se haya cargado toda la página.
GregL
99

Sí, es posible. Una de las soluciones está a continuación ( jsfiddle como prueba ).

HTML:

<a id="fire" href="#" title="submit form">Submit form</a>

(mira, arriba no hay forma)

JavaScript:

jQuery('#fire').click(function(event){
    event.preventDefault();
    var newForm = jQuery('<form>', {
        'action': 'http://www.google.com/search',
        'target': '_top'
    }).append(jQuery('<input>', {
        'name': 'q',
        'value': 'stack overflow',
        'type': 'hidden'
    }));
    newForm.submit();
});

El ejemplo anterior le muestra cómo crear un formulario, cómo agregar entradas y cómo enviar. A veces, la visualización del resultado está prohibida por X-Frame-Options, así que configuré targeten _top, que reemplaza el contenido de la ventana principal. Alternativamente, si lo configura _blank, puede mostrarse en una nueva ventana / pestaña.

Tadeck
fuente
Buena solución (aunque un poco larga), pero la entrada no apareció.
Purag
@Purmou: La solución real es la creación del formulario y luego submit()llamar. Proporcioné intencionalmente un código de creación de formato largo para mostrar cómo crear el formulario y sus elementos. Creo que esto está bastante bien.
Tadeck
22
.appendTo ('body') es necesario para que funcione en mi Firefox (23.0.1). De lo contrario, solo devuelve un objeto de formulario pero no lo envía.
Curtis Yallop
5
newForm.hide (). appendTo ("cuerpo"). submit (); // no muestra los campos y funciona en FF
laffuste
4
Como es, esto hace un GET y es similar a agregar una cadena de consulta al URI de destino. Asumiría que muchas personas quieren usar un formulario para PUBLICAR. En caso de que no sea obvio, utilícelo 'method': postpara lograrlo.
Ficuscr
35

Es mi versión sin jQuery, la función simple se puede usar sobre la marcha

Función:

function post_to_url(path, params, method) {
    method = method || "post";

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form.submit();
}

Uso:

post_to_url('fullurlpath', {
    field1:'value1',
    field2:'value2'
}, 'post');
Muthukumar Anbalagan
fuente
13

Como Purmou, pero se eliminará el formulario cuando se envíe.

$(function() {
   $('<form action="form2.html"></form>').appendTo('body').submit().remove();
});
javray
fuente
9

El ejemplo de Josepmra funciona bien para lo que necesito. Pero tuve que agregar la línea 

 form.appendTo( document.body )

para que funcione. 

var form = $(document.createElement('form'));
$(form).attr("action", "reserves.php");
$(form).attr("method", "POST");

var input = $("<input>")
    .attr("type", "hidden")
    .attr("name", "mydata")
    .val("bla" );


$(form).append($(input));

form.appendTo( document.body )

$(form).submit();
webs
fuente
8

Sí, acabas de olvidar las citas ...

$('<form/>').attr('action','form2.html').submit();
Nicolas Thery
fuente
¿Qué es el error de JavaScript? Intente ponerlo en la función de listo
Nicolas Thery
esto no funcionará en el antiguo IE, ya que no se adjunta en HTML DOM. Debe agregarse <body>antes de que comience a funcionar.
Raptor
4

Prueba con este código:
es una solución totalmente dinámica:

    var form = $(document.createElement('form'));
    $(form).attr("action", "reserves.php");
    $(form).attr("method", "POST");

    var input = $("<input>").attr("type", "hidden").attr("name", "mydata").val("bla");
    $(form).append($(input));
    $(form).submit();
josepmra
fuente
2

¿Por qué no tú $.posto$.get directamente?

GET peticiones:

$.get(url, data, callback);

POST peticiones:

$.post(url, data, callback);

Entonces no necesita un formulario, simplemente envíe los datos en su objeto de datos.

$.post("form2.html", {myField: "some value"}, function(){
  alert("done!");
});
Chispa - chispear
fuente
1
Porque es necesario activar la descarga desde el servidor y con post / get no funciona.
A20
Además con esto no abandonas la página.
robsch
@ a20 Lo que falta es un encabezado del lado del servidor Content-Disposition: Attachment;para forzar la descarga.
SparK
@SparK hmmmm ... tu comentario me hace preguntarme, ¿no hay ningún tipo de mimo en el lado del servidor que los navegadores puedan interpretar (o no interpretar y forzar) la descarga? Por ejemplo, un archivo zip. ¿No es posible de alguna manera especificar que es en respuesta a la solicitud de descarga de un usuario, así que active la descarga ...
a20
@ a20 Sí, Content-Type: application/octet-stream;. También está el downloadatributo en los anclajes ... cosa del lado del cliente ( davidwalsh.name/download-attribute )
SparK
0

Suponiendo que desea crear un formulario con algunos parámetros y realizar una llamada POST 

var param1 = 10;

$('<form action="./your_target.html" method="POST">' +
'<input type="hidden" name="param" value="' + param + '" />' +
'</form>').appendTo('body').submit();

También puede hacerlo todo en una línea si así lo desea :-)

Antonio
fuente
0

Usando Jquery

$('<form/>', { action: url, method: 'POST' }).append(
    $('<input>', {type: 'hidden', id: 'id_field_1', name: 'name_field_1', value: val_field_1}),
    $('<input>', {type: 'hidden', id: 'id_field_2', name: 'name_field_2', value: val_field_2}),
).appendTo('body').submit();
Jairo Martín
fuente