Capturar Todos Checkbox Marcados E Imprimir

Estou desenvolvendo algo aqui só com o propósito de me desafiar mesmo. É um simples formulário, contendo checkboxes principalmente, onde assim que submetidos os dados, o meu script irá deixar impresso na tela apenas as opções selecionadas nos checkbox. Além disso, é tudo dividido em grupos. Assim por exemplo (no exempo não tem outros campos, mas a intenção é misturar tudo que é tipo de campo):

 Capture.JPG   17.37KB   9 downloads

Por enquanto só preciso de uma mão para capturar todos os Ids que eu definir em getElementById, ou então todas as tags que eu definir com getElementsByTagName.

Minha idéia (de girico, mas não deixando de ser idéia) é capturar as minhas DTs (que é onde eu coloco os titulos de "Grupo 1", "Grupo 2") imprimir o título se ele já não existir, pegar todas as checkbox com "g1" (no caso de grupo 1), "g2" (no caso de grupo 2)... (vai incrementando na medida que tiver checkbox daquele grupo) e imprimir apenas aquelas que estavam selecionadas.

Pode ser feito de outra forma? Tá muito muito burro?

Minha estrutura está assim por enquanto (para vocês terem idéia de como vou trabalhar com o JS):

<form name="teste" onSubmit="lista();">
<dl>
<dt id="titulo">Grupo 1</dt>
<dd>Checkbox 1 <input type="checkbox" name="grupo1" value="g1/item 1"></dd>
<dd>Checkbox 2 <input type="checkbox" name="grupo1" value="g1/item 2"></dd>
<dd>Checkbox 3 <input type="checkbox" name="grupo1" value="g1/item 3"></dd>
<dd>Checkbox 4 <input type="checkbox" name="grupo1" value="g1/item 4"></dd>
</dl>
<dl>
<dt id="titulo">Grupo 2</dt>
<dd>Checkbox 1 <input type="checkbox" name="grupo2" value="g2/item 1"></dd>
<dd>Checkbox 2 <input type="checkbox" name="grupo2" value="g2/item 2"></dd>
<dd>Checkbox 3 <input type="checkbox" name="grupo2" value="g2/item 3"></dd>
<dd>Checkbox 4 <input type="checkbox" name="grupo2" value="g2/item 4"></dd>
</dl>
<input type="submit" value="Enviar"><BR><BR><BR>
</form>

O meu value possui a "/" pq é através dela que pretendo pegar a que grupo pertence (dividindo os valores).

Edição feita por: Firehalk, 05/02/2008, 20:02.

Hoje eu tô um pouco ruim da cabeça, não consigo ler e entender fácil.

Mas, uma idéia é pegar todos os campos, verificar se o campo é checkbox, pegar o atributo name de cada campo e verificar qual é do grupo 1 e qual é do 2, com um indexOf(), uma ER ou até um split().

Concordo com o Alex:

• Pegar os elementos -- document.getElementsByTagName('input'); .
• Verificar se é checkbox -- if(elemento[x].type=='checkbox'){}.
• Separar o grupo do item -- elemento[x].name.split('/');

Por aí vai ... qdo vc colocar a mão na massa pode ser que enfrente alguma dificuldade. Qq coisa é só voltar aqui, neste mesmo canal, neste memso horário. ^__^'

Valeu pelo retorno!

Só pergunto uma coisa, como eu posso fazer para saber que terminou o número de elementos do grupo 1 e que foram pro grupo 2, 3, 4... enfim?

Não consigo ter uma idéia de como fazer isso. Quero deixar dinâmico, então não posso me deter em grupo 1 e grupo 2 apenas, tenho que fazer algo não tão burro.

Por enquanto cheguei a isso (alguns trechos do código são dos meus testes, no caso dos grupos por exemplo):

function meuclick() {
var form = document.forms['teste'];
var elementos = form.elements;


var c = 0;

for (x=0;x<elementos.length;x++) {

	if (elementos[x].type.toLowerCase()=='checkbox') {

	var grupo = elementos[x].value.split('/');

	gt = document.createElement("div");
	gt.setAttribute("id","grupos");
	gt.appendChild(document.createTextNode(grupo[0]+'\n'));
	document.getElementById("retorno").appendChild(gt);

	c++;
	}

}

}

Isso mata a questão de pegar os checkboxes. Aquela div que eu crio no meio do código é para testar a captura de todos os grupos dentro da minha array.

Não consigo pensar num meio de detectar que chegou ao fim de um grupo e chegou ao inicio de outro.

Aquele meu contador (var c) é apenas para detectar o início do looping. Tava pensando em fazer algo com ele para detectar o início do looping por grupos, assim sempre quando c = 0 ele imprime na tela o grupo atual. Para ficar na prática assim o retorno final:

Grupo 1
- Checkbox 1 (x)
- Checkbox 3 (x)
- Checkbox 4 (x)

Grupo 2
- Checkbox 2 (x)
- Checkbox 4 (x)

e assim por diante...

Alguma outra luz?

Edição feita por: Firehalk, 08/02/2008, 08:18.

Não consigo pensar num meio de detectar que chegou ao fim de um grupo e chegou ao inicio de outro.

Aquele meu contador (var c) é apenas para detectar o início do looping. Tava pensando em fazer algo com ele para detectar o início do looping por grupos, assim sempre quando c = 0 ele imprime na tela o grupo atual. Para ficar na prática assim o retorno final:

Grupo 1
- Checkbox 1 (x)
- Checkbox 3 (x)
- Checkbox 4 (x)

Grupo 2
- Checkbox 2 (x)
- Checkbox 4 (x)

e assim por diante...

Alguma outra luz?

Cara será que vc colocando algo nas ID dos objetos para a separação não pode lhe ajudar ?

Tipo assim:
<input type="checkbox" id="g11" name="grupo2" value="g1/item 1">
<input type="checkbox" id="g12" name="grupo2" value="g1/item 2">

<input type="checkbox" id="g21" name="grupo2" value="g2/item 1">
<input type="checkbox" id="g22" name="grupo2" value="g2/item 2">
<input type="checkbox" id="g23" name="grupo2" value="g2/item 3">
...

Ai vc anda pela string do Id e pode separar!

Valeu retorno Renan!

Não acho que teria muita vantagem com relação ao meu código de criar o atributo id e colocar vários valores lá ao invés de por dentro de value. Mas, achei interessante pra deixar os meus valores do form limpos. Então mudei pouca coisa no código, agora estou pegando os valores que preciso das minhas IDs e retirei o "g". era inútil nesse caso.

No índice 0 da minha array, eu vejo os grupos que existem. Como posso fazer para contar quantos grupos diferentes existem? Acho que descobrindo isso eu mato tudo aqui.

Exemplo:

grupo[0] = 1
grupo[0] = 1
grupo[0] = 1
grupo[0] = 2
grupo[0] = 2
grupo[0] = 3

No caso do exemplo acima tenho 3 valores diferentes. Como faço para o JS contar quantos valores diferentes eu tenho dentro de um índice da minha array?

Tava pensando em criar uma nova array, com os grupos apenas (array dentro de array) asiim quando eu estiver no ínicio de cada array dos grupos apenas, ele imprime "Grupo 1" e em diante, e logo em seguida os checkboxes marcados daquele grupo.

Tô tentando assim:

function meuclick() {
var form = document.forms['teste'];
var elementos = form.elements;

for (x=0;x<elementos.length;x++) {

	if (elementos[x].type.toLowerCase()=='checkbox') {

	var grupo = elementos[x].id.split('/');
	
	
		for (var n=0;n<grupo[0].length;n++) {
		
			if (!mg) {
			var mg = new array();
			}
			// Aqui seriam acrescentados itens na array...
			
						
		}
		

}

}

}

Mas aquele grupo[0].length obviamente nao funciona, visto que se adiciono um campo com outro grupo, ele vai continuar com mesmo número de índice. Preciso então contar quantos itens diferentes tenho dentro de grupo[0].


HTML (trecho):

<dt id="titulo">Grupo 1</dt>
<dd>Checkbox 1 <input type="checkbox" name="grupo1" id="1/1" value="item 1"></dd>
<dd>Checkbox 2 <input type="checkbox" name="grupo1" id="1/2" value="item 2"></dd>
<dd>Checkbox 3 <input type="checkbox" name="grupo1" id="1/3" value="item 3"></dd>
<dd>Checkbox 4 <input type="checkbox" name="grupo1" id="1/4" value="item 4"></dd>
</dl>
<dl>
<dt id="titulo">Grupo 2</dt>
<dd>Checkbox 1 <input type="checkbox" name="grupo2" id="2/1" value="item 1"></dd>
<dd>Checkbox 2 <input type="checkbox" name="grupo2" id="2/2" value="item 2"></dd>
<dd>Checkbox 3 <input type="checkbox" name="grupo2" id="2/3" value="item 3"></dd>
<dd>Checkbox 4 <input type="checkbox" name="grupo2" id="2/4" value="item 4"></dd>
</dl>

