Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

klonder

[Resolvido] Adicionar / remover campos dinamicamente

Por , em Javascript

Recommended Posts

visitante_xp    0

visitante_xp
Postado

Antes de var objPai coloque isso:

 

if(qtdeCampos==num){//onde num é o numero de vezes que devera executar a função
break;
}

Deve dar resultado. Deu pra entender???

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Dall'Agnol    0

Douglas Dall'Agnol
Postado

A.H.P

Eu coloquei conforme você disse mas não deu certo; quando clica em adicionar não acontece nada:

 

Segue meu código:

 

 

<html>
<head>
<script type="text/javascript">
var qtdeCampos = 0;

function addCampos() {
if(qtdeCampos==4){//onde num é o numero de vezes que devera executar a função
break;
}
var objPai = document.getElementById("campoPai");
//Criando o elemento DIV;
var objFilho = document.createElement("div");
//Definindo atributos ao objFilho:
objFilho.setAttribute("id","filho"+qtdeCampos);

//Inserindo o elemento no pai:
objPai.appendChild(objFilho);
//Escrevendo algo no filho recém-criado:
document.getElementById("filho"+qtdeCampos).innerHTML = "<fieldset><legend>Cursos Realizados</legend><label>Curso: <input type='text' id='curso"+qtdeCampos+"' name='campo[]'></label><br /><label>Local: <input type='text' id='local"+qtdeCampos+"' name='campo[]'></label><br /> <label>Nivel: <input type='text' id='nivel"+qtdeCampos+"' name='campo[]'></label><br /> <label>Carga Horária: <input type='text' id='carga"+qtdeCampos+"' name='campo[]'></label><br /></fieldset> <input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar campo'>";
qtdeCampos++;
}

function removerCampo(id) {
var objPai = document.getElementById("campoPai");
var objFilho = document.getElementById("filho"+id);

//Removendo o DIV com id específico do nó-pai:
var removido = objPai.removeChild(objFilho);
}
</script>
<title>Formulário de Cadastro</title></head>
<body>
<form name="form1" action="pegardados.php" method="post">
<fieldset><legend>Dados Pessoais</legend>
<label>Nome:
<input name="nome" type="text" />
</label><br />
<label>Endereço:
<input name="endereco" type="text" />
</label><br />
<label>E-Mail:
<input name="email" type="text" />
</label><br />
<label>Nascimento:
<input name="nascimento" type="text" />
</label><br />
</fieldset><br />
<div id="campoPai"></div>
<input type="button" value="Adicionar campos" onClick="addCampos()">
<br><br><input type="submit" value="Enviar">
</form>
</body>
</html>

 

 

 

A extensão Firebug do Firefox, ao iniciar a página informa um erro:

unlabeled break must be inside loop or switch

break;\n

 

E sempre que clico em adicioar este erro:

addCampos is not defined

 

Acredito eu que é algo de errado com a forma q adicionei o código, tentei colocar a chave de fechamento } em outros locais mas não mudou.

Compartilhar este post

Link para o post
Compartilhar em outros sites

visitante_xp    0

visitante_xp
Postado 

