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?
javascript
jquery
forms
submit
Santosh Gokak
źródło
źródło
Odpowiedzi:
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.
źródło
$(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.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łemtarget
na_top
, co zastępuje zawartość okna głównego. Alternatywnie, jeśli ustawisz_blank
, może się wyświetlać w nowym oknie / karcie.źródło
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.'method': post
aby to osiągnąć.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');
źródło
Podobnie jak Purmou, ale usunięcie formularza po przesłaniu będzie gotowe.
$(function() { $('<form action="form2.html"></form>').appendTo('body').submit().remove(); });
źródło
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();
źródło
Tak, po prostu zapomniałeś cytatów ...
$('<form/>').attr('action','form2.html').submit();
źródło
<body>
zanim zacznie działać.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();
źródło
Dlaczego nie ty
$.post
lub$.get
bezpośrednio?GET
upraszanie:POST
upraszanie:Wtedy nie potrzebujesz formularza, po prostu wyślij dane w swoim obiekcie danych.
$.post("form2.html", {myField: "some value"}, function(){ alert("done!"); });
źródło
Content-Disposition: Attachment;
do wymuszenia pobierania.Content-Type: application/octet-stream;
. Jest teżdownload
atrybut w kotwicach ... rzecz po stronie klienta ( davidwalsh.name/download-attribute )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 :-)
źródło
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();
źródło