У меня есть 4 формы на странице. Я знаю, что формы не могут быть вложенными.
<form id="form1"></form>
<form id="form2"></form>
<form id="form3"></form>
<form id="form4"></form>
представленный в этом порядке.
Форма 1 и Форма 4 отправляются на одну и ту же страницу php для обработки. Форма 1 имеет 1 поле ввода. Форма 4 имеет несколько полей, флажки и выборки.
Каков наилучший подход как для формы 1, так и для формы 4, отправляющей комбинированные поля обеих форм?
Я пробовал jQuery, отлично работает для ввода текста и флажка, но не могу заставить его работать с Select. Пробовал комбинировать форму 1 и форму 4 и использовать css для изменения формы 1, но не может правильно подобрать макет.
Есть ли что-то более простое в этом?
Это невозможно. Вы можете использовать метод serialize() или serializeArray() для получения данных форм и отправить их на сервер с помощью Ajax:
Кодировать набор элементов формы как строку для представления.
$('#send').click(function() { var firstFormData = $('form:eq(0)').serializeArray(); var fourthFormData = $('form:eq(3)').serializeArray(); $.ajax({ url : '...', type : 'post', data : firstFormData.concat(fourthFormData) }).done(function() { // ... }); });
Хорошо, я не смог получить .serialize () для работы с блоком checkbox из form4, например
<input type="checkbox" id="model[]">
Я попытался захватить проверенные значения, но не смог заставить их сериализоваться вместе с другим вводом:
var vals = [] $('input:checkbox[name="model[]"]').each(function() { if (this.checked) { vals.push(this.value); } });
Поэтому я вернулся и сделал более простую вещь:
Удалите form1, переместите текстовый ввод и кнопку отправки в <div id="searchbox" style="position:abosulte;top:-100px;left:0px;">My original form1</div> внутри form4.
Поместите placeholder <div id="placeholder" style="position:relative;"></div> выше form2 и 3, где раньше была форма 1.
Добавьте javascript выше:
$(document).ready(function(){ $("#searchbox") .appendTo("#placeholder"); });
для перемещения кнопки ввода текста и отправки, чтобы установить их абсолютную и относительную к div-заполнителю.
Таким образом я уменьшил их до 1 формы (что и есть его намерение в любом случае), не полагается на javascript для управления любыми данными и не требует от меня делать тандемную сериализацию в обеих формах.