Javascript-форум - Управление формами

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Управление формами (https://javascript.ru/forum/dom-window/36064-upravlenie-formami.html)

Управление формами

Привествую javascript гуру :)
Пишу несколько не простую форму регистрации для своего сайта, сам пишу на php, но вот для части формы необходимо сделать несколько "фич", которые под силу только javascript (так чтоб без изврата). Суть такова:

<html> 
<head> 
  <title></title> 
</head> 
<body> 
<form name='form' action='' method='post'> 
<pre> 
	  Не заполнять <input type='checkbox' name='sel_all'> 
		Вариант 1 <input id='items_1' type='checkbox'>  <input type='text'>
		Вариант 2 <input id='items_2' type='checkbox'>  <input type='text'>
		Вариант 3 <input id='items_3' type='checkbox'>  <input type='text'>
		Тоже не заполнять <input type='checkbox' name='sel_all'>
			Вариант 1.1 <input id='items_1' type='checkbox'>  <input type='text'>
			Вариант 2.1 <input id='items_2' type='checkbox'>  <input type='text'>
			Вариант 3.1 <input id='items_3' type='checkbox'>  <input type='text'>
</pre> 
</form> 
</body> 
</html>

Когда стоит галочка "Не заполнять", все остальные чекбоксы должны быть отмечены + все поля заблокированы для ввода+все, что ниже этого чебокса спрятано, вроде как так

function collapsElement(id) {
    if ( document.getElementById(id).style.display != "none" ) {
        document.getElementById(id).style.display = 'none';
    }
    else {
        document.getElementById(id).style.display = '';
    }
}

Для поля "Тоже не заполнять" все тоже самое, но действовать должно только на элементы, которые ниже него. Таких блоков на странице будет несколько и они должны быть независимы.
Нашел множество способов как можно это реализовать по отдельности (блокировка поле, выбрать все чекбоксы итд.) и вроде понятно как это работает, но все это в кучу склеить не выходит. Очень надеюсь на Вашу помощь т.к. с javascript у меня беда.:help:

<script>
    function toggleGroup(groupId, hide) {
       var group = document.getElementById(groupId);
       group.style.display = hide ? 'none' : 'block';
    }
</script>
<label>Не заполнять <input type='checkbox' name='sel_all' onchange="toggleGroup('extra1', checked)"></label>
<fieldset id="extra1">
    Вариант 1 <input id='items_1' type='checkbox'>  <input type='text'>
    Вариант 2 <input id='items_2' type='checkbox'>  <input type='text'>
    Вариант 3 <input id='items_3' type='checkbox'>  <input type='text'>
</fieldset>
<label>Тоже не заполнять <input type='checkbox' name='sel_all' onchange="toggleGroup('extra2', checked)"></label>
<fieldset id="extra2">
    Вариант 1.1 <input id='items_1' type='checkbox'>  <input type='text'>
    Вариант 2.1 <input id='items_2' type='checkbox'>  <input type='text'>
    Вариант 3.1 <input id='items_3' type='checkbox'>  <input type='text'>
</fieldset>

jorik,
Ну в принципе на странице много форм удобно пользовать jQuery

<html> 
<head> 
 <title>
</title> 
<script src="http://code.jquery.com/jquery-latest.js"></script>

</head> 
<body> 
<form id='formNN' name='form' action='' method='post'> 
<pre> 
	  <span class='tree all'>Не заполнять <input type='checkbox' name='sel_all'></span>
		<span class='tree'>Вариант 1 <input id='items_1' type='checkbox'>  <input type='text'></span>
		<span class='tree'>Вариант 2 <input id='items_2' type='checkbox'>  <input type='text'></span>
		<span class='tree'>Вариант 3 <input id='items_3' type='checkbox'>  <input type='text'></span>
		<span class='tree all'>Тоже не заполнять <input type='checkbox' name='sel_all'></span>
			<span class='tree'>Вариант 1.1 <input id='items_1' type='checkbox'>  <input type='text'></span>
			<span class='tree'>Вариант 2.1 <input id='items_2' type='checkbox'>  <input type='text'></span>
			<span class='tree'>Вариант 3.1 <input id='items_3' type='checkbox'>  <input type='text'></span>
