[Resolvido] Recuperar value de checkbox dinâmico via AJAX

[crisaum 0]

Pessoal, boa tarde!

 

Não tenho certeza em qual categoria se encaixa minha dúvida, mas vamos as explicações:

 

**** Idéia

Dentro de um sistema que roda totalmente em AJAX, preciso enviar através de um formulário algumas informações (input text, combo e checkbox) que a princípio eram simples, mas com a chegada do checkbox complicou um pouco.

 

**** Problema

O formulário tem uma validação que valida e transfere as informações do form para um arquivo ASP com a função final, não tenho nenhum problema com o ASP, é apenas na parte do javascript que deveria trazer os valores "checados" no checkbox group.

 

Código formulário

<form action="enviaFormGrupos" name="formGrupos" id="formGrupos">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td width="330" valign="top"> 

<table border="0" cellpadding="2" cellspacing="0" class="global_layout_sessoes_tabelas_textos_geral">
  <tr>
    <td>Instituição:</td>
    <td><select name="cbxInstituicao" id="cbxInstituicao" class="global_layout_sessoes_tabelas_textos_input_text" onchange="chamaSupervisores(this.value);">
      <%
 dim sqlSelect
 sqlSelect = "select codigo, instituicao from t_instituicao order by instituicao asc"

 '* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

 dim dados_instituicao
 dados_instituicao = select_sql(sqlSelect, "", "", "", "")

 '* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

 if (isArray(dados_instituicao) = true) then

  response.write("<option value="& chr(34) &"0"& chr(34)&">Selecione uma instituição</option>"& chr(13))

  linhas  = ubound(dados_instituicao ,2)
  colunas = ubound(dados_instituicao ,1)
  cont  = 0

  do while cont <= linhas

   response.write("<option value="& chr(34) & dados_instituicao(0, cont) & chr(34)&">"& dados_instituicao(1, cont) &"</option>"& chr(13))
   cont = cont + 1

  loop

 else
  response.write("<option value="& chr(34) &"-1"& chr(34)&">Nenhum registro no banco</option>")
 end if 
 %>
      </select></td>
    </tr>
  <tr>
    <td>Modalidade:</td>
    <td>
       <select name="cbxModalidade" id="cbxModalidade" class="global_layout_sessoes_tabelas_textos_input_text">
      <option value="0" selected="selected">Selecione uma modalidade</option>
         <option value="1">Cursos Livres Profissionalizantes</option>
         <option value="2">Técnico</option>
         <option value="3">Graduação</option>
         <option value="4">Pós Graduação</option>
         <option value="5">Workshop / Seminário</option>
         <option value="6">Corporativo</option>
         <option value="7">Eventos</option>
       </select>
       </td>
  </tr>
  <tr>
 <td width="140">Nome do grupo: </td>
 <td><input name="txtTitulo" type="text" class="global_layout_sessoes_tabelas_textos_input_text" id="txtTitulo" size="35" /></td>
  </tr>
   </table>
   <div id="global_supervisores"></div>

<div id="layout_painelAlertas">Lembre-se de preencher TODOS os campos acima.</div>

</td>
   <td valign="top"><div id="retorno"></div></td>
 </tr>
</table>

</form>

 

Código de onde está o checkbox - default_supervisores.asp

<% response.charset = "iso-8859-1" %>
<!--#include file="../painelctrl_checagem.asp"-->
<%
idInstituicao = request.querystring("id")

if idInstituicao <> "" then
%>
   <table border="0" cellpadding="2" cellspacing="0" class="global_layout_sessoes_tabelas_textos_geral">
     <tr>
       <td valign="top" width="126">Supervisores:</td>
       <td>
       <%
       sqlSelect = "select cod_usuario, nome from t_usuario_cad_basico where ((tipo = 4) and (ativo = 1) and (cod_instituicao = '"& idInstituicao &"'))"
       dadosSupervisores = select_sql(sqlSelect,"","","","")

       if isarray(dadosSupervisores) = true then

           for ds = 0 to ubound(dadosSupervisores,2)
       %>
           <input type="checkbox" name="chkSupervisor" id="chkSupervisor_<%=ds%>" value="<%=dadosSupervisores(0,ds)%>" /> <%=dadosSupervisores(1,ds)%><br />
       <%
           next
       %>
       <% else %>
        Nenhum supervisor cadastrado para esta instituição<input type="hidden" id="chkSupervisor_0" name="chkSupervisor" value="0" />
 <% end if %>
       </td>
     </tr>
   </table>
<% end if %>

 

Código javascript

function enviaFormGrupos(act) {

formReady = 1;

// campo de instituicao
if(document.getElementById("cbxInstituicao").value == "") {
 apresentaAlertas('1', 'INSTITUIÇÃO');
 document.getElementById("cbxInstituicao").focus();
 return(false);
 formReady = 0;
}

// campo de modalidade
if(document.getElementById("cbxModalidade").value == "") {
 apresentaAlertas('1', 'MODALIDADE');
 document.getElementById("cbxModalidade").focus();
 return(false);
 formReady = 0;
}

// campo de título
if(document.getElementById("txtTitulo").value == "") {
 apresentaAlertas('1', 'NOME DO GRUPO');
 document.getElementById("txtTitulo").focus();
 return(false);
 formReady = 0;
}

if(formReady == 1) {

 // pegando valores dos campos
 if(act != 1){
  var txtIdGrupo = document.getElementById("txtIdGrupo").value;
 }

 var cbxInstituicao = document.getElementById("cbxInstituicao").value;
 var cbxModalidade = document.getElementById("cbxModalidade").value;
 var txtTitulo  = document.getElementById("txtTitulo").value;

 var chkSupervisor = "";
 var e = document.getElementsByName("chkSupervisor").length;
 var cnt = 0;
 alert(e);
 for(cnt = 0; cnt < e; cnt++){
  if(document.getElementsByName("chkSupervisor").checked == true){
   alert(document.getElementsByName("chkSupervisor").value+"\n id:"+cnt);
   chkSupervisor = document.getElementsByName("chkSupervisor").value +"_";
  }
 }


 // criando variável de parametros
 var parametros  = "";
 var actTarget  = "adicionar";

 if(document.getElementById("txtIdGrupo")){
  parametros += "txtIdGrupo="+ txtIdGrupo +"&";
  actTarget  = "editar";
 }
 alert(chkSupervisor);
 parametros += "cbxInstituicao="+ url_encode(cbxInstituicao) +"&";
 parametros += "cbxModalidade="+ url_encode(cbxModalidade) +"&";
 parametros += "txtTitulo="+ url_encode(txtTitulo) +"&";
 parametros += "chkSupervisor="+ url_encode(chkSupervisor) +"&";

 // chamando função ajax de post  
 enviaForm('master', 'grupos_'+ actTarget +'_action', parametros)
}

}

 

**** Funcionamento

Basicamente o form tem apenas os campos cbxInstituicao, cbxModalidade e txtTitulo. De acordo com o id selecionado no cbxInstituicao, entra na div global_supervisores um include com apenas a listagem dos checkbox da instituição selecionada.

 

**** O que preciso

Todos os 3 campos que existem no form inserem e alteram normalmente em meu sistema, já nosso querido amigo checkbox está se fazendo de difícil, a única forma de eu conseguir algum valor inteiro (id) deles é utilizando o getElementByName, mas ele traz apenas o primeiro id da lista e nada mais.

No caso, neste lista inicial em que estou fazendo teste tenho 4 nomes com ids, mas esta lista é dinâmica, eu poderia fazer um "ajuste técnico" passando manualmente os nomes dos checkbox e recuperar seus valores através do checked, mas vai tirar o dinamismo do meu sistema.

 

Tentei desde ontem encontrar algo parecido no google, mas a grande maioria dos resultados da pesquisa foram algo como "aceito" ou "mostra div", nada relacionado com recuperar os valores do campo checkbox passado como um array, pois eles tem o mesmo nome mudando apenas os value, alguém tem uma luz ou estou reinventando a roda?

 

[]'s

[crisaum 0]

Pela quantidade de visitas e nenhuma resposta imagino que o que estou tentando fazer seja impossível, vou tentar outra forma. :(

 

Se alguém tiver uma luz, por favor compartilhe!

 

[]'s

[William Bruno 1501]

você precisa resgatar apenas os checkbox marcados, certo ?

 

o name deles deve ser um array, ok?

<input type="checkbox" name="chkSupervisor[]"

 

dai então, você vai usar a função getElementsByTagName() para pegar todos os inputs da pagina.

Compare o atributo .type para saber q se trata de um checkbox, e o atributo .checked para saber se ele foi checado.

 

Assim você monta a query string, e envia para o ajax.

[crisaum 0]

Boa tarde William,

 

Tentei fazer o que você recomendou mas acho que não estou fazendo certo, olha a modificação que fiz e não está funcionando:

 

 

var chkSupervisor = "";
var obj = document.getElementsByTagName("chkSupervisor[]");
var tam = obj.length;
var cnt = 0;

//alert(tam);

for(cnt = 0; cnt < tam; cnt++){
 if(obj.checked == true){
  //alert(obj.value+"\n id:"+cnt);
  chkSupervisor + obj.value +"_";// o underline é meu separador para fazer o split no outro lado da aplicação
 }
}

 

 

Teoricamente fiz certo, mas não consigo entender o porque ele não passa os selecionados.

[William Bruno 1501]

var obj = document.getElementsByTagName("input");

e ai:

if(obj[ cont ].checked == true){

entendeu as diferenças ?

[crisaum 0]

Mais ou menos, realmente para pegar o valor certo precisava do contador e já adicionei ao meu código, mas não entendo o porque da minha matriz vir vazia, se pegasse um único valor ainda teria o que quebrar a cabeça, mas não pegar nenhum tá me deixando encucado.

 

Fiz o seguinte:

 

 

 

Alterei meu input para

 

<input type="checkbox" id="chkSupervisor" name="chkSupervisor[]" value="<%=dadosSupervisores(0,ds)%>" /> <%=dadosSupervisores(0,ds)%>

 

e o javascript para

 

var chkSupervisor = "";
var obj = document.getElementsByTagName("chkSupervisor[]");
var tam = obj.length;
var cnt = 0;

//alert(tam);

for(cnt = 0; cnt < tam; cnt++){
 if(obj[cnt].checked == true){
  //alert(obj.value+"\n id:"+cnt);
  chkSupervisor + obj[cnt].value +"_";// o underline é meu separador para fazer o split no outro lado da aplicação
 }
} 

// criando variável de parametros
var parametros  = "";
parametros += "tam="+ tam +"&chkSupervisor="+ chkSupervisor +"&";

 

A resposta da query foi tam=0&chkSupervisor=&, dá pra acreditar? Tentei trocar o nome do meu checkbox no script para ver se era o problema, mas continua na mesma.

[William Bruno 1501]

o name da tag é input. :lol:

 

veja denovo:

 var obj = document.getElementsByTagName("input");

[crisaum 0]

Pode crer, troquei e funcionou. Eu imaginava que eu deveria declarar o id do checkbox para que ele soubesse de onde vem o valor, assim como é nos outros campos. Neste caso, se eu tivesse um segundo checkbox com outro nome e possivelmente os mesmos valores (1, 2, 3 etc) eu preciso de algum id para identificá-los ou será criado um array para cada id diferente dentro da tag checkbox?

 

Desculpa fazer algumas perguntas lógicas, mas ainda não tenho muita experiência com AJAX avançado, só o básico mesmo.

[William Bruno 1501]

sim sim, você entendeu.

 

nesse caso eu separaria por fieldsets.

Note que não estamos fazendo nada de ajax aqui, apenas javascript.

 

 

 

<fieldset id="grupo1">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</fieldset>

<fieldset id="grupo2">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</fieldset>

ai você usuaria o seguinte para pegar os checks apenas do segundo grupo:

document.getElementById('grupo2').getElementsByTagName('input')

 

entendeu ?

esse post, pode te ajudar:

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

[crisaum 0]

Nossa, agora entendi sim, muito obrigado!

 

Vou dar uma lida nesse conteúdo que me passou com toda certeza, desculpe fazer as perguntas meio óbvias mas são "ossos do ofício" né ... kkkkk

 

Mais uma vez, muito obrigado William! É sempre bom compartilhar conhecimentos, espero poder ajudar em outras áreas do fórum como você me ajudou hoje. Ah! E pode fechar o tópico.

 

abraço!