[Resolvido] Adicionar SELECT (drop-down) dinamicamente

visitante_xp · Fevereiro 10, 2010

Opa, iae galera...

A algum tempo peguei aqui no forum um código feito pelo @klonder para adicionar campos dinamicamente, e ele vem me servindo muito bem. Porem quando tentei adicionar um campo select com conteudo gerado apartir de uma consulta com PHP.

Creio que seja com o INNERHTML (obviamente não é INNERPHP...rsrs)

Tem um jeito de colocar o conteudo html e php junto, dinamicamente?

Abraço!!

William Bruno · Fevereiro 10, 2010

Não existe 'conteúdo php'.

O php te devolve um HTML, trate assim. Fazendo como se não existisse php por trás, pois o teu JS só vai rodar, depois do php ter criado o html.

klonder · Fevereiro 10, 2010

Eu postei ao menos 3 códigos. Poderia mostrar qual deles por favor?

visitante_xp · Fevereiro 11, 2010

Rsrs...Malz...^^

Usei esse.

@William vo posta o código pra você ver...

document.getElementById("filho"+i).innerHTML = "<table border='0' cellpadding='1' cellspacing='0'>
	<tr>
		<td>
			<select name='socio'>
				<option value=''></option>
				<?php
	
				$sql_socio="SELECT * FROM clientes.socios";
				$resultado_socio=mysql_query($sql_socio);
				$linha_socio=mysql_num_rows($resultado_socio);
		
				for($o=0; $o<$linha_socio; $o++)
				{
					$nome_socio=mysql_result($resultado_socio, $o, "nome_socio");
					$id_socio=mysql_result($resultado_socio, $o, "id_socio");
				?>
				<option value='<?php echo $id_socio; ?>'><?php echo $nome_socio; ?></option>
				<?php
				}
				?>
			</select>
		</td>
		<td><input type='text' name='capital' /></td>
		<td>
			<select name='cargo'>
				<option value=''></option>
			</select>
		</td>
	</tr>
</table>";

Algo me diz que ta errado..rsrs...Mas foi a unica coisa que eu consegui pensar...

Abraço!

William Bruno · Fevereiro 11, 2010

Desnecessário isso ai...

siga:

Exibir > Código Fonte (Ctrl+U)

ai você vai ver oque eu quis dizer..

visitante_xp · Fevereiro 11, 2010

Aaahhh... :P

Saquei...

Vo da uma olhada aqui, o programa acusou um erro de script, vo tenta concerta e ja posto.

visitante_xp · Fevereiro 11, 2010

Resolvido...

O lado do cliente (Client-Side) ficou assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"> 
 
contador=0;
function addCampos() 
{
	var qtdeCampos = document.getElementById("campo").value;
	contador++;
		
	if(contador==1)
	{
		for(i=1; i<=qtdeCampos; i++)
		{
			var objPai = document.getElementById("campoPai");
			//Criando o elemento DIV;
			var objFilho = document.createElement("div");
			//Definindo atributos ao objFilho1:
			objFilho.setAttribute("id","filho"+i);
			//Inserindo o elemento no pai:
			objPai.appendChild(objFilho);
			//Escrevendo algo no filho recém-criado:
			document.getElementById("filho"+i).innerHTML = "<table border='0' cellpadding='1' cellspacing='0'><tr><td> <select name='socio"+i+"' id='socio"+i+"'><option value=''></option>	<option value='1'> Alexandre </option>	</select></td><td><input type='text' name='capital' /></td><td><select name='cargo"+i+"' id='cargo"+i+"'><option value=''></option></select></td></tr></table>";
		}
	}
	else
	{
		for(y=i; y<=qtdeCampos; y++)
		{
			var objPai = document.getElementById("campoPai");
			//Criando o elemento DIV;
			var objFilho = document.createElement("div");
			//Definindo atributos ao objFilho1:
			objFilho.setAttribute("id","filho"+y);
			//Inserindo o elemento no pai:
			objPai.appendChild(objFilho);
			//Escrevendo algo no filho recém-criado:
			document.getElementById("filho"+y).innerHTML = "<table border='0' cellpadding='1' cellspacing='0'><tr><td> <select name='socio"+y+"' id='socio"+i+"'><option value=''></option><option value='1'> Alexandre </option> </select> </td><td><input type='text' name='capital' /></td><td><select name='cargo"+i+"' id='cargo"+i+"'><option value=''></option></select></td></tr></table>";
		}		
	}
}
</script>
</head>
 
<body>
<input type="text" name="num_campos" id="campo" size="1" maxlength="2" />
<input type="button" value="Adicionar campos" onclick="addCampos()">
 
