ВыходВход

Меню сайта

Категории статей
Nested Sets [10]
Работа с деревьями Nested Sets
Программирование Perl [5]
Статьи по теоретическому и практическому применению Perl, при проектировании интернет приложений
HTML + JavaScript [1]
Некоторые примеры HTML верстки с использованием JavaScript
Устаревшие статьи [4]
Данные статьи были написаны довольно давно, поэтому могут быть не актуальны в данное время

Меню пользователя

Поиск по статьям

Друзья сайта

Форма в форме
» Каталог статей » HTML + JavaScript
Форма в форме

Форма в форме

Часто возникают случаи, когда дизайн требует вложить форму в форму. Можно, конечно, использовать слой (<div>) и указать ему абсолютные или относительные координаты что бы влепить его внутри главной формы, но такой вариант, при использовании разных браузеров, вызывает только головную боль. Решение есть гораздо проще - использовать поля основной формы для передачи из них данных в скрытую форму с последующим её подтверждением. Такой вариант визуально позволяет разместить форму внутри формы без каких-либо ограничений и требований к HTML-коду. Итак, пример страницы:

<html>
<head>
<script
language="JavaScript">
  function SIF () {
    document.InternalForm.input4.value = document.MainForm.input4.value;
    document.InternalForm.input5.value = document.MainForm.input5.value;
    document.InternalForm.submit();
  }
</script>
</head>
<body>
  <form
action="http://script1/" method="post" name="MainForm">
    <input type="text" name="input1"><br>
    <input type="text" name="input2"><br>

<!-- Вложенная форма -->

    <input type="text" name="input4"><br>
    <input type="text" name="input5"><br>
    <input type="button" name="input6" onclick="javascript:SIF();"><br>
<!-- Конец вложенная форма -->

    <input type="text" name="input7"><br>
    <input type="text" name="input8"><br>
    <input type="submit" name="submit">
  </form>

<!-- Скрытая форма -->
<form action="http://script2/" method="post" name="InternalForm">
  <input type="hidden" name="input4">
  <input type="hidden" name="input5">
</form>
<!-- Конец скрытая форма -->
</body>
</html>

Как видно из представленного кода, во вторую форму передаются только два поля (input4 и input5). На самом деле количество полей не имеет значения, лишь бы имена полей не пересекались между собой. Так же не имеет ни малейшего значения тип тега input, будь то radio или checkbox, то же самое относится и к тегам select и textarea.

Категория: HTML + JavaScript | Добавил: phoinix (2005-11-17) | Автор: Сергей Томулевич (aka Phoinix)
Просмотров: 18744 | Рейтинг: 4.2 |

Комментарии

 

Бесплатный конструктор сайтов - uCoz