Значения слияния от двух форм на отправляют
У меня есть две формы на одной странице HTML. Используя jQuery, действительно ли возможно иметь данные из обеих форм, входят в данные POST, когда первое отправлено?
4 ответа
Один из подходов заключается в копировании всех входов формы form2 в форму form1 после успешной проверки валидности данных. Это предполагает, что вы не делаете AJAX-сабмит.
// new onsubmit function for form1
function form1_onsubmit()
{
if (!EntryCheck()) return false;
$('#form2 :input').not(':submit').clone().hide().appendTo('#form1');
return true;
}
Если вы хотите учесть, что submit нажимается дважды, возможно, из-за отказа submit на сервере, нам нужно будет удалить все скопированные входы перед копированием новых.
// 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;
}
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;
});
Я использовал приведенный ниже код для отправки данных двух форм на моем веб-сайте.
Идея состоит в том, чтобы получить данные нескольких форм , используя сериализовать , объединить эти данные и уравнять их с параметром 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 !!');
}
}
}
Хотя другие ответы касаются заданного вами вопроса, возможно, стоит подумать, зачем вам 2 отдельные формы, если вы хотите отправлять содержимое обеих форм всякий раз, когда пользователь отправляет одну из них.
Если вы используете 2 разные формы, чтобы разделить их визуально, лучшим подходом может быть использование CSS для размещения элементов на экране по вашему желанию. Таким образом, вы не будете полагаться на присутствие Javascript для обеспечения правильного заполнения форм.