<script type="text/javascript">var qtdeCampos = 0;function addCampos() {if(qtdeCampos<"3"){var objPai = document.getElementById("campoPai");//Criando o elemento DIV;var objFilho = document.createElement("div");//Definindo atributos ao objFilho:objFilho.setAttribute("id","filho"+qtdeCampos);//Inserindo o elemento no pai:objPai.appendChild(objFilho);//Escrevendo algo no filho recém-criado:document.getElementById("filho"+qtdeCampos).innerHTML = "<fieldset><legend>Cursos Realizados</legend><label>Curso: <input type='text' id='curso"+qtdeCampos+"' name='campo[]'></label><br /><label>Local: <input type='text' id='local"+qtdeCampos+"' name='campo[]'></label><br /> <label>Nivel: <input type='text' id='nivel"+qtdeCampos+"' name='campo[]'></label><br /> <label>Carga Horária: <input type='text' id='carga"+qtdeCampos+"' name='campo[]'></label><br /></fieldset> <input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar campo'>";qtdeCampos++;}}function removerCampo(id) { var objPai = document.getElementById("campoPai"); var objFilho = document.getElementById("filho"+id);//Removendo o DIV com id específico do nó-pai: var removido = objPai.removeChild(objFilho);}</script>
Agora ta funfando...Imagem Postada

 

No exemplo do @Thiago tinha como fazer...^^

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nayara P.    0

Nayara P.
Postado

Olá galera! Dentro do assunto tratado, como faço para inserir dois campos ao mesmo tempo? um na frente do outro? Já tentei fazer algumas modificações nos scripts postados mas não funcionou... Obrigada! :joia:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nayara P.    0

Nayara P.
Postado

Sim, por exemplo... serão dois campos, um selct para produto e logo na sequencia um campo para o valor. Eu irei buscar os produtos na tabela do BD e darei um jeito para o valor vir junto... e se houver mais de um produto, o usuário clicará no botão que acrescentará mais dois campos de produto e valor, e ao fim de tudo terá um campo somando os valores e retornando o total. Como devo proceder para add dois campos ao mesmo tempo?

Obrigada!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nayara P.    0

Nayara P.
Postado

Eu tentei colocar os campos um na frente do outro de todas as maneiras mas ainda não deu certo... já quebrei a cabeça e não achei a solução. Olha, este é o script que estou utilizando:

<script><script type="text/javascript">var qtdeCampos = 1;function addCampos() {var objPai = document.getElementById("campoPai");//Criando o elemento DIV;var objFilho = document.createElement("div");//Definindo atributos ao objFilho:objFilho.setAttribute("id","filho"+qtdeCampos);//Inserindo o elemento no pai:objPai.appendChild(objFilho);//Escrevendo algo no filho recém-criado:document.getElementById("filho"+qtdeCampos).innerHTML = "<input type='text' id='campo"+qtdeCampos+"' name='campo[]' value='Campo com id: "+qtdeCampos+"'>""<input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar campo'>";qtdeCampos++;}function removerCampo(id) {	var objPai = document.getElementById("campoPai");	var objFilho = document.getElementById("filho"+id);//Removendo o DIV com id específico do nó-pai:var removido = objPai.removeChild(objFilho);}</script>
Você poderia me ajudar a descobrir o que está saindo errado? E no caso de concatenar... como devo fazer? Agradeço desde já! Imagem Postada

 

Aê!!! Alexandre eu consegui!!! Descobri o erro.... :clap: muito obrigada por ter me ajudado! Valeuuuuuu mesmo!!! :joia:

 

Agora o problema ta sendo em uma outra questão... tem como os campos adicionados serem um select/list que busca os dados de uma tebela? Consegui transformar os campos em selects, mas quando insiro a função em php, da erro no script e não adiciona campos mais... tem alguma solução pra isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

@Nayara Pcrie um novo topico com a sua dúvida, e poste os teus códigos nele

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Dall'Agnol    0

Douglas Dall'Agnol
Postado

Tenho notado um bug no script do Klonder.

Estou usando ele em um site, e notei o seguinte:

 

Utilizei ele para adicionar um input text com limite de 3 campos.

Acontece que ele não está limitando apenas a quantidade de campos, mas a quantidade de cliques.

 

Se eu adicionar um campo, removê-lo, adicionar outro, remover, chega uma hora que ele não adiciona mais.

Claro quando você coloca um limite alto nem nota.

Mas pra um campo com limite de 2 ou 3 a mais, houve quem tivesse notado e reclamado cmigo.

 

Façam o teste ai pessoal, e me digam se tem como resolver, pq sou uma negação em javascript, preciso de um curso Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

@CiD Burn    0

@CiD Burn
Postado

Oi, pessoal!

Sou nova na área de desenvolvimento web e gostei muito do post de vcs, só que estou com um problema Imagem Postada

adaptei os códigos citados neste post para minha situação, só que na hora de validar estou tendo problemas para localizar os objetos.

Estou usando o document.getElementById('nomedocampo'+cont)

No caso esse contador seria o mesmo icount do 1º código postado aqui, ou seja ele incrementa o nomedocampo sempre que é adicionado um novo campo.

Não sei como localizar um id, quando tem esse contador correndo Imagem Postada

Alguém poderia me ajudar, por favor???

Compartilhar este post

Link para o post
Compartilhar em outros sites

Adriana Braz    0

Adriana Braz
Postado

Olá

adaptei os códigos citados neste post para minha situação, só que na hora de validar estou tendo problemas para localizar os objetos.

Não sei como localizar um id.

Alguém poderia me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

helpnow    0

helpnow
Postado

Olá pessoal,

 

Achei este codigo muito bom, resolveu meu problema, mas como nada é perfeito e o IE faz parte da imperfeição, como faço isso funcionar no explore?

 

[]s

 

Cris

 

Eii eu utilizo o seguinte script e funfa normal no IE.. Espero ter ajudado :*

 

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="funcoes.js"></script>
<script type="text/javascript">
 //Não altere esses valores!
var intCampos = 1;   //quantidade de campos
var strConteudo;     //Conjunto de indices armazenados
var intIndice = 0;   //indice atual dos campos
function addFormField(strModeloCampos,strContainer,strMatriz)
{
   var strMarcador=/icontador/g;
//
//   //Localiza o objeto que guarda o modelo dos campos a serem inseridos como
//   //novos, recomenda-se utilizar uma <div> para separar esses campos, e tudo
//   //que estiver dentro dessa <div> será cópiado para outra <div> definida na
//   //variavel Container, a <div> container deve, preferencialmente estar vazia
//   //após definir o layout do modelo pode ocultalo usando o parametro:
//   //<div id='nome' style='display:none'>
//   //dessa forma não aparecera na página somente no container quando adicionado
   
      var objCorpo = document.getElementById(strContainer);
      var objModelo=document.getElementById(strModeloCampos).innerHTML;
      var strNovo=objModelo.replace(strMarcador, intIndice);
      var objNovo=document.createElement('div');
      objNovo.setAttribute('id', 'div'+intIndice)
      objNovo.innerHTML=strNovo;
      objCorpo.appendChild(objNovo);

      var strConteudo=document.getElementById(strMatriz);
      if (strConteudo.value == "")
      {
         fn_get(strMatriz).value = intIndice;
      }
      else
      {
         fn_get(strMatriz).value += ","+intIndice;
      }

      intCampos++;
      intIndice++;
}

//Função que remove os campos;
function fn_removeCampo(strContainer,strMatriz,strConjuntoCampos,strIndice)
{
   //Localiza o containe onde se encontra o conjunto de campos adicionados
   //dinamicamente, e de onde será tirado o conjunto de campos indicado na variavel
   //"strConjuntoCampos"
   var objContainer = document.getElementById(strContainer);

   //Localiza o conjunto de campos a serem removidos do container
   var objConjuntoCampos = document.getElementById('div'+ strIndice);

   //Pega o valor do conjunto de indices amazenados
   conteudo = document.getElementById(strMatriz);

   //pega o ultimo valor de indice no conjunto de indices armazenados
   var strUltimoNumero = conteudo.value.substring(conteudo.value.lastIndexOf(",")+1);

   if(confirm("As informações serão excluidas permanentemente!\n\nDeseja prosseguir?"))
   {
      //Remove o conjunto de campos do container
      var removido = objContainer.removeChild(objConjuntoCampos);
      window.alert(removido.value);
      //localiza o indice dentro do conjunto de indices para ser removido da re-
      //ferência
      if (strIndice == conteudo.value) {
         conteudo.value = conteudo.value.replace(strIndice,"");
      }else if(strIndice == strUltimoNumero) {
         conteudo.value = conteudo.value.replace(","+strIndice,"");
      }else{
         conteudo.value = conteudo.value.replace(strIndice+",","");
      }
      intCampos--;
   }
}
</script>
<html>
   <head>
   <body>
      <form method="post" action="">
         <input type="button" value="Adicionar Curso" name="add_curso" id="add_curso" onclick="addFormField('modelo_campos','Container','idscursos');">
         <input type="texto" name="idscursos" id="idscursos">
         <div id="Container">
            
         </div>
         <div id="modelo_campos" style="display:none">
            <table id='tbl_curso[icontador]'>
               <tr>
                  <td>
                     <SUP>CURSO</SUP><br>
                     <input type='text' size='25' id='curso[icontador]' name='curso[icontador]'>
                     <input type='hidden' name='codigo_curso[icontador]' id='codigo_curso[icontador]'>
                  </td>
                  <div id='select_curso[icontador]'>

                  </div>
                  <td>
                     <SUP>ENTIDADE</SUP><br>
                     <input type='text' size='25' name='entidade[icontador]'>
                  </td>
                  <td>
                     <SUP>DT. INICIO</SUP><br>
                     <input type='text' size='15' name='dt_inicio[icontador]'>
                  </td>
                  <td>
                     <SUP>DT. FINAL</SUP><br>
                     <input type='text' size='15' name='dt_fim[icontador]'>
                  </td>
                  <td>
                     <SUP>C. HR</SUP><br>
                     <input type='text' size='15' name='carga_horaria[icontador]'>
                  </td>
                  <td>
                     <br>
                     <input type='button' value='Remover' name='RemoverRegistro' id="RemoverRegistro" onclick="fn_removeCampo('teste','idscursos','tbl_curso[icontador]','icontador');">
                  </td>
               </tr>
            </table>
         </div>
      </form>

      <div id="teste">
         
      </div>
   </body>
   </head>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito