Динамически создать и отправить форму - PullRequest
Новая
       4

Динамически создать и отправить форму

72 голосов
/ 04 ноября 2011

Есть ли способ в 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>

Это должно сработать или есть другой способ сделать это?

Ответы [ 8 ]

95 голосов
/ 04 ноября 2011

Были две вещи не так с вашим кодом.Во-первых, вы включили $(document).ready();, но не обернули объект jQuery, который создает элемент с ним.

Второй - это метод, который вы использовали.jQuery создаст любой элемент, когда селектор (или где вы обычно помещаете селектор) заменяется элементом, который вы хотите создать.Затем вы просто добавляете его к телу и отправляете. 

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

Вот код в действии.В этом примере он не отправляется автоматически, просто чтобы доказать, что он добавил бы элемент формы.

Вот код с автоматической отправкой.Работает нормально.Jsfiddle переносит вас на страницу 404, потому что, очевидно, «form2.html» не существует на его сервере.

92 голосов
/ 04 ноября 2011

Да, это возможно.Ниже приведено одно из решений ( 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, он может отображаться в новом окне / вкладке.

18 голосов
/ 25 апреля 2017

Это Моя версия без 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');
11 голосов
/ 18 сентября 2013

Как и в Purmou, но удаление формы после отправки будет сделано. 

$(function() {
   $('<form action="form2.html"></form>').appendTo('body').submit().remove();
});
8 голосов
/ 04 ноября 2011

Да, вы просто забыли цитаты ... 

$('<form/>').attr('action','form2.html').submit();
5 голосов
/ 01 мая 2015

Пример с 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();
2 голосов
/ 09 декабря 2014

Попробуйте с этим кодом Это полное динамическое решение 

    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();
1 голос
/ 14 марта 2016

Почему бы вам не $.post или $.get напрямую?

GET запросов: 

$.get(url, data, callback);

POST запросов: 

$.post(url, data, callback);

Тогда вам не нужна форма, просто отправьте данные в ваш объект данных. 

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