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

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

Предполагается ли это работать или есть другой способ сделать это?

Ответы

Ответ 1

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

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

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

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

Вот код с автоматической отправкой. Это прекрасно. Jsfiddle выводит вас на страницу 404, потому что "form2.html" не существует на своем сервере, очевидно.

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

Его версия 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');

Ответ 6

Пример 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();

Ответ 7

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

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

Ответ 8

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

GET:

$.get(url, data, callback);

POST запросы:

$.post(url, data, callback);

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

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