Использование вложенных форм в HTML-документе

Question

Я пытаюсь установить одну форму в другую в моем HTML-документе, как это:

<form1 action="1.php">
some form elements
...................
<form2 enctype="multipart/form-data" action="upload.php" target="upload_target" onsubmit="startUpload();>
<input name="myfile" type="file"/>
<input type="submit" name="submitBtn" class="sbtn" value="Upload" />
</form>
</form>
<iframe id="upload_target" name="upload_target" src="#"></iframe>

Первая форма получает данные от пользователя и вставляет в мою базу данных. Вторая форма выполняет загрузку файлов с помощью jquery и iframe, как в этом примере загрузить файл с помощью iframe и jquery

Я пытаюсь загрузить файл таким способом, потому что я не могу сделать это, просто перенося данные в файл php с помощью javascript (с ajax). И проблема в том, что вложенные формы не поддерживаются стандартами w3c. Что я могу сделать, чтобы решить эту проблему? Спасибо за помощь и извините за мой плохой английский.

Answer 1

Однажды я столкнулся с той же проблемой, поэтому вот мое предложение: вы можете поместить form2 в другой контейнер, например, div, который находится вне form1 и отрегулируйте его положение с помощью css (z-index, абсолютная позиция или что-то в этом роде), чтобы оно выглядело как одна форма.

Недостатки этого подхода очевидны, но с небольшими усилиями вы можете справиться с ними до определенного уровня.

Еще одно предложение: так как вы все равно работаете с javascript, перенесите форму загрузки в невидимый div и заставьте ее всплыть, нажав / наведя курсор на кнопку загрузки или введя последнее поле формы1 или что-то еще.

Answer 2

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

<form1 action="1.php">
some form elements
...................

</form>

<form2 enctype="multipart/form-data" action="upload.php" target="upload_target" onsubmit="startUpload();>
<input name="myfile" type="file"/>
<input type="submit" name="submitBtn" class="sbtn" value="Upload" />
</form>