Ir para conteúdo
Fórum Script Brasil
  • 0

Gerando campos input

Luizzzzzzzzzzzzzzzz

Perguntado por Luizzzzzzzzzzzzzzzz,

 Share

Pergunta

Luizzzzzzzzzzzzzzzz

Luizzzzzzzzzzzzzzzz

Postado
Postado (editado)

Ola pessoal..td bem?

Preciso de uma orientação...

tenho um formulario de cadastro de usuarios...com campos basicos como nome, email, telefone...etc...

Neste formulario gostaria de cadastrar varios usuarios de uma vez....então inicialmente só tem uma lista com campos para cadastros de 1 usuario....mas se o usuario preencher...quando der um TAB... já apareça embaixo os campos para o cadastro de um segundo usuario...e assim por diante... onde os campos fiquem numerados para gravar no banco de dados... tipo ( nome1, nome2, nome3 ...etc)

alguém sabe alguma forma de fazer isso??

muito obrigado pessoal!

Editado por Luizzzzzzzzzzzzzzzz
Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Sim, é algo simples !

Um exemplo seria o seguinte:

<html>
<head>
<title>Minha Página</title>
<script type="text/javascript">
i=1;
function AddCampos(){
x=document.getElementById("campos")
x.innerHTML+="<input type='text' name='campos"+i+"' value='Campo número"+i+'>"
}
</script>
</head>
<body onload='AddCampos()'>
<form name="formulario">
<div id='campos'>
<!-- Os campos ficarão aqui -->
</div>
<br>
<input type="button" onclick="AddCampos()" value="Adcionar campos">
</form>
</body>
</html>

Nem cheguei a testar o código, fiz no próprio navegador, mas deve funcionar !

Qualquer coisa posta aí !

Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

OPa, tinha cometido um erro ali !

Na verdade eram 2

1. Esqueci de incrementar a variável "i" para ir somando 1 ao nome do elemento

2. Cometi um erro de sintaxe na linha que cria o novo elemento

Tenta assim:

<html>
<head>
<title>Minha Página</title>
<script type="text/javascript">
i=1;
function AddCampos(){
x=document.getElementById("campos")
x.innerHTML+="<input type='text' name='campos"+i+"' value='Campo número "+i+"'><br>"
i++
}
</script>
</head>
<body onload='AddCampos()'>
<form name="formulario">
<div id='campos'>
<!-- Os campos ficarão aqui -->
</div>
<br>
<input type="button" onclick="AddCampos()" value="Adcionar campos">
</form>
</body>
</html>

P.S.:

O código foi testado dessa vez^^

Link para o comentário
Compartilhar em outros sites
  • 0
Luizzzzzzzzzzzzzzzz

Luizzzzzzzzzzzzzzzz

Postado
  • Autor
Postado

valeu cara...muito obrigado...vou tentar utilizar esse codigo...

uma duvida...dentro de x.innerHTML teria como eu adicionar o HTML de toda a linha da tabela...pois são varios campos para ser adicionados para cada novo cadastro... então na verdade tenho que pegar toda a tag <td></td> ... e alguns campos ainda utilizam mascaras em javascript... olha o exemplo de uma linha que preciso replicar:

<td width="14%" align="left" valign="top" bgcolor="#ffffff" class="oddListRowS1" scope="row"><?=$user['Nome_Emit']?></td>
        <td width="13%" align="left" valign="top" bgcolor="#ffffff" class="oddListRowS1" scope="row"><?=$user['Represent']?></td>
        <td width="12%" align="left" valign="top" bgcolor="#ffffff" class="oddListRowS1" scope="row"><span class="tabEditViewDF"> 
          <select name="mercado<?=$i?>" id="mercado<?=$i?>">
            <option value="-1">Selecione</option>
            <option value="1" <?=($user['mercado'] == 1 ? 'selected' : '')?>>Interno</option>
            <option value="2" <?=($user['mercado'] == 2 ? 'selected' : '')?>>Externo</option>
          </select>
          </span></td>
        <td width="11%" align="left" valign="top" bgcolor="#ffffff" class="oddListRowS1" scope="row"><input name="icoterms<?=$i?>" type="text" id="icoterms<?=$i?>" value="<?=$user['icoterms']?>" size="10" /></td>
        <td width="12%" align="left" valign="top" bgcolor="#ffffff" class="oddListRowS1" scope="row"><input name="comissao<?=$i?>" type="text" id="comissao<?=$i?>" value="<?=$user['comissao']?>" size="10" maxlength="3" /></td>
        <td width="12%" align="left" valign="top" bgcolor="#ffffff" class="oddListRowS1" scope="row"><input name="interno<?=$i?>" type="text" id="interno<?=$i?>" onblur="mascara(this)" onclick="apaga(this)" onkeyup="maskIt(this,event,'###.###.###,##',true,{pre:''})" value="<?=number_format($user['freteInterno'],2,",",".")?>" size="10" maxlength="10" /></td>
        <td width="12%" align="left" valign="top" bgcolor="#ffffff" class="oddListRowS1" scope="row"><input name="externo<?=$i?>" type="text" id="externo<?=$i?>" onblur="mascara(this)" onclick="apaga(this)" onkeyup="maskIt(this,event,'###.###.###,##',true,{pre:''})" value="<?=number_format($user['freteExterno'],2,",",".")?>" size="10" maxlength="10" /></td>
        <td width="14%" align="left" valign="top" bgcolor="#ffffff" class="oddListRowS1" scope="row">
          <input name="embalagem<?=$i?>" type="text" id="embalagem<?=$i?>" onblur="mascara(this)" onclick="apaga(this)" onkeyup="maskIt(this,event,'###.###.###,##',true,{pre:''})" value="<?=number_format($user['valorEmbalagem'],2,",",".")?>" size="10" maxlength="10" />
        </td>

Obrigado pela atenção de todos..!

Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado
uma duvida...dentro de x.innerHTML teria como eu adicionar o HTML de toda a linha da tabela...

Claro !

Como o elemento é uma "div", você pode adcionar qualquer coisa dentro do innerHTML

Ex.:

Você tem uma div como esta:

<div id='teste'></div>
E depois utilizar o seguinte JS: 
document.getElementById("teste").innerHTML="Minha Div"
Será a mesma coisa que escrever: 
<div id='teste'>Minha Div</div>

Qualquer coisa posta aí !

Link para o comentário
Compartilhar em outros sites
  • 0
Luizzzzzzzzzzzzzzzz

Luizzzzzzzzzzzzzzzz

Postado
  • Autor
Postado
uma duvida...dentro de x.innerHTML teria como eu adicionar o HTML de toda a linha da tabela...

Claro !

Como o elemento é uma "div", você pode adcionar qualquer coisa dentro do innerHTML

Ex.:

Você tem uma div como esta:

<div id='teste'></div>
E depois utilizar o seguinte JS: 
document.getElementById("teste").innerHTML="Minha Div"
Será a mesma coisa que escrever: 
<div id='teste'>Minha Div</div>

Qualquer coisa posta aí !

beleza entendi...porém acho que não tem como eu colocar todo esse html que passei acima dentro do innerHTML ... acho que o certo seria adicionar a tag <td></td> dentro de uma div....e conseguir mudar apenas os nomes dos campos input quando for criado... mas como fazer isso...você sabe?

Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Você pode tentar uma coisa, mas não tenho certeza se vai resolver:

O código do formulário você deixa assim:

<form name="formulario">
<table id='campos'>
<!-- Os campos ficarão aqui -->
</table>
<br>
<input type="button" onclick="AddCampos()" value="Adcionar campos">
</form>
E depois tenta adcionar os dados normalmente via javascript 
document.getElementById("campos").innerHTML+="<tr><td>Teste</td><td>Teste2</td></tr>"

Teoricamente é pra funcionar !

Qualquer coisa posta aí !

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,2k
    • Posts
      651,9k
×
×
  • Criar Novo...