Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Разбросанная форма (https://javascript.ru/forum/dom-window/30250-razbrosannaya-forma.html)

Кирюха =) 29.07.2012 00:41
Разбросанная форма
 
Всем привет. Наверное ни раз и не 2 у многих людей возникал вопрос: как сделать разбросанную форму? фот и у меня возник.....Допустим вот такой код 
<form id="form1" action="insert.php" method="POST">
<INPUT type="checkbox" name="demo" value="value1">

<INPUT type="checkbox" name="demo" value="value2"> 

</form>
Много кода######################################
Много кода######################################
Много кода######################################
Много кода######################################
Много кода######################################
Много кода######################################
<INPUT type="checkbox" name="demo" value="value3">
<INPUT type="checkbox" name="demo" value="value4">
<INPUT type="checkbox" name="demo" value="value5">
еще немножко кода ###########################
<INPUT type="button" value="Отправить">

Как сделать при помощи javascript или лучше даже jquery чтобы все значения отправлялись одним сабмитом?????

Кирюха =) 29.07.2012 00:44
Вот для наглядности

Deff 29.07.2012 00:44
Кирюха =),
По сабмиту собирать форму и отправлять, главно дело иметь точные признаки элементов
Форма может быть вообще изначально пустой, и сабмит чисто кнопкой с надписью (и ваще, если нет инпутов type=fille - можно отправлять клоны элементов

Кирюха =) 29.07.2012 00:53
В форме только чекбоксы изначально они не активные.А как так "собирать форму по сабмиту"?Если можно примерчик, а то без примерчика туго соображаю....

Deff 29.07.2012 01:09 
<p id="insertform"><b>Каким браузером в основном пользуетесь:</b><Br>
   <input type="radio" name="browser" value="ie"> Internet Explorer<Br>
   <input type="radio" name="browser" value="opera"> Opera<Br>
   <input type="radio" name="browser" value="firefox"> Firefox<Br>
  </p>


<form name="test" method="post" action="input1.php">
  <p><b>Ваше имя:</b><br>
   <input name="nick" type="text" size="40">
  </p>
  <p>Комментарий<Br>
   <textarea name="comment" cols="40" rows="3"></textarea></p>
  <p><input type="submit" value="Отправить" onclick="FormAssembly ();return false;">
   <input type="reset" value="Очистить"></p>
 </form>
<script type="text/javascript">
function FormAssembly () {
  alert('Tут нужно засунуть внешние элементы форму и сабмитим submit()') //
  document.forms.test.submit()
}
</script>

Кирюха =) 29.07.2012 01:27 
<p id="insertform"><b>Каким браузером в основном пользуетесь:</b><Br>
   <input type="radio" name="browser" value="ie"> Internet Explorer<Br>
   <input type="radio" name="browser" value="opera"> Opera<Br>
   <input type="radio" name="browser" value="firefox"> Firefox<Br>
  </p>


<form name="test" method="post" action="input1.php">
  <p><b>Ваше имя:</b><br>
   <input name="nick" type="text" size="40">
  </p>
  <p>Комментарий<Br>
   <textarea name="comment" cols="40" rows="3"></textarea></p>
  <p><input type="submit" value="Отправить" onclick="FormAssembly ();return false;">
   <input type="reset" value="Очистить"></p>
 </form>
<script type="text/javascript">
function FormAssembly () {
	var str = $("p#insertform").text();//копируем
	$("form").html(str);//вставляем
  document.forms.test.submit();//отправляем сабмитом
}
</script>

ТАК?

Deff 29.07.2012 01:29
Кирюха =),
НЕТ!
Вставлять элементы в форму, без потери данных ток appendChild(ом)

Кирюха =) 29.07.2012 01:38 
<p id="insertform"><b>Каким браузером в основном пользуетесь:</b><Br>
   <input type="radio" name="browser" value="ie"> Internet Explorer<Br>
   <input type="radio" name="browser" value="opera"> Opera<Br>
   <input type="radio" name="browser" value="firefox"> Firefox<Br>
  </p>


<form name="test" method="post" action="input1.php">
  <p><b>Ваше имя:</b><br>
   <input name="nick" type="text" size="40">
  </p>
  <p>Комментарий<Br>
   <textarea name="comment" cols="40" rows="3"></textarea></p>
  <p><input type="submit" value="Отправить" onclick="FormAssembly ();return false;">
   <input type="reset" value="Очистить"></p>
 </form>
<script type="text/javascript">
function FormAssembly () {
	$("form").appendChild("#insertform");//вставляем
  document.forms.test.submit();//отправляем сабмитом
}
</script>

Вот так? Впервые сталкиваюсь с методом appendChild.....

Deff 29.07.2012 01:45
Цитата:
Сообщение от Кирюха =)
$("form").appendChild("#insertform");//вставляе
Если на квери
то
$("#insertform").appendTo("form[name='test']");

http://jquery-docs.ru/Manipulation/appendTo/#selector

Кирюха =) 29.07.2012 01:47
Все понял буду пробовать.Большое вам спасибо за помощь!!!!!))))

Кирюха =) 29.07.2012 03:20
Все проверил все работает!!!!Еще раз спасибо Deff!!!

bes 29.07.2012 11:28
Почему бы просто не закрыть (</form>) тег <form> после всех элементов, которые нужно отправлять (если нужно позиционирование, позиционировать не сам <form>, а её его внутреннее содержимое)


Часовой пояс GMT +3, время: 09:33.