Arra Bidimencional. Pegar value

[Carcleo 4]

Pessoal, tenho a seguinte função:

function valida_cad_empresa2(form,string_array)

{


    var servico = new Object();

    servico = string_array.split('|');



   for (var key in servico)

   {

       alert(key);

       for (key2 in document.getElementsByName('nomeTipo['+key+']'))

       {

           alert(key2);

          if (document.getElementsByName('nomeTipo['+key+']['+key2+']').value =="")

         {

              alert("Preencha Nome do Tipo: campo obrigatório!");

              document.getElementsByName('nomeTipo['+key+']['+key2+']').focus();

              return (false);

         }

    }


}

A idéia é pegar o valor do campo

<input type="text" id="nomeTipo0" name="nomeTipo[2][0]" autocomplete="off">

o

..nomeTipo[2]....

é variavél conforme temos ids diferentes de serviços vindos de um loop numa query ao banco.

Exemplo:

..nomeTipo[2], nomeTipo[5], nomeTipo[8]....

E o segundo parâmetro [0], vem de um loop JS com a finalidade de criar campos adicionais para cada nomeTipo[] que houver.

Minha função não esta pegando o value

Como fazer para validar?

que vem do formulário.

Eis o form:

      <form action="?acao=gravatipos&ultimo_id=<?php echo $ultimo_id; ?>" method="post" name="gravatipos" id="gravatipos">

        <h2><br />Cadastro de empresas (Passo 2/2)<h2><br />

<?php    

         $contador2=0;

$string_array = implode('|', $_POST["servico"]);

foreach($_POST["servico"] as $servico)

{

$nomeServicoString="SELECT nome FROM servicos WHERE id=".$servico;

$nomeServicoQuery=$conexao->Query($nomeServicoString);

list($servicoNome)=$nomeServicoQuery->fetch_row();

echo " <label>Tipos para o serviço: ".$servicoNome."</label><br />";

?>

  <fieldset>

    <legend>Tipo</legend>

    <label class='passo2'>Nome Tipo: </label><input type='text' id='nomeTipo0' name='nomeTipo[<?php echo $servico;?>][0]'><br />

    <label class='passo2'>Qtde Pessoas: </label><input type='text' onkeypress="BloqueiaLetras();" id='qtdePessoas0' name='qtdePessoas[<?php echo $servico;?>][0]'><br />

    <label class='passo2'>Preço: </label><input type='text' class="real" id='preco0' name='preco[<?php echo $servico;?>][0]'><br />

    <label class='passo2'>Descrição: </label>

    <textarea id='descricao0' name='descricao[<?php echo $servico;?>][0]'></textarea><br />

  </fieldset>

  <div id="div<?php echo $servico;?>">    

    <input type="button" value="Adicionar campos" onclick="addCampos(this.parentNode.id, <?php echo $servico;?>)" />

  </div><br><br>


<?php

          $contador2++;

}

?>


<br><br><input type="button" value="Cadastrar" onclick="valida_cad_empresa2(this.form,'<?php echo $string_array;?>')" />

         </form>

[xanburzum 169]

vc quer validar o que ? não entendi muito bem.

[Carcleo 4]

Como os campos são gerados após a criação do form via cria Inputs, então parece que, mesmo que os campos estejam lá criados no browser, o JS não encherga ele.

 

Gostaria de saber se existe:

<input type="text" id="nomeTipo0" name="nomeTipo[2][0]" autocomplete="off">

Na verdade, sabendo apenas o lenght de:

<input type="text" id="nomeTipo0" name="nomeTipo[2]" autocomplete="off">

Já é o suficiente.

Porem, é preciso fazer a validação usando getElementsByName e não ByID

 

 

Alguém sabe essa?

[paulojuchem 20]

Como os campos são gerados após a criação do form via cria Inputs, então parece que, mesmo que os campos estejam lá criados no browser, o JS não encherga ele.

se esse é o problema, armazena eles quando vc os cria no js, depois percorre a array que voce armazenou.

quando eu preciso criar campos dinamicos em formularios, eu os coloco em arrays antes de adiciona-los no html, dai fica fácil manipular os mesmos depois.

[Carcleo 4]

Hum! Acho que entendi. Mas não totalmente.

 

Você orientou a, na hora que a função criaInpus() esiver criando os novos campos, criar um array de campos criado tipo.

Array ( 0 -> nomeTipo[3][0]; 1 -> nomeTipo[3][1]; 2 -> nomeTipo[3][2]; 3 -> qtdePessoas[3][0]; 4 -> qtdePessoas[3][1]; 5 -> qtdePessoas[3][2];  6 -> nomeTipo[4][0]; 7 -> nomeTipo[4][1]; 8 -> nomeTipo[4][2]; 9 -> qtdePessoas[4][0]; 10 -> qtdePessoas[4][1]; 11 -> qtdePessoas[4][2];....)

E depois percorrer este array validando esses campos do tipo:

for (i=0;i<Array.length;i++){  if(document.getElementsByName(Array)[i]).value==""){..alert('preencha campo!');}}

Pois é, se for isso, o problema meu esta exatamente ai:

 

Como fazer para pegar o value do campo utilizando getElementsByName e não getElementById

 

 

Bom, vou ser mais específico na dúvida:

 

 

JavaScript

<script>function valida_cad_empresa2(form,string_array){     var servico = new Object();servico = string_array.split('|'); alert(document.getElementsByName('nomeTipo').length);return false;for (var key in servico){ for (key2 in document.getElementsByName('nomeTipo['+key+']').item(0)) { if (document.getElementsByName('nomeTipo['+key+']['+key2+']').item(0).value =="") { alert("Preencha Nome do Tipo: campo obrigatório!"); document.getElementsByName('nomeTipo['+key+']['+key2+']').item(0).focus(); return (false); }   } } form.submit(); }</script>

HTML

<form action="?acao=gravatipos&ultimo_id=177" method="post" name="gravatipos" id="gravatipos">        <h2><br />Cadastro de empresas (Passo 2/2)</h2><br /> <label>Tipos para o serviço: Passeio</label><br />  <fieldset>    <legend>Tipo</legend>    <label class='passo2'>Nome Tipo: </label><input type='text' id='nomeTipo0' name='nomeTipo[3][0]'><br />     <label class='passo2'>Qtde Pessoas: </label><input type='text' onKeyPress="BloqueiaLetras();" id='qtdePessoas0' name='qtdePessoas[3][0]'><br />    <label class='passo2'>Preço: </label><input type='text' class="real" id='preco0' name='preco[3][0]'><br />    <label class='passo2'>Descrição: </label>    <textarea id='descricao0' name='descricao[3][0]' cols='40' rows='5'></textarea><br />  </fieldset>  <div id="div3">        <input type="button" value="Adicionar campos" onClick="addCampos(this.parentNode.id, 3)" />  </div><br><br>            <label>Tipos para o serviço: Hospedagem</label><br />  <fieldset>    <legend>Tipo</legend>    <label class='passo2'>Nome Tipo: </label><input type='text' id='nomeTipo0' name='nomeTipo[4][0]'><br />     <label class='passo2'>Qtde Pessoas: </label><input type='text' onKeyPress="BloqueiaLetras();" id='qtdePessoas0' name='qtdePessoas[4][0]'><br />    <label class='passo2'>Preço: </label><input type='text' class="real" id='preco0' name='preco[4][0]'><br />    <label class='passo2'>Descrição: </label>    <textarea id='descricao0' name='descricao[4][0]' cols='40' rows='5'></textarea><br />  </fieldset>  <div id="div4">        <input type="button" value="Adicionar campos" onClick="addCampos(this.parentNode.id, 4)" />  </div><br><br>            <br><br><input type="button" value="Cadastrar" onClick="valida_cad_empresa2(this.form,'3|4')" /></form>

Observe a função:

No form, eu tenho um campo

