Combobox com opção de digitar em input

[Marisa Lima 0]

Boa tarde.

 

Encontrei este exemplo na net que funciona correctamente, mas não o consigo adpatar ao meu problema.

<script>
function muda() {
if(document.getElementById('select').value=='') {
document.getElementById('campoR').name='campo';
document.getElementById('campoR').style.display='block';
} else {
document.getElementById('campoR').name='campoR';
document.getElementById('campoR').style.display='none';
}
}
</script>

<form method="post" action="">
<select name="campo" id="select" onchange="muda()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="">outros</option>
</select>

<input type="text" name="campoR" id="campoR" value="" style="display:none;">
<input type="submit">
</form>

Este exemplo é só para um select e um input, mas no meu caso eu crio o formulário dinamicamente e o nome do meu select é do tipo array. Consigo que funcione mas só para o primeiro formulário. Será que me podem ajudar.

[Bru_ce 53]

Explique melhor o seu problema para que possamos lhe ajudar, esta confuso .. :thumbsup:

[Marisa Lima 0]

O meu formulário e criado da seguinte forma:

<?php 
	if ($dados==0) {
			  echo "Não pode escolher mais formações para o colaborador ";
		  }


	else 
		for($i=0;$i<$dados;$i++) :
	?>
	<table>
		<tr>
			<th>Acção de formação <br /> / Área de desenvolvimento Profissional </th>
 		<td>
  		<select name="nome[]" id="select" style="width: 400px" onchange="muda();">
	<option></option>
	<?php foreach ($data as $value) :

			echo "<option value=\"" . $value['id'] . "\">" . $value['nome'] . "</option>";

		endforeach; ?>
 		 </select>
 		 <br />
 		 <input type="text" name="outras[]" id="outras" value="" style="display:none;">
 		</td>
		</tr>

		<tr>
			<th>Descrição das medidas a tomar para combater as necessidades de formação / desenvolvimento</th>
 		<td>
  		<textarea style="width: 400px;" name="descricao[]"></textarea>
 		</td>
		</tr>
		<tr>
			<th>Data</th>
 		<td>
  		<input type="text" name="data[]" /> <label>YYYY-MM-DD</label>
 		</td>
		</tr>
		<tr>
			<th>Medição (Indicador) da concretização da(s) acção(ões)</th>
 		<td>
  		<input style="width: 400px" type="text" name="medicao[]" />
 		</td>
		</tr>
	</table>
<hr />

<?php endfor; ?>

Portanto eu vou ter no máximo três formulário todos iguais. O que eu pretendo é sempre que o utlizador selecciona a opção Outras no select seja criada um input para poder escrever o que pretende. Será que assim conseguem perceber o que pretendo?

[Bru_ce 53]

tem um link de referência ?

[Marisa Lima 0]

o link é este

http://www.codigosnaweb.com/forum/Combobox-com-opcao-de-digitar-em-um-input-text_3_7003.html

[Bru_ce 53]

Como vai ficar o nome dos inputs gerados dinamicamente ?

Coloque o nome do select e dos inputs "iguais",

Por exemplo select1, input1, select2, input2 .. !

Ai quando você clicar no select ele pega o id e/ou nome dele, logo você deixa visível o input conforme o nome do select, creio que funciona.

 

$(function(){


$("input[type='select']").change(function(){

var nome = $(this).attr('name');


});

});

[Marisa Lima 0]

Tentei fazer assim mas só funciona no primeiro form.

function muda() {



               if(document.getElementById('nome[]').value=='931')
               {
                       document.getElementById('outras[]').name='nome[]';
                       document.getElementById('outras[]').style.display='block';
               }
               else{
                       document.getElementById('outras[]').name='outras[]';
                       document.getElementById('outras[]').style.display='none';
               }

}

 

