Dynamicznie twórz i przesyłaj formularz

81

Czy w jQuery jest sposób na tworzenie i przesyłanie formularzy w locie?

Coś jak poniżej.

<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>

Czy to ma zadziałać, czy jest na to inny sposób?

— Santosh Gokak
źródło

Czy przeczytałeś API ?

— geoffreak

Spójrz także na zaakceptowaną odpowiedź tutaj: stackoverflow.com/questions/14836557/…

— thdoan

108

Z twoim kodem były dwie rzeczy. Pierwsza polega na tym, że dołączyłeś, $(document).ready();ale nie zawinąłeś obiektu jQuery, który tworzy z nim element.

Druga to metoda, której używałeś. jQuery utworzy dowolny element, gdy selektor (lub miejsce, w którym zwykle umieszczasz selektor) zostanie zastąpiony elementem, który chcesz utworzyć. Następnie po prostu dołączasz go do ciała i przesyłasz.

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

Oto kod w akcji. W tym przykładzie nie przesyła automatycznie, tylko po to, aby udowodnić, że doda element formularza.

Oto kod z automatycznym przesyłaniem. Działa dobrze. Jsfiddle przeniesie Cię na stronę 404, ponieważ plik „form2.html” oczywiście nie istnieje na jego serwerze.

— Purag
źródło

pierwszy numer, o którym wspomniałeś, nie jest problemem :)

— Santosh Gokak

2

@ user42540: Niekoniecznie, ale lepiej jest odpalić kod JS po zakończeniu ładowania strony. Zapobiegnie to niechcianym błędom.

— Purag

3

Może działać w niektórych przeglądarkach, ale jest dobry powód, aby umieścić większość kodu manipulującego DOM wewnątrz $(document).ready()bloku - zapewnia to, że przeglądarka jest w stanie bezpiecznie wprowadzać wszelkie zmiany w DOM. W przeciwnym razie wybredne przeglądarki, takie jak IE6 / 7, wypluwają atrapę, jeśli spróbujesz coś zmienić, zanim cała strona zostanie załadowana.

— GregL

99

Tak to mozliwe. Jedno z rozwiązań jest poniżej ( jsfiddle jako dowód ).

HTML:

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

(patrz powyżej nie ma formularza)

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();
});

Powyższy przykład pokazuje, jak utworzyć formularz, jak dodać dane wejściowe i jak przesłać. Czasami wyświetlanie wyniku jest zabronione przez X-Frame-Options, więc ustawiłem targetna _top, co zastępuje zawartość okna głównego. Alternatywnie, jeśli ustawisz _blank, może się wyświetlać w nowym oknie / karcie.

— Tadeck
źródło

Dobre rozwiązanie (choć trochę długie), ale dane wejściowe się nie pojawiły.

— Purag

@Purmou: Właściwe rozwiązanie polega na utworzeniu formularza, a następnie submit()wywołaniu. Świadomie dostarczyłem długi kod do tworzenia formularzy, aby pokazać, jak utworzyć formularz i jego elementy. Uważam, że to jest w porządku.

— Tadeck

22

.appendTo ('body') jest potrzebne do działania w moim Firefoksie (23.0.1). W przeciwnym razie po prostu zwraca obiekt formularza, ale nie przesyła.

— Curtis Yallop,

5

newForm.hide (). appendTo ("body"). submit (); // nie wyświetla pól i działa w FF

— laffuste

4

Jak to robi GET i jest podobne do dołączania ciągu zapytania do docelowego URI. Zakładałby, że wiele osób chce użyć formularza do POST. Jeśli nie jest to oczywiste, użyj, 'method': postaby to osiągnąć.

— ficuscr

35

Jego moja wersja bez jQuery, prosta funkcja może być używana w locie

Funkcjonować:

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();
}

Stosowanie:

post_to_url('fullurlpath', {
    field1:'value1',
    field2:'value2'
}, 'post');

— Muthukumar Anbalagan
źródło

13

Podobnie jak Purmou, ale usunięcie formularza po przesłaniu będzie gotowe.

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

— javray
źródło

9

Przykład Josepmry dobrze sprawdza się w przypadku tego, czego potrzebuję. Ale musiałem dodać linię

 form.appendTo( document.body )

żeby to zadziałało.

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();

— sieci
źródło

8

Tak, po prostu zapomniałeś cytatów ...

$('<form/>').attr('action','form2.html').submit();

— Nicolas Thery
źródło

Co to jest błąd javascript? Spróbuj umieścić go w gotowej funkcji

— Nicolas Thery

to nie zadziała na starym IE, ponieważ nie dołącza się do HTML DOM. Należy go dołączyć, <body>zanim zacznie działać.

— Raptor

4

Wypróbuj ten kod -
jest to całkowicie dynamiczne rozwiązanie:

    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
źródło

2

Dlaczego nie ty $.postlub $.getbezpośrednio?

GET upraszanie:

$.get(url, data, callback);

POST upraszanie:

$.post(url, data, callback);

Wtedy nie potrzebujesz formularza, po prostu wyślij dane w swoim obiekcie danych.

$.post("form2.html", {myField: "some value"}, function(){
  alert("done!");
});

— Iskra
źródło

1

Ponieważ trzeba wyzwalać pobieranie z serwera, a przy post / get to nie działa.

— a20

Również z tym nie opuszczasz strony.

— robsch

@ a20 Brakuje nagłówka po stronie serwera Content-Disposition: Attachment;do wymuszenia pobierania.

— SparK

@SparK hmmmm .. Twój komentarz sprawia, że zastanawiam się, czy po stronie serwera nie ma żadnego typu MIME, który przeglądarki mogą interpretować (lub nie interpretować i wymuszać) pobierania. Na przykład plik zip. Czy nie można w żaden sposób określić, że jest to odpowiedź na żądanie użytkownika dotyczące pobierania, więc uruchom pobieranie ...

— a20

@ A20 Tak Content-Type: application/octet-stream;. Jest też downloadatrybut w kotwicach ... rzecz po stronie klienta ( davidwalsh.name/download-attribute )

— SparK,

0

Zakładając, że chcesz utworzyć formularz z pewnymi parametrami i wykonać wywołanie POST

var param1 = 10;

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

Możesz też zrobić to wszystko w jednej linii, jeśli chcesz :-)

— Anthony
źródło

0

Korzystanie z 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();

— Jairus Martin
źródło