<table border="0" cellpadding="1" cellspacing="0">
	<tr>
		<td>
			<select name="socio">
				<option value=""></option>
				<option value='1'> Alexandre </option>			</select>
		</td>
		<td><input type="text" name="capital" /></td>
		<td>
			<select name="cargo" id="cargo">
				<option value=""></option>
			</select>
		</td>
	</tr>
</table>
<div id="campoPai"></div>
 
</body>
</html>

E o lado do servidor (Server-Side) ficou assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<?php
include("../conexoes/clientes.php");
conectar_clientes();

$sql_socio="SELECT * FROM clientes.socios";
$resultado_socio=mysql_query($sql_socio);
$linha_socio=mysql_num_rows($resultado_socio);
?>
<script type="text/javascript">

contador=0;
function addCampos() 
{
	var qtdeCampos = document.getElementById("campo").value;
	contador++;
		
	if(contador==1)
	{
		for(i=1; i<=qtdeCampos; i++)
		{
			var objPai = document.getElementById("campoPai");
			//Criando o elemento DIV;
			var objFilho = document.createElement("div");
			//Definindo atributos ao objFilho1:
			objFilho.setAttribute("id","filho"+i);
			//Inserindo o elemento no pai:
			objPai.appendChild(objFilho);
			//Escrevendo algo no filho recém-criado:
			document.getElementById("filho"+i).innerHTML = "<table border='0' cellpadding='1' cellspacing='0'><tr><td> <select name='socio"+i+"' id='socio"+i+"'><option value=''></option>	<?php	for($o=0; $o<$linha_socio; $o++){ $nome_socio=mysql_result($resultado_socio, $o, "nome_socio"); $id_socio=mysql_result($resultado_socio, $o, "id_socio");					echo "<option value='$id_socio'> $nome_socio </option>"; }	?>	</select></td><td><input type='text' name='capital' /></td><td><select name='cargo"+i+"' id='cargo"+i+"'><option value=''></option></select></td></tr></table>";
		}
	}
	else
	{
		for(y=i; y<=qtdeCampos; y++)
		{
			var objPai = document.getElementById("campoPai");
			//Criando o elemento DIV;
			var objFilho = document.createElement("div");
			//Definindo atributos ao objFilho1:
			objFilho.setAttribute("id","filho"+y);
			//Inserindo o elemento no pai:
			objPai.appendChild(objFilho);
			//Escrevendo algo no filho recém-criado:
			document.getElementById("filho"+y).innerHTML = "<table border='0' cellpadding='1' cellspacing='0'><tr><td> <select name='socio"+y+"' id='socio"+i+"'><option value=''></option><?php	for($o=0; $o<$linha_socio; $o++){ $nome_socio=mysql_result($resultado_socio, $o, "nome_socio"); $id_socio=mysql_result($resultado_socio, $o, "id_socio"); 					echo "<option value='$id_socio'> $nome_socio </option>"; } ?> </select> </td><td><input type='text' name='capital' /></td><td><select name='cargo"+i+"' id='cargo"+i+"'><option value=''></option></select></td></tr></table>";
		}		
	}
}
</script>
</head>

<body>
<input type="text" name="num_campos" id="campo" size="1" maxlength="2" />
<input type="button" value="Adicionar campos" onclick="addCampos()">

<table border="0" cellpadding="1" cellspacing="0">
	<tr>
		<td>
			<select name="socio">
				<option value=""></option>
				<?php
				for($o=0; $o<$linha_socio; $o++)
				{
					$nome_socio=mysql_result($resultado_socio, $o, "nome_socio");
					$id_socio=mysql_result($resultado_socio, $o, "id_socio");
				
				echo "<option value='$id_socio'> $nome_socio </option>";
				
				}
				?>
			</select>
		</td>
		<td><input type="text" name="capital" /></td>
		<td>
			<select name="cargo" id="cargo">
				<option value=""></option>
			</select>
		</td>
	</tr>
</table>
<div id="campoPai"></div>

</body>
</html>

O innerHTML tem que ficar todo em uma linha só...

Vlw galera.

William Bruno · Fevereiro 12, 2010

legal... bom que resolveu.. apenas para titulo de informação, você pode quebra linhas no innerHTML sim.. mas precisa concatenar elas..

document.getElementById("filho"+i).innerHTML = "<table border='0' cellpadding='1' cellspacing='0'><tr><td> "+
		"<select name='socio"+i+"' id='socio"+i+"'><option value=''></option>"+

... e por ai vai... fica bom para organizar o código.

visitante_xp · Fevereiro 12, 2010

Opa, pode crer...

Muito obrigado.

Arquivado

[Resolvido] Adicionar SELECT (drop-down) dinamicamente

Recommended Posts

visitante_xp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

visitante_xp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

visitante_xp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

visitante_xp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

visitante_xp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante