JQuery - отправлять несколько форм по одному запросу, без Ajax

У меня есть страница с несколькими формами. Я пытаюсь представить одну из форм (например, форму A) (НЕ через Ajax, так как мне нужно загрузить страницу результатов после обработки отправки), НО мне нужно другое содержимое формы (например, форму B), которое будет отправлено ВМЕСТЕ с помощью форма A, то есть содержимое форм A + B должно быть отправлено ВМЕСТЕ к ОДНОМУ URL, как к одному запросу, и, как я сказал ранее, НЕ как запрос Ajax.

Подача должна быть выполнена по запросу POST. Кроме того, формы содержат ТОЛЬКО поля, которые не являются загрузкой файлов (т.е. Поля ввода, выбора, textarea).

Я видел здесь предложения, такие как

Проводка/отправка нескольких форм в jQuery

или

Отправка двух форм с помощью одной кнопки

но обратите внимание, что это не соответствует моему делу, так как формы представлены в разных запросах и/или отправляются через Ajax.

Я думал о том, чтобы получить содержимое одной из форм с помощью (jQuery's) serialize(), но как я могу прикрепить эту строку к форме, представленной POST?

Или, может быть, у вас есть другие идеи, как это сделать?

РЕШЕНИЕ:

Основываясь на идеях Sheepy и YoTsumi, я написал следующий код. Я также использую ответ Pointy из следующей ссылки:

отправить несколько форм на ту же страницу

//Arguments: "name"s of forms to submit.
//First argument: the form which according to its "action" all other forms will be submitted.
//Example: mergeForms("form1","form2","form3","form4")
function mergeForms() {
    var forms = [];
    $.each($.makeArray(arguments), function(index, value) {
        forms[index] = document.forms[value];
    });
    var targetForm = forms[0];
    $.each(forms, function(i, f) {
        if (i != 0) {
            $(f).find('input, select, textarea')
                .hide()
                .appendTo($(targetForm));
        }
    });
    $(targetForm).submit();
}

Ответ 1

Ну, вам нужно скопировать данные из формы2 в form1 перед отправкой. Вот основной вопрос, который вы начали:

$.each ( $('#form2 input, #form2 select, #form2 textarea').serializeArray(), function ( i, obj ) {
  $('<input type="hidden">').prop( obj ).appendTo( $('#form1') );
} );

Эта функция будет выбирать входы из формы2, получать их текущие значения, а затем создавать новый скрытый ввод для каждого из них и добавлять их в form1.

В зависимости от вашего сценария вы можете сначала проверить наличие ввода с тем же именем в form1.

Ответ 2

Решение для ввода данных непосредственно в почтовом запросе (а не в подполе)

<form id="form1">
    <input ... />
    <input ... />
</form>

<form id="form2">
    <input ... />
    <input ... />
</form>

<form id="result" action="..." method="POST" onsubmit="merge(); return true;">
    <input type="submit" />
</form>


<script type="text/javascript">
    function merge() {
        $result = $("#result");
        $("#form1 input, #form2 input, #form1 select, #form2 select, #form1 textarea, #form2 textarea").each(function() {
            $result.append("<input type='hidden' name='"+$(this).attr('name')+"' value='"+$(this).val()+"' />");
        });
    }
</script>

Ответ 3

Вы можете делать только один запрос за раз и перезагружать страницу, если вы не используете AJAX. Единственным другим вариантом было бы создать script, который объединяет серализацию ваших двух форм - но в этот момент почему бы вам просто не использовать одну большую форму.

Изменить: для объединения двух форм есть пример этого в ответе второй ссылки, которую вы указали.

Ответ 4

форма A:

<form method="post" action="next.html" onsubmit="this.formbVal.value = $('#formb').serialize(); return true;">
    <input type="hidden" name="formbVal" value="" />
    <input type="submit">
</form>

форма B:

<form id="formb" method="post" action="#" onsubmit="return false;">
</form>

Ответ 5

Я обнаружил, что ваше решение скопирует форму в другую допустимую форму, но задняя сторона - это то, что исходные формы будут очищены, такое редактирование исходной формы (например, после ошибок проверки формы) невозможно.

Чтобы решить эту проблему, я попытался клонировать элементы, прежде чем добавлять их в допустимую форму. Я отредактировал ваш код следующим образом:

//Arguments: "name"s of forms to submit.
//First argument: the form which according to its "action" all other forms will be submitted.
//Example: mergeForms("form1","form2","form3","form4")    
function mergeForms() {
        var forms = [];
        $.each($.makeArray(arguments), function(index, value) {
            forms[index] = document.forms[value];
        });
        var targetForm = forms[0];
        $.each(forms, function(i, f) {
            if (i != 0) {
                $(f).find('input, select, textarea')
                    .clone()
                    .hide()
                    .appendTo($(targetForm));
            }
        });

К сожалению, теперь он не копирует выбранные значения в элементе select.

Надеюсь, кто-то может помочь мне переделать этот script

Ответ 6

вы можете сделать что-то вроде этого

$('#SubmitBtn).click(function () {
        $("#formId").attr("action", "http://www.YourSite.com/");
        $("#formId").attr("method", "post");
        $("#formId").attr("target","_blank");
        $('#formId').submit();
    });

это отправит для http://www.YourSite.com/ в новом окне