</pre> 
</form>
<script>
$(document).ready(function(){
  var form = $('#formNN');
  var treeChecks = $('pre span.tree',form);
  var length = treeChecks.length;

  $('pre span.tree.all input[type="checkbox"]',form) .change(function(){
       var sw = !this.checked;
       var ThInd = treeChecks.index($(this).parent()[0]);
       for(var i=ThInd+1;i<length; i++) {
            $(treeChecks[i]).toggle(sw);
       }
  });
});
</script>
</body> 
</html>

Cобственно плагин не доведен, поскольку не понятно, что с чекитами , которые не name='sel_all',
Они участвуют в этой постановке ?

Ну да. Кому-то достаточно 4 строчки кода, что составит 150 байт (в несжатом виде) чтобы решить эту задачу, а кому-то нужно 10000 строк кода что составляет 90 килобайт + еще 12 строк кода.

danik.js,
Знаем мы эти две строчки на реальной задаче, могу спорить, что твой Вариант не подойдёт...Было уже на днях с подобной задачей...
Потом чел уточнил - что каждый чекбокс 1 = должен скрывать подгруппу 1.1

Ну хорошо, плюс еще одна строчка для подключения костыля для старых ишаков, эмуляция querySelector. Согласись это ничто по сравнению с 10000 строк кода jQuery

Сейчас мозг у всех превратился в плагин для jQuery. Все "мастерски" владеют jQuery, и даже не подозревают как сделать тоже самое, но без подключения лишних 10000 строк кода.

Вобще, если сайт делается на заказ и за копейки, то jQuery тут - самое оно. Не нужно себя утруждать ничем. Если же сайт для себя - я бы постарался сделать его максимально качественным, и врядли бы подключал jQuery всего лишь ради скрытия полей формы.

danik.js,
Во первых схема неверна - первый чек - отключает - обе строки
Во вторых - я решаю задачи которые имеют интерес и для меня, у меня на сервисе jquery подключена на всех страницах,
А на сколько это решение устроит ТС - ему решать

Цитата:

Сообщение от Deff

ThInd

Цитата:

Сообщение от Deff

Цитата:

Сообщение от Deff

formNN

Ты подрабатыавешь обфускатором? Ну ладно свой код запутывать, но ведь автор вопроса не разберется в этих всяких sw или ThInd'ах ...
Неужели нельзя дать нормальные понятные имена, а не шифровать. Ты бы еще так писал:

var a = $('#formNN');
var b = $('pre span.tree',a);
var c = b.length;

$('pre span.tree.all input[type="checkbox"]',a) .change(function(){
   var d = !this.checked;
   var e = b.index($(this).parent()[0]);
   for(var i=e+1;i<c; i++) {
        $(b[i]).toggle(d);
   }
});

Цитата:

Сообщение от Deff

for(var i=ThInd+1;i<length; i++) {
$(treeChecks[i]).toggle(sw);
}

Каждое поле скрывать через цикл - это сильно! Вот где сила jQuery! Чувствуется большой опыт человека, работающего с jQuery не первый день ))

Цитата:

Сообщение от danik.js

Ты подрабатыавешь обфускатором? Ну ладно свой код запутывать, но ведь автор вопроса не разберется в этих всяких sw или ThInd'ах ...
Неужели нельзя дать

для меня достаточно Внятно
SW - cвитч
ThInd - This Index
Это дело вкуса писателя, и птом, что Вы ко мне цепляетесь?, - я не ТS и ответов не прошу, - просто отвечайте на Вопросы лучше и тщательнее чем я

То «Вы», то «ты» - определись наконец )

Цитата:

Сообщение от danik.js

for(var i=ThInd+1;i<length; i++) {
$(treeChecks[i]).toggle(sw);
}

Блин - я писал для дерева, если моё чутьё подвело, о дальнейшеей продолжении задачи, ну имхо это моя промашка не нужно мерить других по себе, у меня мысли в своём проекте и тутошние задачи иногда подталкивают.

Цитата:

Сообщение от danik.js

То «Вы», то «ты» - определись наконец )

уважительно начинаю называть когда готов заехать в моську

Цитата:

Сообщение от danik.js

А что Вы считаете что скрытие массива объектов objs.hide() - не проходит неявно через цикл?
Моя задумка под произвольное число веток - А Ваша будет требоватьпостоянного наращивания, вплоть до появления циклов

danik.js,
немного не то, что я имел ввиду. Вариант Deff, практически то что нужно. Только маленькое уточнение, когда галочка "Не заполнять"(должна стоять по умолчанию) стоит, то для всех дочерних элементов (все что ниже) тоже должно стоять чекед, и поля напротив которых оно стоит должны быть заблокированы для ввода (blocked). Тоже самое для "Тоже не заполнять", но действовать должно на его дочерние элементы.
Конечно, хотелось бы без подключения jquery, но в данной ситуации буду благодарен за любое решение.

П.С. Таких блоков "Не заполнять", в пределах одной формы (<form>)будет несколько, и они должны быть независимы, тэга <pre> тоже не будет, добавил его просто чтоб показать иерархию элементов.

<html> 
<head> 
 <title>Тест form</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$.fn.form_menu = function() {
  var form = this;
  var treeChecks = $('span.tree',form); //массив всех span class='tree' в данной form
  var length = treeChecks.length; //Длина массива

function setAttrTree(sw,ThInd){
       for(var i=ThInd+1;i<length; i++) {  //Перебираем все индексы от следующего за текущим, до конца
           var el = $(treeChecks[i]);
           el.find('input').attr('disabled',sw);
           //el.toggle(!sw); //Показ - Скрытие
           if(el.hasClass('all')&&!sw) {sw = el.find('input[type="checkbox"]')[0].checked;}
           var str='';if(sw)str ='No Access';
           el.find('input[type="text"]').attr('placeholder',str);
           if(!sw&&!el.hasClass('all')) {swTH = el.find('input[type="checkbox"]')[0].checked;
               var str='';if(swTH)str ='No Access';
               el.find('input[type="text"]').attr('disabled',swTH).attr('placeholder',str);
           }


       }

} 
   // Первоначальная установка;
   var check=$('span.tree.all input[type="checkbox"]:first',form) 
   setAttrTree(check,0);


  $('span.tree.all input[type="checkbox"]',form) .change(function(){ //Cрабатывание onchange для input sel_all
       var sw = this.checked;
       var ThInd = treeChecks.index($(this).parent()[0]); //Текущий индех данного span в массиве
       setAttrTree(sw,ThInd)
  });

  $('span.tree:not(.all) input[type="checkbox"]',form) .change(function(){//Cрабатывание onchange для любых, кроме input sel_all
       var sw = !this.checked;
       var str='';if(!sw)str ='No Access';
       $(this).parent().find('input[type="text"]').attr('disabled',!sw).attr('placeholder',str);
  });
}
</script>
</head> 


<body> 
<form id='formN1' name='form' action='' method='post'> 
<pre> 
	  <span class='tree all'>Не заполнять <input checked type='checkbox' name='sel_all'></span>
		<span class='tree'>Вариант 1 <input id='items_1' type='checkbox'>  <input type='text'></span>
		<span class='tree'>Вариант 2 <input id='items_2' type='checkbox'>  <input type='text'></span>
		<span class='tree'>Вариант 3 <input id='items_3' type='checkbox'>  <input type='text'></span>
		<span class='tree all'>Тоже не заполнять <input type='checkbox' name='sel_all'></span>
			<span class='tree'>Вариант 1.1 <input id='items_1' type='checkbox'>  <input type='text'></span>
			<span class='tree'>Вариант 2.1 <input id='items_2' type='checkbox'>  <input type='text'></span>
			<span class='tree'>Вариант 3.1 <input id='items_3' type='checkbox'>  <input type='text'></span>
		<span class='tree all'>И это тоже не заполнять <input type='checkbox' name='sel_all'></span>
				<span class='tree'>Вариант 1.1 <input id='items_1' type='checkbox'>  <input type='text'></span>
				<span class='tree'>Вариант 2.1 <input id='items_2' type='checkbox'>  <input type='text'></span>
				<span class='tree'>Вариант 3.1 <input id='items_3' type='checkbox'>  <input type='text'></span>
</pre> 
</form>
<form id='formN2' name='form' action='' method='post'> 
<pre> 
	  <span class='tree all'>Не заполнять <input checked type='checkbox' name='sel_all'></span>
		<span class='tree'>Вариант 1 <input id='items_1' type='checkbox'>  <input type='text'></span>
		<span class='tree'>Вариант 2 <input checked id='items_2' type='checkbox'>  <input type='text'></span>
		<span class='tree'>Вариант 3 <input id='items_3' type='checkbox'>  <input type='text'></span>
		<span class='tree all'>Тоже не заполнять <input checked type='checkbox' name='sel_all'></span>
			<span class='tree'>Вариант 1.1 <input id='items_1' type='checkbox'>  <input type='text'></span>
			<span class='tree'>Вариант 2.1 <input checked  id='items_2' type='checkbox'>  <input type='text'></span>
			<span class='tree'>Вариант 3.1 <input id='items_3' type='checkbox'>  <input type='text'></span>
		<span class='tree all'>И это тоже не заполнять <input type='checkbox' name='sel_all'></span>
				<span class='tree'>Вариант 1.1 <input id='items_1' type='checkbox'>  <input type='text'></span>
				<span class='tree'>Вариант 2.1 <input checked id='items_2' type='checkbox'>  <input type='text'></span>
				<span class='tree'>Вариант 3.1 <input id='items_3' type='checkbox'>  <input type='text'></span>
</pre> 
</form>
<script>
$(document).ready(function(){
   $('#formN1').form_menu();
   $('#formN2').form_menu();
});
</script>
</body> 
</html>

Все так, только зачем убрали возможность скрывать элементы, как было в предыдущей форме. То есть, по сути нужно объединить то что было до этого(в плане возможности прятать поля) и то что сейчас. Еще если можно прокаментить код, что б мог сам какие-то мелочи подправить если нужно будет :) Если не сложно, конечно.

Поправил

А галки менять при скрытии ?

да. Заметил еще такой момент если снять "Не заполнять", потом установить "Тоже не заполнять" и снова поставить, снять ""Не заполнять"", то открывается форма с установленной галкой "Тоже не заполнять", но дочерние элементы не спрятаны.

вроде как да ,спасибо :) люто плюсую, неистово благодарствую :)
Если можно убрать cheked c "Не заполнять " по умолчанию, лучше это с помощью html сделаю/
Если появятся вопросы, напишу, надеюсь не откажите в помощи :)

Цитата:

Сообщение от jorik

Если можно убрать cheked c "Не заполнять " по умолчанию, лучше это с помощью html сделаю/

Убрать строку

Цитата:

$('span.tree.all input[type="checkbox"]:first',form).click()

HTML(ом) тогда придётся прописывать disable во всех полях, перебор идёт по событию, хотя мон добавить начальную проверку установку

Цитата:

Сообщение от Deff (Сообщение 238651)

Убрать строку

HTML(ом) тогда придётся прописывать disable во всех полях, перебор идёт по событию, хотя мон добавить начальную проверку установку

было бы неплохо :)

Цитата:

Сообщение от jorik

было бы неплох

Добавил во второй Вариант

оно, только сворачивание при установленном чекбоксе снова пропало.

Цитата:

Сообщение от jorik

оно, только сворачивание при установленном чекбоксе снова пропало.

Не увидел смысла в сворачивании - коли дизаблить, а если не дизаблить - см Вариант 1

смысл в том, что если не заполнять, чтоб было меньше инфы на странице (и так перегружена), дисаблить - это больше для выбора заполнения уже отдельных полей. ну и + чтоб можно было выставить по умолчанию, что чекед, а что нет через хтмл

Оно и так выставляется по умолчанию! (Как прописаны в HTML
Для скрытия - раскомментируйте строку 16