Ir para conteúdo

Arquivado

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

Flávia Jobstraibizer

[Resolvido] Combo gerar um input type text

Por , em Javascript

Recommended Posts

Flávia Jobstraibizer    1

Flávia Jobstraibizer
Postado

Pessoal, estou tentando modificar um script de combos dinamicos para fazer uma tarefa diferente, mas não parece dar muito certo.

 

Tenho um combo com apenas 4 opções.

Mas duas delas, ao serem selecionadas vão carregar novos combos

E duas delas vão abrir um campo do tipo input texto para serem preenchidos.

 

Alguém tem alguma idéia de como fazer isso?

 

Obrigadinha

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo P    0

Leonardo P
Postado

Os combos que serão carregados são dinâmicos?

 

Porque se não forem você pode apenas usar um display:hidden neles e no input texto e colocar um evento onchange no 1° combo. Aí de acordo com o value selecionado no combo você mostra os inputs.

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado 

<script>

function create(vlr) {

var tabela = document.getElementById('tableJob');

var lastRow = tabela.rows.length;

var row = tabela.insertRow(lastRow);

var col0 = row.insertCell(0);

var nr = document.createTextNode(lastRow);

col0.appendChild(nr);

 

var col1 = row.insertCell(1);

if(vlr == "1" || vlr == "2") {

var cod = document.createElement('input');

cod.setAttribute('type', 'text' );

cod.setAttribute('name', 'cod'+lastRow);

cod.setAttribute('id', 'cod'+lastRow);

cod.setAttribute('size','2');

cod.setAttribute('maxlength','6');

col1.appendChild(cod);

}

else {

var se = document.createElement("select");

se.name = "Select"+lastRow;

se.options[0] = new Option("selection 1","value 1");

se.options[1] = new Option("selection 2","value 2");

se.options[2] = new Option("selection 3","value 3");

se.options[3] = new Option("selection 4","value 4");

col1.appendChild(se);

}

}

</script>

<body>

<form name="form1" method="post" action="">

<p>

<select name="select" onChange="create(this.value);">

<option>Selecione</option>

<option value="1">ESCOLHA 1</option>

<option value="2">ESCOLHA 2</option>

<option value="3">ESCOLHA 3</option>

<option value="4">ESCOLHA 4</option>

</select>

</p>

<p> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="5" id="tableJob" name="tableJob">

<thead>

</thead>

<tbody>

 

</tbody>

</table></p>

</form>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Flávia Jobstraibizer    1

Flávia Jobstraibizer
Postado

Os combos que serão carregados são dinâmicos?

 

Porque se não forem você pode apenas usar um display:hidden neles e no input texto e colocar um evento onchange no 1° combo. Aí de acordo com o value selecionado no combo você mostra os inputs.

Leonardo, os combos não são dinâmicos não, nenhum deles, nem o principal, nem os carregados a partir deste. MAs meu script de combos dinâmicos, até carregava quando eram apenas combos, qdo comecei a colocar inputs no meio, danou com tudo..rs

 

-----------------------------------------------------------------------------------

Post Mesclado

-----------------------------------------------------------------------------------

 

Gutto, tô tentando usar este seu, mas só agora só aparece o input, não aparece os combos...

olha meu código

 

<?
require_once('../header.inc.php');
require_once('conexao.php');
?>
<head>
<script>
	function create(vlr) {
		var tabela = document.getElementById('tableJob');
		var lastRow = tabela.rows.length;
		var row = tabela.insertRow(lastRow);	
		var col0 = row.insertCell(0);
		var nr = document.createTextNode(lastRow);
		col0.appendChild(nr);
	
		var col1 = row.insertCell(1);
		if(vlr == "1" || vlr == "2") {
		var cod = document.createElement('input');
			cod.setAttribute('type', 'text' );
			cod.setAttribute('name', 'cod'+lastRow);
			cod.setAttribute('id', 'cod'+lastRow);
			cod.setAttribute('size','2');
			cod.setAttribute('maxlength','6');
			col1.appendChild(cod);
		}
		else {
			var se = document.createElement("select");
			se.name = "Select"+lastRow;
			se.options[0] = new Option("selection 1","value 1");
			se.options[1] = new Option("selection 2","value 2");
			se.options[2] = new Option("selection 3","value 3");
			se.options[3] = new Option("selection 4","value 4");
			col1.appendChild(se);
		}
	}
</script>
<link href="../Includes/novo_estilo.css" type="text/css" rel="stylesheet" />
</head>


<table width="98%" border="0" cellspacing="0" cellpadding="0" align="center">
	<tr>
		<td height="35" colspan="4" align="left" valign="middle" class="textoBoldmaior">
			 Carga de testes de aceite - Relatório
		</td>
	</tr>
  <tr>
	<td height="29" colspan="3" class="numero_paginacao"><span class="textoBold">Relatório de teste de aceite </span> </td>
  </tr>
	  <form action="ConsultaRelatorio.php" method="post" enctype="multipart/form-data" name="form1" target="_self" id="form1">
  <tr bgcolor="#f2f2f2">
	<td width="24%" height="54">
	  <span class="textoBold">Consultar relatório por: </span>
	 <select name="tipoconsulta" onChange="create(this.value);">
		  <option value="0">Selecione a consulta</option>
		  <option value="1">Id de acesso</option>
		  <option value="2">Status da carga</option>
		  <option value="3">Data da carga</option>
		  <option value="4">Tipo da solicitação</option> 
	 </select>
 </td>	 
		<td width="8%"><span class="textoBold">Consultar por: </span> 
		</td>
		<td width="68%">
		<table width="250" border="0" cellpadding="0" cellspacing="5" id="tableJob" name="tableJob">
		<thead>
		</thead>
		<tbody>
		</tbody>
		</table>
		</td>
  <tr bgcolor="#dee5ec"><td height="35px" colspan="3" align="center" class="tab_escuro">
		<label>
		  <input type="submit" value="Consultar" class="border" onClick="this.value='Consultando dados... Aguarde.'"/>
		</label>
		</td></tr>
  <tr><td colspan="3"></tr> </form> 
  <tr><td colspan="3"><br><center><input type='button' class='border' name='Sair' value='Sair' onclick="document.location='../Dashboard/Dashboard.php'" /></center></td></tr>
</table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Flávia Jobstraibizer    1

Flávia Jobstraibizer
Postado

Gutto, fiz umas modificações, tá funcionando, veja o code.

<?
require_once('../header.inc.php');
require_once('conexao.php');
?><head>
<script>
	function create(vlr) {
		var tabela = document.getElementById('tableJob');
		var lastRow = tabela.rows.length;
		var row = tabela.insertRow(lastRow);	
		var col0 = row.insertCell(0);
		var nr = document.createTextNode(lastRow);
		col0.appendChild(nr);
	
		var col1 = row.insertCell(1);
		if(vlr == "1" || vlr == "3") {
		var cod = document.createElement('input');
			cod.setAttribute('type', 'text' );
			cod.setAttribute('name', 'dados');
			cod.setAttribute('id', 'cod'+lastRow);
			cod.setAttribute('size','20');
			cod.setAttribute('maxlength','15');
			col1.appendChild(cod);
		}
		if (vlr == "2") {
			var se = document.createElement("select");
			se.name = "dados";
			se.options[0] = new Option("0 - Erro no programa");
			se.options[1] = new Option("1 - Bem sucedida");
			se.options[2] = new Option("2 - Id Divergente do tipo de solicitação");
			se.options[3] = new Option("3 - Id não encontrado");
			col1.appendChild(se);
		}
		if (vlr == "4") {
			var se = document.createElement("select");
			se.name = "dados";
			se.options[0] = new Option("1 - Ativação de acesso");
			se.options[1] = new Option("2 - Alteração de Capacidade Acesso");
			se.options[2] = new Option("3 - Alteração Padrão Acesso");
			se.options[3] = new Option("4 - Mudança Fisica de CPE");
			se.options[3] = new Option("5 - Alteração de Configuração de CPE");
			col1.appendChild(se);
		}
	}
</script>
<link href="../Includes/novo_estilo.css" type="text/css" rel="stylesheet" />
</head>



<table width="98%" border="0" cellspacing="0" cellpadding="0" align="center">
	<tr>
		<td height="35" colspan="4" align="left" valign="middle" class="textoBoldmaior">
			 Carga de testes de aceite - Relatório
		</td>
	</tr>
  <tr>
	<td height="29" colspan="3" class="numero_paginacao"><span class="textoBold">Relatório de teste de aceite </span> </td>
  </tr>
	  <form action="ConsultaRelatorio.php" method="post" enctype="multipart/form-data" name="form1" target="_self" id="form1">
  <tr bgcolor="#f2f2f2">
	<td width="24%" height="54">
	  <span class="textoBold">Consultar relatório por: </span>
	 <select name="tipoconsulta" onChange="create(this.value);">
		  <option value="0">Selecione a consulta</option>
		  <option value="1">Id de acesso</option>
		  <option value="2">Status da carga</option>
		  <option value="3">Data da carga</option>
		  <option value="4">Tipo da solicitação</option> 
	 </select>
 </td>	 
		<td width="8%"><span class="textoBold">Consultar por: </span> 
		</td>
		<td width="68%">
		<table width="250" border="0" cellpadding="0" cellspacing="5" id="tableJob" name="tableJob">
		<thead>
		</thead>
		<tbody> 
		</tbody>
		</table>
		</td>
  <tr bgcolor="#dee5ec"><td height="35px" colspan="3" align="center" class="tab_escuro">
		<label>
		  <input type="submit" value="Consultar" class="border" onClick="this.value='Consultando dados... Aguarde.'"/>
		</label>
		</td></tr>
  <tr><td colspan="3"></tr> </form> 
  <tr><td colspan="3"><br><center><input type='button' class='border' name='Sair' value='Sair' onclick="document.location='../Dashboard/Dashboard.php'" /></center></td></tr>
</table>

Mas queria que ao invés de abrir com append (somando mais um sempre) ele substuisse child aberto pelo novo selecionado no primeiro combo. tentei recplaceChild, mas aí não aparece nada... você sabe como?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo P    0

Leonardo P
Postado

pior é o tanto de código pra uma coisa que para o usuário parece simples...

 

sobre a dúvida tente removeChild e depois o append pra adicionar o novo combo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo P    0

Leonardo P
Postado

eu fiz um teste aqui com o replaceChild e funcionou

function trocar(id){
var cod = document.createElement('input');
cod.setAttribute('type', 'text' );
cod.setAttribute('size','2');
cod.setAttribute('maxlength','6');
var x=document.getElementById(id);
x.parentNode.replaceChild(cod,x);
}
no html

 

<p id="p1">asdfasdfadf<br />
asdfasdfadf<br />
asdfasdfadf<br />
asdfasdfadf<br />
asdfasdfadf<br />
asdfasdfadf<br />
asdfasdfadf<br />
asdfasdfadf<br />asdfasdfadf<br />

asdfasdfadf<br />asdfasdfadf<br />asdfasdfadf<br />asdfasdfadf<br />asdfasdfadf<br />
</p><a href="java script:trocar('p1')">Trocar</a>

no w3schools tem alguns exemplos usando remove e replace talvez tê dê uma luz...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Flávia Jobstraibizer    1

Flávia Jobstraibizer
Postado

Eu estou justamente vendo as opções lá no w3schoools. Não tem nada que resolva até agora.

E eu não posso ter um link de trocar, como você colocou. Preciso que não seja possível ver mais do que um item (seja um combo ou um input) ao selecionar o primeiro item do combo e direto com replaceChild realmente não deu. Nem com deleteRow :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado

Os combos que serão carregados são dinâmicos?

 

Porque se não forem você pode apenas usar um display:hidden neles e no input texto e colocar um evento onchange no 1° combo. Aí de acordo com o value selecionado no combo você mostra os inputs.

Leonardo, os combos não são dinâmicos não, nenhum deles, nem o principal, nem os carregados a partir deste. MAs meu script de combos dinâmicos, até carregava quando eram apenas combos, qdo comecei a colocar inputs no meio, danou com tudo..rs

 

 

Olhando o que você quer fazer, creio que é mais simples usando as opções de visibility hidden ou display none..

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado

Gutto, mas agora está tão avançado, falta tão pouco...rs

Só quero que não apareça todas as opções escolhidas, somente uma, a que estiver atualmente selecionada.

Quando selecionado Status da Carga, Data da Carga e outros, os inputs e selects vão ficando na tela, você quer que seja exibido apenas o input ou select relacionado com a opção selecionada, isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Flávia Jobstraibizer    1

Flávia Jobstraibizer
Postado

ISSO!

 

Eu estava tentando fazer um if pra pegar o elemento pelo nome, ou então verificar o lastChild dar um remove e depois um append, mas nada vai...rs

É fogo não saber o que determinadas funções fazem...

 

tentei até

 

if (document.getElementsByName('input') == 'data') {

col1.removeChild(cod);

}else{

col1.appendChild(cod);

}

 

pra você ver em que ponto cheguei..rs

mas javascript não é PHP, não funciona de cara..rs

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado

Acrescenta no início do code

 

JAVASCRIPT
var tabela = document.getElementById('tableJob');

        var countRows = tabela.rows.length;

                if (countRows != 0) {

                        for (g = 0; g < countRows; g++) {

                                document.getElementById('tableJob').deleteRow(g);

                        }

                }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Flávia Jobstraibizer    1

Flávia Jobstraibizer
Postado

Acrescenta no início do code

 

JAVASCRIPT
var tabela = document.getElementById('tableJob');

        var countRows = tabela.rows.length;

                if (countRows != 0) {

                        for (g = 0; g < countRows; g++) {

                                document.getElementById('tableJob').deleteRow(g);

                        }

                }

Gutto, estou te devendo uma!

Funcionou direitinho!

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado

Aqui com alterações:

JAVASCRIPT
<script>

    function create(vlr) {

        var tabela = document.getElementById('tableJob');

        var countRows = tabela.rows.length;

                if (countRows != 0) {

                                document.getElementById('tableJob').deleteRow(0);

                }           

                var tabela = document.getElementById('tableJob');

        var lastRow = tabela.rows.length;

        var row = tabela.insertRow(lastRow);    

        var col0 = row.insertCell(0);

        var nr = document.createTextNode(lastRow);

        col0.appendChild(nr);

   

        var col1 = row.insertCell(1);

        if(vlr == "1" || vlr == "3") {

        var cod = document.createElement('input');

            cod.setAttribute('type', 'text' );

            cod.setAttribute('name', 'dados');

            cod.setAttribute('id', 'cod'+lastRow);

            cod.setAttribute('size','20');

            cod.setAttribute('maxlength','15');

            col1.appendChild(cod);

        }

        if (vlr == "2") {

            var se = document.createElement("select");

            se.name = "dados";

            se.options[0] = new Option("0 - Erro no programa");

            se.options[1] = new Option("1 - Bem sucedida");

            se.options[2] = new Option("2 - Id Divergente do tipo de solicitação");

            se.options[3] = new Option("3 - Id não encontrado");

            col1.appendChild(se);

        }

        if (vlr == "4") {

            var se = document.createElement("select");

            se.name = "dados";

            se.options[0] = new Option("1 - Ativação de acesso");

            se.options[1] = new Option("2 - Alteração de Capacidade Acesso");

            se.options[2] = new Option("3 - Alteração Padrão Acesso");

            se.options[3] = new Option("4 - Mudança Fisica de CPE");

            se.options[3] = new Option("5 - Alteração de Configuração de CPE");

            col1.appendChild(se);

        }

    }

</script>

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