Ir para conteúdo

POWERED BY:

Arquivado

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

Igor FV

Atribuir valores dos inputs dinamicos em uma variavel string...

Por , em Javascript

Recommended Posts

Igor FV    0

Igor FV
Postado

Boa tarde amigos,

 

Tenho o código abaixo onde crio linhas de um formulário dinamicamente com 4 campos input cada linha. Até ai beleza, quando preencho 2 ou mais linhas, e clico no bt submit, queria que os valores de todos os campos das 2 ou mais linhas fossem atribuidos a uma variavel string. Como posso fazer isto?

 

<html>
<head>
<script type="text/javascript">
<!--
var mainDivName = 'eventDates';

function addEvent()
{
	var ni = document.getElementById(mainDivName);
	var numi = document.getElementById('theValue');
	var num = (document.getElementById("theValue").value -1)+ 2;
	numi.value = num;

	var divIdName = "eventDate"+num+"Div";
	var newdiv = document.createElement('div');
	newdiv.setAttribute("id",divIdName);
	newdiv.innerHTML = "<table><tr><td></td><td width=80><input type=\"text\" name=\"a"+num+"\" size=\"7\"></td><td><input type=\"text\" name=\"b"+num+"\" size=\"7\"></td><td><input type=\"text\" name=\"c"+num+"\" size=\"7\"></td><td><input type=\"text\" name=\"d"+num+"\" size=\"7\"></td></tr></table>Linha "+num+" adicionada! <a href=\"#\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remover linha</a>";
	ni.appendChild(newdiv);
}

function removeEvent(divNum)
{
	var d = document.getElementById(mainDivName);
	var olddiv = document.getElementById(divNum);
	d.removeChild(olddiv);
}
//-->
</script>
</head>

<body>
<form>
	<input type="hidden" value="0" id="theValue" />
	<p><a href="#" onClick="addEvent();">Adicionar Linhas</a></p>
	<div id="eventDates"></div>
	<input type="submit" name="Enviar" value="Submit" /> 
</form>
</body>
</html>

Quando preencho as 2 linhas e clico no bt submit, o resultado que aparece na barra de endereços é este:

 

 

a1=A1&b1=A2&c1=A3&d1=A4&a2=B1&b2=B2&c2=B3&d2=B4&Enviar=Submit

Queria pegar os valores a1=A1&b1=A2&c1=A3&d1=A4&a2=B1&b2=B2&c2=B3&d2=B4 e atribuir a uma variavel do tipo string, tipo:

 

variavel="a1=A1&b1=A2&c1=A3&d1=A4&a2=B1&b2=B2&c2=B3&d2=B4"

Como posso fazer isto?

 

 

Vlw...

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Bem, existem algumas maneiras possíveis pra isso. Ao meu ver, a mais "didática" seria criar todos os campos texto com o mesmo nome. Ao submeter o formulário, bastaria dar um loop nos campos criados.

 

Fiz um código abaixo que mostra uma mensagem de alerta no final, com todos valores atribuídos a uma variável qualquer.

 

Basta adaptar o modelo abaixo ao seu código:

<html>  
<head>
	<title>java script: Adicionar e remover campos dinamicamente!</title>  
<script type="text/javascript">   
//Não altere esses valores!
//Baseado no código postado em: http://forum.imasters.com.br/index.php?showtopic=325267
var iCount = 0;
var iCampos = 1;

//Definindo quantos campos poderão ser criados (máximo);
var iCamposTotal = 5; 

//Função que adiciona os campos;
function addInput() {   
if (iCampos <= iCamposTotal) {
 	
	var texto = "<div id='linha"+iCount+"'><input type='text' name='texto1' id='texto"+iCount+"' value='Meu texto "+iCount+"'><input type='button' value='Apagar campo' onClick='removeInput("+iCount+")'></div>";	  
  
	//Capturando a div principal, na qual os novos divs serão inseridos:
	var camposTexto = document.getElementById('camposTexto');   
	camposTexto.innerHTML = camposTexto.innerHTML+texto;
  
iCount++;
iCampos++;
}   
}
   
//Função que remove os campos;
function removeInput(e) {
   var pai = document.getElementById('camposTexto');
   var filho = document.getElementById("linha"+e);
   //var inputSelecionado = document.getElementById("texto1"+e);
   document.getElementById("texto"+e).select();
	if(confirm("O campo selecionado será excluído permanentemente!\n\nDeseja prosseguir?")){
		var removido = pai.removeChild(filho);
		iCampos--;
	}
}

function validaForm(){
	var strTodosCampos = "";
	var numTextos = document.forms["form1"].elements["texto1"];
	alert(numTextos.length);
	var iLoop;
	for (iLoop = 0; iLoop<numTextos.length; iLoop++) {
		strTodosCampos = strTodosCampos + numTextos[iLoop].value + "&";
	}
	alert("strTodosCampos="+strTodosCampos);
return false;
}
</script> 
</head>  

<body>  

<form  name="form1" id="form1" action="" method="post" onSubmit="return validaForm();">  
<input type="button" value="Criar campo texto" name="add_input" id="add_input" onClick="addInput();">  
<div id="camposTexto"></div>
<br><br><input type="submit" value="Enviar">
</form>  

</body>  
</html>

A função validaForm() é responsável, justamente, por capturar os valores dos campos texto, sendo que todos esses campos texto tem o mesmo nome, porém, ids diferentes. Eu coloquei as ids diferentes para permitir selecioná-los antes da exclusão (quando você for testar em seu editor, irá ver como funciona).

Compartilhar este post

Link para o post
Compartilhar em outros sites

Igor FV    0

Igor FV
Postado

Amigo klonder, vlw pelo codigo.

 

Mas queria "incrementar" uma coisinha, por exemplo quando crio 5 campos e excluo o terceiro, ficam entao os campos 1,2,4,5 queria que ao excluir os campos do meio, ao inves de ficar da forma que falei o restante fossem renumerados, tipo excluir o terceiro ficariam entao 1,2,3,4 ... tem como fazer isto amigo???

 

Vlw...

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Se a quantidade de campos for fixa e relativamente pequena você pode dar um simples "display:block" ou então "visibity:visible" ou sei lá... talvez criar arrays para armazenar as strings de cada campo e reordená-las após cada ação (adicionar / apagar campos). Eu só consigo pensar nessa possibilidade com quantidade fixa de campos :blink:

 

Bom, talvez eu esteja me precipitando por estar sem idéias de como fazer isso de uma maneira bastante simples. Só consigo pensar em ifs, e mais ifs, hehehe!!!

 

Vou pensar no assunto, se me surgir alguma idéia, postarei aqui...

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