У меня две формы на одной странице html. Используя jQuery, возможно ли, чтобы данные из обеих форм попадали в данные POST при отправке первого?
Объединить значения из двух форм в submit
Ответ 1
Один из подходов состоит в том, чтобы скопировать все входы form2 в form1 после успешной проверки проверки данных. Это предполагает, что вы не делаете AJAX submit.
// new onsubmit function for form1
function form1_onsubmit()
{
if (!EntryCheck()) return false;
$('#form2 :input').not(':submit').clone().hide().appendTo('#form1');
return true;
}
Если вы хотите отправить запрос дважды, возможно, из-за сбоя отправки с сервера, нам нужно будет удалить любые скопированные входы перед копированием в новые.
// new onsubmit function for form1
function form1_onsubmit()
{
$('#form1 :input[isacopy]').remove();
if (!EntryCheck()) return false;
$('#form2 :input').not(':submit').clone().hide().attr('isacopy','y').appendTo('#form1');
return true;
}
Ответ 2
jQuery serialize поддерживает несколько элементов формы, поэтому можно сделать:
$('#form1, #form2').serialize();
И для вашего случая вы можете сделать:
$('#form1').submit(function() {
var action = $(this).attr('action');
if (!EntryCheck()) return false;
$.ajax({
url : action,
type : 'POST',
data : $('#form1, #form2').serialize(),
success : function() {
window.location.replace(action);
}
});
return false;
});
Ответ 3
Решение Lachlan Roche копирует только элементы, но не значения. Это также позаботится о значениях и может использоваться для обработки любой формы:
<script type="text/javascript">
var submitter = {
combine: function (form1, form2) {
$('#' + form1 + ' :input[isacopy]').remove();
$('#' + form2 + ' :input').not(':submit').not('textarea').not('select').each(function() { $(this).attr('value', $(this).val()); });
$('#' + form2 + ' textarea').each(function() { $(this).text($(this).val()); });
$('#' + form2 + ' select').each(function() { $('option[value!="' + $(this).val() + '"]', this).remove(); $('option[value="' + $(this).val() + '"]', this).attr('selected', 'selected'); });
$('#' + form2 + ' :input').not(':submit').clone().hide().attr('isacopy','y').appendTo('#' + form1);
return true;
}
};
</script>
И ваши теги формы будут выглядеть примерно так (обратите внимание, что иконы формы, переданные функции, переключаются):
<form name="my_first_form" id="my_first_form" method="post" onsubmit="if (!submitter.combine('my_first_form', 'my_second_form')) { return false; }">
...
<form name="my_second_form" id="my_second_form" method="post" onsubmit="if (!submitter.combine('my_second_form', 'my_first_form')) { return false; }">
Валидация формы может вписываться туда, где бы вы ни находились, - это имело бы смысл, если бы ваш валидатор был другой функцией объекта-отправителя или наоборот.
Ответ 4
В то время как другие ответы касаются заданного вами вопроса, может быть стоит рассмотреть, почему у вас есть две отдельные формы, если вы хотите отправлять содержимое обеих форм всякий раз, когда пользователь отправляет их.
Если вы используете две разные формы для их визуального разделения, лучше использовать CSS для размещения элементов на экране по своему усмотрению. Таким образом, вы не полагаетесь на присутствие Javascript, чтобы убедиться, что ваши формы заполнены правильно.
Ответ 5
Я использовал ниже код для отправки двух форм на моем сайте.
Идея состоит в том, что вы получаете данные с несколькими формами с помощью serialize и объединяете эти данные и выравниваете их с параметром data функции $.ajax.
.
// submits two forms simultaneously
function submit_forms(form1_id, form2_id)
{
var frm1_name = $("#" + form1_id).attr('name');
var frm2_name = $("#" + form2_id).attr('name');
if (frm1_name == frm2_name)
{
alert('The two forms can not have the same name !!');
}
else
{
var frm1_data = $("#" + form1_id).serialize();
var frm2_data = $("#" + form2_id).serialize();
if (frm1_data && frm2_data)
{
$("#div_busy").html('<strong>Processing...</strong><br /><img id="busy" src="./images/progress_bar.gif" border="0" style="display:none;" />');
$("#busy").fadeIn('slow');
$.ajax(
{
type: "POST",
url: "process_sticker_request.php",
data: frm1_data + "&" + frm2_data,
cache: false,
error: function()
{
$("#busy").hide('slow');
$("#div_busy").css({'color':'#ff0000', 'font-weight':'bold'});
$("#div_busy").html('Request Error!!');
},
success: function(response)
{
$("#div_busy").hide('slow');
$("#hdnFormsData").html(response);
// open popup now with retrieved data
window.open('', 'popup2', 'toolbars = 1, resizable=1, scrollbars=1, menubar=1');
document.getElementById("prt").action = 'win_sticker.php';
document.getElementById("prt").target = 'popup2';
document.getElementById("prt").submit();
// reset the action of the form
document.getElementById("prt").action = 'list_preview.php';
}
});
}
else
{
alert('Could not submit the forms !!');
}
}
}
Ответ 6
это чистый javascript подход для слияния двух форм. Я тестирую его по запросу POST с помощью Prototype и jQuery, и он работает. Это:
var data1 = document.getElementById('form1'). serialize();
ПРИМЕЧАНИЕ: 'form1' - это идентификатор формы. Вы должны установить его внутри < форма id = "form1" > </form>
var data2 = document.getElementById('form2'). serialize();
ПРИМЕЧАНИЕ: 'form2' - это идентификатор формы. Вы должны установить его в < форма id = "form2" > </form>
Теперь у вас есть два vars и две сериализованные данные (массивы). Вы можете легко объединить их. Ваша форма будет связана. массив, и вы можете столкнуться с проблемой при использовании функции concat.
var mergeddata = data1 + '&' + data2;
Вот оно! Вы можете легко отправить их через ajax-вызов. Например (Prototype.js):
новый Ajax.Request(url, { метод: "сообщение", Параметры: mergeddata,....
Cheers, Kristijan
Ответ 7
Другой способ объединить ваши собственные данные в формат serialize
var data = {};
data['key'] = 'value';
e.preventDefault();
$.ajax({
url : url,
dataType : 'json',
type : 'post',
data : $(this).serialize() + '&' + $.param(data),
success : function(data) {
},
error : function() {
}
});
Ответ 8
Использование serialize для объединения форм и отправки с использованием ajax работало для меня, пока я не добавил кнопку "экспорт" (чтобы отправить данные в виде файла excel). Для этого мне нужно было сделать полную обратную передачу. Поэтому я закончил этот метод. Он выбирает подходящую технику слияния и исправляет некоторые проблемы с кнопками, выбирает и текстовые области по пути:
$("body").on("submit", ".combineForm", function () {
var frm = $(this);
var action = frm.attr("action");
var method = frm.attr("method");
var target = frm.data("updateTarget");
var combined = $(".combineForm");
//get the submit button that was clicked
var btn = $(this).find("button[type=submit]:focus");
var btnName = btn.attr("name");
var btnValue = btn.attr("value");
//create an in memory form to avoid changing the existing form
var f = $("<form action='" + action + "' method='" + method + "'/>")
//Browsers send the name and value of the clicked button but serialize, clone and our copy can't
//So add a hidden field to simulate browser behaviour
if (btnName)
f.append("<input name='" + btnName + "' type='hidden' value='" + btnValue + "' />")
if (btnValue === "export") {//exporting to a file needs full submit
//merge forms with class 'combineForm' by copying values into hidden inputs
// - cloning doesn't copy values of select or textareas
combined.find(":input").not("submit").each(function () {
var inp = $("<input name='"
+ $(this).attr("name")
+ "' type='hidden' value='"
+ $(this).val() + "' />")
f.append(inp);
});
f[0].submit();
return false;
}
//merge forms for ajax submit
var data = combined.serialize() + "&" + f.serialize();
$.ajax({
url: action,
type: 'POST',
data: data,
dataType: "html",
success: function (html) {
$(target).html(html);
}
});
return false;
});