Jump to content
Fórum Script Brasil
  • 0

Criar html dinamicamente não está funcionando


Ivan Saavedra

Question

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------->

&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>

&lt;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 já criada anteriormente

//colocando a form dentro da div criada

divCampoTxt.appendChild(form);

//adicionando a div criada ao elemento destino já 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"-->

<div id="corpoCapitulo">

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

<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!!!

Edited by Ivan Saavedra
Link to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.2k
    • Total Posts
      652k
×
×
  • Create New...