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

Question

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

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

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

833 8

jQuery javascript forms submit

8 ответов:

Comments

Ничего не найдено.

Purag · Accepted Answer · 2011-11-04 01:32:25

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

второй был метод, который вы используете. jQuery создаст любой элемент, когда селектор (или где вы обычно помещаете селектор) будет заменен элементом, который вы хотите создать. Затем вы просто добавляете его к телу и отправляете его.
$(document).ready(function(){
    $('<form action="form2.html"></form>').appendTo('body').submit();
});
здесь код в действии. В этом примере он не отправляет автоматически, просто чтобы доказать, что он добавит элемент формы.

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

Tadeck · Accepted Answer · 2011-11-04 01:23:41

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

Pearlboy · Accepted Answer · 2017-04-25 19:34:35

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

javray · Accepted Answer · 2013-09-18 14:16:58

Как Purmou, но удаление формы, когда отправить будет сделано.
$(function() {
   $('<form action="form2.html"></form>').appendTo('body').submit().remove();
});

Nicolas Thery · Accepted Answer · 2011-11-04 01:15:44

Да, вы просто забыли кавычки ...
$('<form/>').attr('action','form2.html').submit();

user3629945 · Accepted Answer · 2015-05-01 23:36:16

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

josepmra · Accepted Answer · 2014-12-09 20:25:27

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

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

SparK · Accepted Answer · 2016-03-14 22:36:00

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

GET запросы:
$.get(url, data, callback);
POST запросы:
$.post(url, data, callback);
тогда вам не нужна форма, просто отправьте данные в свой объект данных.
$.post("form2.html", {myField: "some value"}, function(){
  alert("done!");
});