Cara pensei o seguinte!

No name do input deixe só o numero do grupo ...
ai vc manda para a array no espaço desejado (através do seu loop):

grupo = document.getElementByTagName("input").name

Para contar o numero de itens de um determinado grupo um 'contador' não ajudaria?

Cara vou pensar em algo aqui ... espero poder ajudar mais!

Eu acho que vocês estão complicando demais ...

Acabei de comer umas coxinhas e to meio parrudo no momento. Mais tarde eu leio inteiro o tópico e respondo. Mas a princípio não vejo necessidade do id ...

Eu acho que vocês estão complicando demais ...

Acabei de comer umas coxinhas e to meio parrudo no momento. Mais tarde eu leio inteiro o tópico e respondo. Mas a princípio não vejo necessidade do id ...

Para de comer porcaria rapaz.

Bom, de fato eu estava complicando demais. Eu consegui fazer agora a base de tudo como eu queria. Acontece que não é 100% dinâmico. Fiz um trecho pro usuário configurar o script de acordo com as necessidades (tem também a config do html).

java script:

function lista() {

// CONFIG //////////////////////
var total_grupos = 2;
var nome_do_form = 'teste';
/////////////////////////////////


var form = document.forms[nome_do_form];
var elementos = form.elements;

	for (x=0; x<total_grupos;x++) {

	document.write('<br>Grupo '+(x+1)+'<br><br>');

		for (n=0;n<elementos.length;n++) {
		
		var grupos = elementos[n].id;

			if ((grupos==x+1) && (elementos[n].checked==true)) {
			document.write(elementos[n].value+' estava marcado;<br>');
			}
		}

	}
document.close();
}

HTML (body):

<form name="teste" onSubmit="lista();">
<dl>
<dt id="titulo">Grupo 1</dt>
<dd>Checkbox 1 <input type="checkbox" name="grupo1" id="1" value="item 1"></dd>
<dd>Checkbox 2 <input type="checkbox" name="grupo1" id="1" value="item 2"></dd>
<dd>Checkbox 3 <input type="checkbox" name="grupo1" id="1" value="item 3"></dd>
<dd>Checkbox 4 <input type="checkbox" name="grupo1" id="1" value="item 4"></dd>
</dl>
<dl>
<dt id="titulo">Grupo 2</dt>
<dd>Checkbox 1 <input type="checkbox" name="grupo2" id="2" value="item 1"></dd>
<dd>Checkbox 2 <input type="checkbox" name="grupo2" id="2" value="item 2"></dd>
<dd>Checkbox 3 <input type="checkbox" name="grupo2" id="2" value="item 3"></dd>
<dd>Checkbox 4 <input type="checkbox" name="grupo2" id="2" value="item 4"></dd>
</dl>
<input type="submit" value="Enviar"><BR><BR><BR>
</form>

O único campo agora que depende de alteração no HTML é o campo id. Mesmo que eu queria imprimir os values depois, não tem necessidade mais de "/" e etc.

Mas colocar um for dentro de for não é algo meio estúpido?

Edit: hmmm no IE 7.0 não funciona.

Edit2: Opa, não tinha visto o comentário do Renan! Foi isso que eu fiz (acho). Me utilizei de 2 "contadores" (2 For): 1 para pegar os grupos e imprimir na tela o grupo referente, e o outro para pegar os campos marcados de determinado grupo.

Edição feita por: Firehalk, 08/02/2008, 14:26.

Colocar for dentro de for não tem nada de estúpido, e em muitos casos se faz necessário. O problema com o IE7 é referente aos IDs. Você não pode repetir um ID, ele é identificador único. ^__^'

Colocar for dentro de for não tem nada de estúpido, e em muitos casos se faz necessário. O problema com o IE7 é referente aos IDs. Você não pode repetir um ID, ele é identificador único. ^__^'

Ihh não é isso não.

Já tentei utilizando id's diferentes, e não rolou não...

No IE ele não mostra nem todos os grupos na tela, ao dar submit. Mostra apenas o grupo 1.

Descobri que esse bug se resolve adicionar onde tem isso:

document.write('<br/>Grupo '+(x+1)+'<br/><br/>');

Isso

document.write('<br/>Grupo '+(x+1)+'<br/><br/>');
document.write('');

Qual a razão disso? Não faço a mínima idéia...

A propósito, exibir as opções marcadas ele ainda não exibe no IE.

Edição feita por: Firehalk, 08/02/2008, 17:52.

Como o script entra em loop, é bom gravar as informações em uma variável e depois usar o write() com a variável.

Também acho que vocês estão complicando um pouco. Dá para fazer um script com o mesmo número de linhas que esse seu e mais dinâmico, sem precisar de variáveis de configuração.

Se a estrutura do seu html é sempre essa, com dl para cada grupo; dt para o título e dd para os campos, é só contar o número de dl (grupos); procurar o título (dt) e imprimir o seu nodeValue; pegar todos os campos dentro do grupo, verificar se está checado e imprimir o seu value. Fazendo isso, o resultado pode ficar assim:

Grupo 1
item 1
item 3

Grupo 2
item 4
item 2

E você pode adicionar ou remover quantos grupos quiser, sem precisar marcar o número de grupos.

Tente aí, qualquer coisa eu posto o que fiz aqui.

Alex,

o que eu não sei como fazer é pegar os campos dentro de determinado grupo. Pensei em continuar usando nextSibling e afins, mas aí eu empaco na hora de pegar todos os que estão dentro do grupo "x". Quanto aos títulos, eu consegui fazer, e segui o conselho de colocar numa var e imprimir o resultado só depois. Assim:

function lista() {
var grupos = document.getElementsByTagName("dl").length;

	for (x=0;x<grupos;x++) {
	
	var titulo = document.getElementsByTagName("dl")[x].firstChild.nextSibling.innerHTML;
	//var comp = document.getElementsByTagName("dl")[x].firstChild.nextSibling.nextSibling.nextSibling.length; --> Estava tentando assim com os DD
	
		if (!texto) {
		var texto = '<h1>'+titulo+'</h1>';
		} else {
		texto += '<h1>'+titulo+'</h1>';
		}
		
	}
	
	
document.write(texto);
document.close();

}

O problema de usar nextSibling/parentNode/etc é que no FF e Opera funciona, mas como o IE não interpreta/vê certos espaços, dá tilt e não funciona lá. Aí começa a complicar.

Se puder me dar mais um empurrão, te agradeço muito.

Abraços!

Edição feita por: Firehalk, 11/02/2008, 08:17.

É, o espaço também é considerado um node, em alguns navegadores. Você tem que verificar qual é o tipo de nó, mas dá para resolver isso sem muita complicação, veja o que eu tinha feito:

function lista() {
	var listaTudo="";
	var list = document.getElementsByTagName("dl");
	for (var gs=0; gs<list.length; gs++)
	{
		var campos = list[gs].getElementsByTagName("input");
		listaTudo += "<h3>"+list[gs].getElementsByTagName("dt")[0].childNodes[0].nodeValue+"</h3>";
		for (var gc=0; gc<campos.length; gc++)
		{
			listaTudo += (campos[gc].checked) ? campos[gc].value+"<br />" : "";
		}
	}
	document.write(listaTudo);
	document.close();
}

O html é o mesmo que o seu, eu só tirei o id="titulo" da DL porque, como o bimonti falou, o id é único. Se for para destacar esse elemento, use uma class.

Fiz testes no Firefox, Opera, IE 6 e 7. Todos funcionam perfeitamente. Tente entender essa script, o que não souber é só postar aí ou então procurar no site do Mozilla http://developer.moz.../docs/Main_Page

Alex,

entendi a lógica toda que tu aplicou sim. Ainda não consigo ver as coisas tão simples assim (se eu fosse criar do zero) mas um dia eu chego lá...

A propósito, só vou perguntar mais uma coisa. Nesse trecho:

listaTudo += (campos[gc].checked) ? campos[gc].value+"<br />" : "";

Isso é o mesmo que fazer um If, certo? Tem nome esse tipo de declaração em uma linha?