nomeTipo[3][0]

Se eu pesquisar pelo:

document.getElementsByName('nomeTipo').length

Acho 0 como retorno

Mas, se eu buscar por

document.getElementsByName('nomeTipo[3][0]').length

Aí acho 1.

Parece que getElementsByName age como se fosse getElementById.

O que há de errado?

JavaScript não reconhece um array de campos de formulário?

Será isso?

Se for, alguma saída?

[paulojuchem 20]

acho que voce esta se equivocando, o nome do elemento é uma STRING não uma array,

document.getElementsByName('nomeTipo').length não existem mesmo, nome tipo não é um array, é uma string normal

 

mas acho que tem uma solucao mais facil pra isso, ao invéz de utilizar o get elements by name, pelo que eu ví são sempre os mesmos campos, entao coloca no id mesmo a variavel do numero do form, vai ficar algo assim:

 

 

Nome Tipo: <input type='text' id='nomeTipo4' /><br />      
Qtde Pessoas: <input type='text' onKeyPress="BloqueiaLetras();" id='qtdePessoas4' />

e assim por diante, dai no valida form vc passa, nesse caso o 4, mas vamos supor que tenha o 4 e o 5, dai vc da o split e no js, para validar, vc pega direto os ids, algo tipo

 

var indices = variavel_com_o_4_e_o_5.split('separador_que_vc_usar');
for(var i in indices)
{
     var nomeTipo = document.getElementById('nomeTipo'+indices[i]); //aqui esta o tipo
     var qtdePessoas = document.getElementById('nomeTipo'+indices[i]);//aqui esta a qtde e assim por diante
     if(nomeTipo.value.length == 0)
           return false;
}

agora eu nao sei se vc quer algo generico, pra qualquer form, dai muda

 

outra coisa que vc pode fazer é tirar aquele segundo colchetes[0], ele faz oq? deixa o nome somente como campoX[indiceY]

[Carcleo 4]

Consegui fazer assim(e funcionou);

function valida_cad_empresa2(form)

{

for (i=0;i<document.gravatipos.elements.length;i++)

{

      if ((document.gravatipos.elements[i].type == 'text') || (document.gravatipos.elements[i].type == 'textarea'))

 {

        if(document.gravatipos.elements[i].value == "")

{

 alert("Campo obrigatório!");

 document.gravatipos.elements[i].focus();

 return (false);

}

 }

}

form.submit();

}

Agora tenho outro problema relacionado;

Este é o HTML modificado

  <fieldset>

    <legend>Tipo</legend>

    <label class='passo2'>Nome Tipo: </label><input type='text' id='nomeTipo[<?php echo $servico;?>][0]' name='nomeTipo[<?php echo $servico;?>][0]'><br /> 

    <label class='passo2'>Qtde Pessoas: </label><input type='text' onKeyPress="BloqueiaLetras();" id='qtdePessoas[<?php echo $servico;?>][0]' name='qtdePessoas[<?php echo $servico;?>][0]'><br />

    <label class='passo2'>Preço: </label><input type='text' class="real" id='preco[<?php echo $servico;?>][0]' name='preco[<?php echo $servico;?>][0]'><br />

    <label class='passo2'>Descrição: </label>

    <textarea id='descricao[<?php echo $servico;?>][0]' name='descricao[<?php echo $servico;?>][0]' cols='40' rows='5'></textarea><br />

  </fieldset>

  <div id="div<?php echo $servico;?>">    

    <input type="button" value="Adicionar campos" onClick="addCampos(this.parentNode.id, <?php echo $servico;?>)" />

  </div><br><br>

Também tenho uma função JS que adiciona novos campos ao form.

Note que no form acima, tenho a função BloqueiaLetra() e um campo e class="real" em outro.

Nos campos que são criados no ato do carregamento do form, ambos, a funçao e a classe funcionam normal. Porém, co respeito aos campos adicionados após o carregamento do form (botão: incluir campo), apenas a funçao funciona, mas a classe não.

Qual será o erro?