Динамічно створюйте та надсилайте форму

81

Чи є в jQuery спосіб створити та надіслати форму на льоту.

Щось як нижче.

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

Це має працювати або існує інший спосіб це зробити?

— Сантош Гокак
джерело

Чи читали ви API ?

— geoffreak

Також зверніть увагу на загальноприйнятому відповідь тут: stackoverflow.com/questions/14836557 / ...

— thdoan

108

З вашим кодом було дві речі. По-перше, ви включили, $(document).ready();але не обгорнули об’єкт jQuery, який створює з ним елемент.

Другим був метод, яким ви користувались. jQuery створить будь-який елемент, коли селектор (або там, де ви зазвичай ставите селектор) замінюється елементом, який ви хочете створити. Потім ви просто додаєте його до тіла і подаєте.

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

Ось код у дії. У цьому прикладі він не подає автоматично, лише щоб довести, що він додав би елемент форми.

Ось код із автоматичною подачею. Це чудово виходить. Jsfiddle переведе вас на сторінку 404, оскільки "form2.html", очевидно, не існує на його сервері.

— Пураг
джерело

перший випуск, про який ви згадали, не є проблемою :)

— Сантош Гокак,

2

@ user42540: Не обов'язково, але краще запускати свій код JS, коли сторінка завершиться завантаження. Це запобіжить небажаним помилкам.

— Purag

3

Це може працювати в деяких браузерах, але є вагома причина включити більшість кодів маніпуляцій DOM всередину $(document).ready()блоку - це гарантує можливість браузера безпечно вносити будь-які зміни в DOM. В іншому випадку вимогливі браузери, такі як IE6 / 7, плюють манекен, якщо ви намагаєтесь щось змінити до того, як завантажиться вся сторінка.

— GregL

99

Так, це можливо. Одне з рішень наведено нижче ( jsfiddle як доказ ).

HTML:

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

(див., вище немає форми)

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

У наведеному вище прикладі показано, як створити форму, як додати введені дані та як подати. Іноді показ результатів заборонено X-Frame-Options, тому я встановив targetзначення _top, яке замінює вміст головного вікна. Як варіант, якщо встановити _blank, він може відображатися в новому вікні / вкладці.

— Тадек
джерело

Хороше рішення (хоч і трохи довге), але введення не з’явилося.

— Purag

@Purmou: Фактичним рішенням є створення форми, а потім submit()виклик. Я навмисно надав довгий код створення форми, щоб показати, як створити форму та її елементи. Я вважаю, що це цілком нормально.

— Тадек

22

.appendTo ('body') потрібен для того, щоб він працював у моєму Firefox (23.0.1). В іншому випадку він просто повертає об’єкт форми, але не подає.

— Кертіс Яллоп,

5

newForm.hide (). appendTo ("тіло"). submit (); // не відображає поля та працює у FF

— laffuste

4

Це, як і GET, схоже на прив’язку рядка запиту до цільового URI. Припустимо, багато людей хочуть використовувати форму для POST. Якщо це не очевидно, використовуйте 'method': postдля досягнення цього.

— ficuscr

35

Його My версія без jQuery, просту функцію можна використовувати на льоту

Функція:

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

Використання:

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

— Мутукумар Анбалаган
джерело

13

Як і Purmou, але видалення форми, коли подання буде зроблено.

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

— javray
джерело

9

Приклад Josepmra добре працює для того, що мені потрібно. Але мені довелося додати рядок

 form.appendTo( document.body )

щоб це працювало.

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

— павутини
джерело

8

Так, ви просто забули цитати ...

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

— Ніколас Тері
джерело

У чому полягає помилка JavaScript? Спробуйте перевести його у функцію

— готовості

це не буде працювати на старому IE, оскільки не приєднується до HTML DOM. Його потрібно додати до того, <body>як він почне працювати.

— Raptor

4

Спробуйте скористатися цим кодом -
це абсолютно динамічне рішення:

    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
джерело

2

Чому ви $.postні $.getбезпосередньо?

GET запити:

$.get(url, data, callback);

POST запити:

$.post(url, data, callback);

Тоді вам не потрібна форма, просто надішліть дані у своєму об’єкті даних.

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

— SparK
джерело

1

Тому що потрібно активувати завантаження з сервера, а з post / get це не працює.

— a20,

Також цим ви не залишаєте сторінку.

— Роббш

@ a20 Не вистачає заголовка Content-Disposition: Attachment;на стороні сервера для примусового завантаження.

— SparK

@SparK хмммм .. Ваш коментар змушує мене замислитися, чи немає на стороні сервера будь-якого типу mime, який браузери можуть інтерпретувати (або не інтерпретувати та змушувати) завантажувати. Наприклад, zip-файл. Чи неможливо жодним чином вказати, що це відповідь на запит користувача на завантаження, тож ініціюйте завантаження ...

— a20

@ A20 Так, Content-Type: application/octet-stream;. У downloadякорях також є атрибут ... річ на стороні клієнта ( davidwalsh.name/download-attribute )

— SparK

0

Припускаючи, що ви хочете створити форму з деякими параметрами та здійснити виклик POST

var param1 = 10;

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

Ви також можете зробити все в одному рядку, якщо забажаєте :-)

— Антоній
джерело

0

Використання 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();

— Яйрус Мартін
джерело