[Resolvido] Criar campo de texto

valdir calixto · Junho 25, 2009

Olá, gostaria de saber se alguém pode me ajudar com esta dúvida, estou fazendo um form. no qual terei um campo (texto) para que seja inserido uma quantidade de parcelas, porém gostaria que quando você colocado o número ele me gerase mais campos de texto abaixo, de acordo com o número digitado na primeira caixa de texto, exemplo:

Quantidade: 4

Campo(text):

Campo(text).

Sei que tem que ser feito um loopoing, for, while...algum assim, mas não faço a menor idéia de como vai duplicar as linhas da tabelas e os campos tipo texto.

Obrigado

Vírtua Comunicação · Junho 25, 2009

Vamos ver se consigo te ajudar, Valdir.

Utilizaremos DIV para fazer o que você está querendo. Colocarei as explicações ao lado para você entender, ok?

Primeiro criaremos uma FUNÇÃO para exibir e esconder as DIV's com os campos:

<script>
function verParcelas(campo) {
	if(campo.value == '1') {
		document.all.campo1.style.display = ''; // exibe a DIV campo1
		document.all.campo2.style.display = 'none'; // esconde a DIV campo2
		document.all.campo3.style.display = 'none'; // esconde a DIV campo3
		document.all.campo4.style.display = 'none'; // esconde a DIV campo4
	}

	if(campo.value == '2') {
		document.all.campo1.style.display = ''; // exibe a DIV campo1
		document.all.campo2.style.display = ''; // exibe a DIV campo2
		document.all.campo3.style.display = 'none'; // esconde a DIV campo3
		document.all.campo4.style.display = 'none'; // esconde a DIV campo4
	}

	if(campo.value == '3') {
		document.all.campo1.style.display = ''; // exibe a DIV campo1
		document.all.campo2.style.display = ''; // exibe a DIV campo2
		document.all.campo3.style.display = ''; // exibe a DIV campo3
		document.all.campo4.style.display = 'none'; // esconde a DIV campo4
	}

	if(campo.value == '4') {
		document.all.campo1.style.display = ''; // exibe a DIV campo1
		document.all.campo2.style.display = ''; // exibe a DIV campo2
		document.all.campo3.style.display = ''; // exibe a DIV campo3
		document.all.campo4.style.display = ''; // exibe a DIV campo4
	}
}
</script>

Agora criamos um SELECT e colocamos ele para executar a função criada:

<select name="quantParcelas" id="quantParcelas" onChange="verParcelas(this)">
	<option value="" selected>Nº Parcelas</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
</select>

Para finalizar, basta fazer os CAMPOS dentro das DIV's:

<div id="campo1" style="display:none"><input type="text" size="15" name="parcela1"></div>
<div id="campo2" style="display:none"><input type="text" size="15" name="parcela2"></div>
<div id="campo3" style="display:none"><input type="text" size="15" name="parcela3"></div>
<div id="campo4" style="display:none"><input type="text" size="15" name="parcela4"></div>

Espero ter ajudado! ;-P

valdir calixto · Junho 26, 2009

Obrigado, vou tentar aqui!!!!

Vírtua Comunicação · Junho 26, 2009

Ok, dê um retorno. ;-P

eibon · Junho 28, 2009

O jeito do amigo acima não é muito legal...

Um exemplo um pouco mais prático:

<html>
	<head>
		<title>Exemplo</title>
		<script type="text/JavaScript">
			adicionaEvento(window, 'load', function(){
				adicionaEvento(document.getElementsByClassName("botao")[0], 'click', function(){
					var res = document.getElementById("res");
					var qtd = parseInt(document.getElementsByName("qtd")[0].value) || 0;
					limpaElemento(res);
					while(qtd > 0){
						var input = document.createElement("input");
						input.setAttribute("type", "text");
						input.setAttribute("name", "parcela"+qtd);
						res.appendChild(input);
						res.appendChild(document.createElement("br"));
						qtd--;
					}
				});
			});

			function adicionaEvento(elemento, evento, funcao, bool){
				bool = (bool == null)? false : bool;
				if(elemento.addEventListener)
					elemento.addEventListener(evento, funcao, bool);
				else
					elemento.attachEvent('on' + evento, funcao);
			}

			function limpaElemento(elemento){
				while(elemento.firstChild){
					elemento.removeChild(elemento.firstChild);
				}
			}
		</script>
	</head>
	<body>
		<label for="qtd">Quantidade:</label>
		<input type="text" name="qtd" />
		<input type="button" class="botao" value="gerar" />
		<div id="res"></div>
	</body>
</html>

Adapte as suas necessidades.

valdir calixto · Julho 10, 2009

Tentei seu código mas não funcionou.

O jeito do amigo acima não é muito legal...

Um exemplo um pouco mais prático:

<html>
	<head>
		<title>Exemplo</title>
		<script type="text/JavaScript">
			adicionaEvento(window, 'load', function(){
				adicionaEvento(document.getElementsByClassName("botao")[0], 'click', function(){
					var res = document.getElementById("res");
					var qtd = parseInt(document.getElementsByName("qtd")[0].value) || 0;
					limpaElemento(res);
					while(qtd > 0){
						var input = document.createElement("input");
						input.setAttribute("type", "text");
						input.setAttribute("name", "parcela"+qtd);
						res.appendChild(input);
						res.appendChild(document.createElement("br"));
						qtd--;
					}
				});
			});

			function adicionaEvento(elemento, evento, funcao, bool){
				bool = (bool == null)? false : bool;
				if(elemento.addEventListener)
					elemento.addEventListener(evento, funcao, bool);
				else
					elemento.attachEvent('on' + evento, funcao);
			}

			function limpaElemento(elemento){
				while(elemento.firstChild){
					elemento.removeChild(elemento.firstChild);
				}
			}
		</script>
	</head>
	<body>
		<label for="qtd">Quantidade:</label>
		<input type="text" name="qtd" />
		<input type="button" class="botao" value="gerar" />
		<div id="res"></div>
	</body>
</html>

Adapte as suas necessidades.

klonder · Julho 10, 2009

Eu fiz um código um pouco menor para resolver o seu problema:

<html><head>
<script type="text/javascript">

function adicionarCampos() {
var objSelect = document.getElementById("numParcelas");
var i;
var linha = "";

	if (objSelect.value != "") {
		for (i=0; i < objSelect.value; i++) {
			linha += "<br><input type='text' name='linha"+i+"' id='linha"+i+"'>"
		} 
		document.getElementById("txtParcelas").innerHTML = linha;
	}else{
		document.getElementById("txtParcelas").innerHTML = "";
	}
} 
</script>
</head>
<form name="form1" action="" method="post">
Número de parcelas: <select id="numParcelas" name="numParcelas" onChange="adicionarCampos()">
<option value="">---</option>
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
<option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option>
<option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
</select>
<br><span id="txtParcelas"></span>
</form>
</body>
</html>

-- Post editado --

Putz... funciona no IE, mas não funciona no FF...

Como eu odeio o FF... se alguém pudesse me mostrar uma vantagem do FF sobre o IE eu ficaria agradecido...

A galera fala bem do FF, que dá show no IE... mas onde??? Afff... o IE aceita tudo, abre tudo, é rápido, é bonito...

Ser anti Micro$oft é uma coisa... elogiar coisas ruins só por ser contra uma empresa líder de mercado é outra...

Que raiva do FF!!!!!

-- Tópico editado --

- Enquanto isso na sala de justiça:

<html><head>
<script type="text/javascript">

function adicionarCampos() {
var objSelect = document.getElementById("numParcelas");
var objText = document.getElementById("txtParcelas");
var i;
var linha = "";

	if (objSelect.value != "") {
		for (i=0; i < objSelect.value; i++) {
			linha += "<br><input type='text' name='linha"+i+"' id='linha"+i+"'>"
		} 
		objText.innerHTML = linha;
	}else{
		objText.innerHTML = "";
	}
} 
</script>
</head>
<form name="form1" action="" method="post">
Número de parcelas: <select id="numParcelas" name="numParcelas" onChange="adicionarCampos()">
<option value="">---</option>
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
<option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option>
<option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
</select>
<br><span id="txtParcelas"></span>
</form>
</body>
</html>

Pronto, problema do FF resolvido! Que coisa!!!

valdir calixto · Julho 11, 2009

Obrigado funcionou, com esse código que fez, estou tentando a seguinte situação, quero gerar ai dentro um campo do tipo select, que traga algumas opções exemplo: Cancelado, quitado, Finalizado. o Código está ficando da seguinte forma:

function adicionarCampos() {

var objSelect = document.getElementById("tipo");

var objText = document.getElementById("txtValor");

var objText2 = document.getElementById("txtVencimento");

var objText3 = document.getElementById("txtData");

var objSelect2 = document.getElementById("txtHistorico");

var i;

var linha = "";

var linhavenc = "";

var linhadatapg = "";

var linhahistorico = "";

if (objSelect.value != "") {

for (i=0; i < objSelect.value; i++) {

linha += "<br> <input type='text' name='valor' id='valor'>"

linhavenc += "<br> <input type='text' name='mes' id='mes'>"

linhadatapg += "<br> <input type='text' name='data' id='data'>"

linhahistorico += "<br> <input type='select' name='historico' id='historico'>" // Aqui quero gerar um campo do tipo SELECT.

}

objText.innerHTML = linha;

objText2.innerHTML = linhavenc;

objText3.innerHTML = linhadatapg;

objSelect2.innerHTML = linhahistorico;

}else{

objText.innerHTML = "";

}

</script>

</head>

Número de parcelas: <select id="numParcelas" name="Tipo" onChange="adicionarCampos()">

</select>

<br>

<tr>

<td width="19%">Valor</td>

<td width="25%">Vencimento</td>

<td width="29%">Data de Pagamento</td>

<td width="5%">Forma</td>

<td width="5%">dfdfd</td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

valdir calixto · Julho 11, 2009

Tem como fazer isso sem usar formulário, pois já vou ter uma parte que vai enviar dados para um form, então acho que não vai rolar dois forms, juntos.

Arquivado

[Resolvido] Criar campo de texto

Recommended Posts

valdir calixto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vírtua Comunicação 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

valdir calixto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vírtua Comunicação 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

eibon 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

valdir calixto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

valdir calixto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

valdir calixto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante