Ir para conteúdo

POWERED BY:

Arquivado

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

eumesmoic

Problema ao Criar HTML dinamicamente

Por , em Javascript

Recommended Posts

eumesmoic    0

eumesmoic
Postado

Boa noite a todos. Pessoal estou fazendo TTC da faculdade, sozinho, desesperado!

Estou empacado em um ponto...vou explicar:

 

Estou criando um site em que tem uma página que tem um menu dentro de uma div 'a' que contem imagens(que pretendo fazer que sejam botões) que cada um desses botões deve criar dinamicamente (quando o botão for clicado) dentro de uma div 'b' específica, conteudo HTML de um formulário, por exemplo, ou campo para fazer upload de uma foto...

 

Um dos botões, por exemplo, deverá criar uma textarea dentro dessa div 'b' específica...e um outro botão adiciona a essa mesma div 'b' (acumulando-se a algum item anterior também criado dinamicamente) e por ai vai....

 

A questão é que já criei a página HTML, e em seu <HEAD></HEAD> coloquei uma função javascript para criar uma textarea (que é o primeiro botão do meu menu de opções para criar campos dinamicamente), mas ao clicar no primeiro botão, a página é recarregada, voltando ao seu inicio e quando verifico, nada foi criado!!!!

 

Eis o código da função que deveria criar um campo txt:

<head>
</style>
<!-------------------------------------------------------------->
<!----------SCRIPTS DOS ELEMENTOS QUE SERÃO INSERIDOS------------->
<!----------script do elemento Texto------->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script>

contaCampoTxt = 0; //para ser concatenado ao nome da div que conterá os campos
function criaCampoTxt()
{
//pegando o elemento ao qual serão adicionados os novos conteúdos html
corpoCapitulo = document.getElementById("corpoCapitulo");

//criando um form
form = document.createElement('form');
form.setAttribute('action','');
form.setAttribute('method','post');
form.setAttribute('name','formCampoTxt');
form.setAttribute('class','formCampoTxt');

//criando um campo de texto
textarea = document.createElement('textarea');
textarea.setAttribute('name', 'texto');
textarea.setAttribute('cols', '70');
textarea.setAttribute('rows', '5');
textarea.setAttribute('class', 'textareaCampoTxt');

//inserindo a textarea no form criado
form.appendChild(textarea);

//criando o botão submit, que neste caso é uma img
botaoSalvar = document.createElement('input');
botaoSalvar.setAttribute('name','botaoSalvar');
botaoSalvar.setAttribute('type','image');
botaoSalvar.setAttribute('src','imagens/salvar.png');

//adicionando também este botão ao form
form.appendChild(botaoSalvar);

//criando botão excluir campo adicionado dinamicamnete
botaoExcluir = document.createElement('input');
botaoExcluir.setAttribute('name','botaoExcluir');
botaoExcluir.setAttribute('type','image');
botaoExcluir.setAttribute('src','imagens/excluir.png');
botaoExcluir.setAttribute('onclik',''); //função não implementada ainda

//adicionando também este botão ao form
form.appendChild(botaoExcluir);

//criando uma div
divCampoTxt = document.createElement('div');
divCampoTxt.setAttribute('id','divCampoTxt'+ contaCampoTxt);
divCampoTxt.setAttribute('class','divCampoTxt'); // classe css ja criada anteriormente

//colocando a form dentro da div criada
divCampoTxt.appendChild(form);

//adicionando a div criada ao elemento destino ja existente no corpo do doc HTML.
corpoCapitulo.appendChild(divCampoTxt);

contaCampoTxt++;
}
</script>
</head>

e a parte do corpo da página HTML no qual deveria ser adicionado os campos criado dinamicamente:

A DIV DESTINO DESTE CAMPOS É A <div id="corpoCapitulo">conteudo a ser adicionado</div>

<div id="capitulo">
          <div id="topoCapitulo">
               <div id="numeroCap"></div>
<div id="resumoCap">
                <form>
                    <textarea name="txtResumoCap" cols="23" rows="6"></textarea>
                   </form>
               </div><!--fim div "resumoCap"-->
               <div id="cidadeCap">
                   <form>
                <input name="cidade" type="text" size="20" />
                   </form>
               </div><!--fim div "cidadeCap"-->
</div><!--fim div "topoCapitulo"-->
         [color="#FF0000"]<div id="corpoCapitulo">

         </div><!--fim div "corpoCapitulo"-->[/color]
         <div id="baseCapitulo">
         </div><!--fim div "baseCapitulo"-->

         </div><!--fim div "capitulo"-->

         <div class="clear_both"></div>        
      </div><!--fim div "criarRelatos"-->

 

Caros, eu suplico ajuda pessoal.....sou iniciante, mas tenho m esforçado bastante, me ajudem!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado
mas ao clicar no primeiro botão, a página é recarregada, voltando ao seu inicio e quando verifico, nada foi criado!!!!

O Javascript não altera o código-fonte da página. Tudo que for criado com ele vai 'sumir' quando você der o reload na página.

 

Caros, eu suplico ajuda pessoal.....sou iniciante, mas tenho m esforçado bastante, me ajudem!!!

Rapaz, e como tu me inventa de fazer seu TCC sobre um assunto que não domina? :P

 

Eu com 5 anos de PHP nas costas ainda estou em dúvida de faço o meu sobre isso...

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