o forma está assim:

   <table>
               <tr>
                       <th>Acção de formação <br /> / Ãrea de desenvolvimento Profissional </th>
               <td>
               <select name="nome[]" id="<php echo $i ?>" style="width: 400px" onchange="muda()">
               <option></option>
               <?php foreach ($data as $value) :

                               echo "<option value=\"" . $value['id'] . "\">" . $value['nome'] . "</option>";

                       endforeach; ?>
                </select>
<br />
<input type="text" name="outras[]" id="<?php echo $i ?>" value="" style="display:none;">
               </td>
               </tr>

               <tr>
                       <th>Descrição das medidas a tomar para combater as necessidades de formação / desenvolvimento</th>
               <td>
               <textarea style="width: 400px;" name="descricao[]"></textarea>
               </td>
               </tr>
               <tr>
                       <th>Data</th>
               <td>
               <input type="text" name="data[]" /> <label>YYYY-MM-DD</label>
               </td>
               </tr>
               <tr>
                       <th>Medição (Indicador) da concretização da(s) acção(ões)</th>
               <td>
               <input style="width: 400px" type="text" name="medicao[]" />
               </td>
               </tr>
               </table>

[Bru_ce 53]

faz com jQuery, JS "puro" vai te complicar e você vai escrever mais.

Tente incrementar o que fiz para você ! :thumbsup:

[Marisa Lima 0]

fiz assim mas quando executo o browser recebo a mensagem em como $document is undefined. Já troquei o fiheiro do jquery e mesmo assim não funciona.

$document.ready(function(){
       $("#nome[]").change(function(){
               if(("#nome[]").atrr("Outras"))
               {
                       $("#outras").css("display","block");

               }
               else
               {
                       $("#outras").css("display","none");
               }





       });

});

 

Por favor faça um exemplo para eu perceber onde estou errando.

[Bru_ce 53]

:thumbsup:

$(function(){
// SEUS COMANDOS AQUI !
});

 

Você havia se esquecido dos "(", ou continue utilizando como estava,

segue abaixo:

 

 

$(document).ready(function(){
// AQUI SEUS COMANDOS
});

[Marisa Lima 0]

Já não aquele erro mas agora dá outro

$(document).ready(function(){
       $("#select").change(function(){
               if(("#select").attr('Outras'))
               {
                       $("#outras").css("display","block");

               }
               else
               {
                       $("#outras").css("display","none");
               }





       });

});

 

O erro é:

Webpage error details

Message: Object doesn't support this property or method

 

Dá quando seleccione no select.

[Bru_ce 53]

Você esta importando a biblioteca jQuery ?

 

Fiz algo para você, veja se interessa:

 

 

<!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>Documento sem título</title>
<style type="text/css">
#outras1, #outras2 {
display:none;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("select").change(function(){
name = $(this).attr('name');
if(name == "select1"){
	$("#outras1").css("display","block");
	$("#outras2").css("display","none");
}
else
{
$("#outras1").css("display","none");
$("#outras2").css("display","block");	
}

});	

});
</script>
</head>

<body>
select1: <select id="teste" name="select1">
<option>Selecione</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="text" id="outras1" value="ESTE É A OUTRAS 1" />

<br />
<br />


select2: <select id="teste" name="select2">
<option>Selecione</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="text" id="outras2" value="ESTE É A OUTRAS 2" />
</body>
</html>

[Marisa Lima 0]

Sim estou!

 

O meu problema é que o formulário é dinámico e só consigo inserir o input no primeiro form, nos outros que são iguais criados dinamicamente não consigo. Para um unico eu percebi o exmplo, agora como eu faço para formulário criado dinamicamente?

[Bru_ce 53]

Você tem que ver como esta gerando ele, com qual informação ele vai no "name"

[Leandro F. Marcelli 0]

Marisa, a princípio no início da sua postagem o que fazia funcionar somente o primeiro é porque você está usando o atributo ID e ele somente pode ser usado 1 vez, como você está utilizando 3 vezes ele somente funciona no primeiro. Use class no lugar e ele funcionará.