[Resolvido] carregar input text com dados vindos do select

will_pHp · Agosto 21, 2009

Eai galera, eu estou quebrando a cabeça aqui pra fazer isso, é o seguinte eu tenho um select na minha página e os dados estão vindo do banco de dados, eu quero fazer é quando eu escolher um determinado produto no primeiro select ele mostre o valor em um campo input text e a quantidade em estoque em outro select, tem como fazer isso? Eu consegui fazer o select enviar p/ input text o preco e outro input text a quantidade porém eu naum sei como fazer p/ enviar em um outro select, vai ficar assim:

select -> input text -> select

segue oq eu consegui fazer:

<script language="Javascript">
function PrintProd(){
  var myString = document.formProd.produto.value
  var myStringLength = myString.length
  var Comma = myString.lastIndexOf(',')
  var SufNumChars = Comma + 1

  document.formProd.preco.value=('');
  document.formProd.quantidade.value=('');

  for(i=0; i<Comma; i++)
  document.formProd.preco.value+=(myString.charAt(i));
  document.formProd.preco.value='';
  
  document.formProd.quantidade.value+=(myString.charAt(i));
  document.formProd.quantidade.value='';

  for(i=SufNumChars; i<myStringLength; i++)
  document.formProd.preco.value='R$ '+(myString.split('::')[4]);
  document.formProd.quantidade.value=(myString.split('::')[3]);
}
</script>

Henrique Barcelos · Agosto 21, 2009

Fiquei meio confuso com a sua dúvida...

Pode ser um pouco mais claro?

will_pHp · Agosto 22, 2009

Fiquei meio confuso com a sua dúvida...

Pode ser um pouco mais claro?

vamos lá na imagem abaixo mostra a tela q eu coloquei os select e os input, o campo em vermelho eu quero q seja outro select recebendo os dados vindo do primeiro select:

Imagem Postada

nesta imagem mostra o select preenchendo os dois input com o preço e a quantidade em estoque vindo do primeiro select:

Imagem Postada

resumindo: eu quero q o segundo input em vermelho na primeira imagem, seja um select numerando os dados vindo do primeiro select. agradeço a ajuda

webmind · Agosto 22, 2009

você pode usar ajax + xml

que linguagem ta usando? PHP ou ASP?

klonder · Agosto 22, 2009

eu quero q o segundo input em vermelho na primeira imagem, seja um select numerando os dados vindo do primeiro select. agradeço a ajuda

Tenho um script aqui que poderá te ajudar, pois o método é muito parecido. Nesse caso, basta você adaptar ao seu caso:

<html>
<head>
<script type="text/javascript">
var x = new Array("");

var Brasil = new Array("Acre","Alagoas","Amapá","Amazonas","Bahia","Ceará","Distrito Federal","Goiás","Espírito Santo","Maranhão","Mato Grosso","Mato Grosso do Sul","Minas Gerais","Pará","Paraiba","Paraná","Pernambuco","Piauí","Rio de Janeiro","Rio Grande do Norte","Rio Grande do Sul","Rondônia","Roraima","São Paulo","Santa Catarina","Sergipe","Tocantins");

var Argentina = new Array("Buenos Aires","Chaco","Catamarca","Chubut","Córdoba","Corrientes","Entre Ríos","Formosa","Jujuy","La Pampa","La Rioja","Mendoza","Misiones","Neuquén","Río Negro","Salta","San Juan","San Luis","Santa Cruz","Santa Fe","Santiago del Estero","Tierra del Fuego","Tucumán");

//Outra opção é deixar a primeira opção em branco. Exemplo:
//var Argentina = new Array("","Cidade de Buenos...


function loadList(v) {
var objSpan1 = document.getElementById("estado");
var listaEscolhida = eval(v);
/*
if (listaEscolhida==x) {
	objSpan1.style.display = "none";
}else{
	objSpan1.style.display = "block";
}
*/

document.form1.sEstado.options.length = listaEscolhida.length;
	for (i=0; i<listaEscolhida.length; i++) {
		document.form1.sEstado.options[i] = new Option(listaEscolhida[i], listaEscolhida[i]);
	}
}

function resetLists() {
	loadList("x");
	document.form1.sPais.options[0].selected = true;
}
window.onload = resetLists;
</script>
</head>
<body>
<form name="form1" method="post" action="echo_post.php">
País: <select name="sPais" onchange="loadList(this.value)" size="1">
<option value="x" selected></option>
<option value="Argentina">Argentina</option>
<option value="Brasil">Brasil</option>
</select>

<span id="estado">
<br><br>Estado:
<select name="sEstado" size="1"></select></span>
</form>
</body>
</html>

O que o código acima faz é jogar em um select valores específicos de acordo com o que foi selecionado em outro select.

Nesse caso, eu jogo em um select os estados de um país selecionado no primeiro select.

will_pHp · Agosto 22, 2009

eu quero q o segundo input em vermelho na primeira imagem, seja um select numerando os dados vindo do primeiro select. agradeço a ajuda

Tenho um script aqui que poderá te ajudar, pois o método é muito parecido. Nesse caso, basta você adaptar ao seu caso:

<html>
<head>
<script type="text/javascript">
var x = new Array("");

var Brasil = new Array("Acre","Alagoas","Amapá","Amazonas","Bahia","Ceará","Distrito Federal","Goiás","Espírito Santo","Maranhão","Mato Grosso","Mato Grosso do Sul","Minas Gerais","Pará","Paraiba","Paraná","Pernambuco","Piauí","Rio de Janeiro","Rio Grande do Norte","Rio Grande do Sul","Rondônia","Roraima","São Paulo","Santa Catarina","Sergipe","Tocantins");

var Argentina = new Array("Buenos Aires","Chaco","Catamarca","Chubut","Córdoba","Corrientes","Entre Ríos","Formosa","Jujuy","La Pampa","La Rioja","Mendoza","Misiones","Neuquén","Río Negro","Salta","San Juan","San Luis","Santa Cruz","Santa Fe","Santiago del Estero","Tierra del Fuego","Tucumán");

//Outra opção é deixar a primeira opção em branco. Exemplo:
//var Argentina = new Array("","Cidade de Buenos...


function loadList(v) {
var objSpan1 = document.getElementById("estado");
var listaEscolhida = eval(v);
/*
if (listaEscolhida==x) {
	objSpan1.style.display = "none";
}else{
	objSpan1.style.display = "block";
}
*/

document.form1.sEstado.options.length = listaEscolhida.length;
	for (i=0; i<listaEscolhida.length; i++) {
		document.form1.sEstado.options[i] = new Option(listaEscolhida[i], listaEscolhida[i]);
	}
}

function resetLists() {
	loadList("x");
	document.form1.sPais.options[0].selected = true;
}
window.onload = resetLists;
</script>
</head>
<body>
<form name="form1" method="post" action="echo_post.php">
País: <select name="sPais" onchange="loadList(this.value)" size="1">
<option value="x" selected></option>
<option value="Argentina">Argentina</option>
<option value="Brasil">Brasil</option>
</select>

<span id="estado">
<br><br>Estado:
<select name="sEstado" size="1"></select></span>
</form>
</body>
</html>

O que o código acima faz é jogar em um select valores específicos de acordo com o que foi selecionado em outro select.

Nesse caso, eu jogo em um select os estados de um país selecionado no primeiro select.

oi klonder obrigado pelo script so q ele naum roda, esta dando erro, e como eu faria p/ ele jogar o valor no input e ao mesmo tempo no select? onde eu tenho q alterar no script p/ fazer isso? eu naum entendo nada d javascript, e Rick.hjpbarcelos eu estou programando em PHP

Henrique Barcelos · Agosto 22, 2009

Você tem que "mostrar" o valor capturado com um echo, ou printf...

Esse valor vai estar na propriedade responseText do AJAX...

Se não souber AJAX fica dificil...

function Cria_XmlHttpObject(){

    var xmlHttp = null;
    //cria o objeto XMLHttpRequest pra firefox, mozila, opera, etc
    try {
        xmlHttp = new XMLHttpRequest();
    } 
    
    //cria o objeto XMLHttpRequest pra internet explorer, 6,0 + e posteriormente para internet explorer
    catch (e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        
        catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    
    return xmlHttp;
}

//informe a pagina que quer carregar, a que faz a consulta ao banco, o ID do input e se é para mostrar "Carregando" na tela...
function carregarPagGet(pagina, id, exibe){
    xmlHttp = Cria_XmlHttpObject();
    
    if (xmlHttp == null) {
        alert("O seu navegador é imcompatível com Ajax!");
    }
    
    objetoHTML = document.getElementById(id);
    
    if (exibe == true) {
        objetoHTML.innerHTML = "<div id='carregando'>Carregando...</div>" + objetoHTML.innerHTML;
    }
    
    xmlHttp.open("GET", pagina, true);
    
    xmlHttp.onreadystatechange = function(){
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                 //como é um input, use a propriedade value
                 objetoHTML.value = xmlHttp.responseText;
            }
            else 
                if (xmlHttp.status == 404) {
                    objetoHTML.value = "<p>Erro 404: página não encontrada</p>";
                }
        }
    }
    
    xmlHttp.send(null);
}

klonder · Agosto 22, 2009

Testei o código aqui e não vi erro algum. Para testar, basta copiar e colar em seu editor HTML, do jeito que está, salvando em seguida com a extensão "htm" ou "php". Você não pode alterar nada no código, senão poderão ocorrer erros realmente.

Como o Rick disse, você pode também fazer em AJAX.

Para os demais usuários do fórum, que não quiserem fazer com AJAX, basta dar um echo com os valores do Banco de Dados nas variáveis (array) do JavaScript:

var Brasil = new Array("Acre","Alagoas","Amapá","Amazonas","Bahia","Ceará","Distrito Federal","Goiás","Espírito Santo","Maranhão","Mato Grosso","Mato Grosso do Sul","Minas Gerais","Pará","Paraiba","Paraná","Pernambuco","Piauí","Rio de Janeiro","Rio Grande do Norte","Rio Grande do Sul","Rondônia","Roraima","São Paulo","Santa Catarina","Sergipe","Tocantins");

var Argentina = new Array("Buenos Aires","Chaco","Catamarca","Chubut","Córdoba","Corrientes","Entre Ríos","Formosa","Jujuy","La Pampa","La Rioja","Mendoza","Misiones","Neuquén","Río Negro","Salta","San Juan","San Luis","Santa Cruz","Santa Fe","Santiago del Estero","Tierra del Fuego","Tucumán");

Eu estou utilizando nomes de estado, mas você irá utilizar os seus próprios valores.

Se forem muitos dados, sugiro fazer com AJAX realmente, pois dependerá de pesquisa em Banco de Dados, evitando com isso encher o código com milhares de valores diferentes.

will_pHp · Agosto 23, 2009

oi Rick.hjpbarcelos tudo bem? seguinte realmente eu naum sei mexer com ajax, naum tenho a mínima noção d por onde começar a usar isso, eu so quero saber mesmo se tem como eu usar o código q já fiz p/ pegar estes valores.

<select name="produto" class="select" onchange="PrintProd();" onmouseclick="this.focus()">
	<option value=""></option>
	<?php
		$sql = mysql_query("SELECT * FROM produtos");
		if(mysql_num_rows($sql)){
			while($d=mysql_fetch_array($sql)){
	?>
        <option value="<?=$d['id']?>::<?=$d['codigo']?>::<?=$d['produto']?>::<?=$d['quantidade']?>::<?=$d['preco']?>">
	<?=$d['produto']?></option>
        <?php }} ?>
</select>

este é o código do meu select, o js conta quantos "::" tem e pega o valor correspondende nele, e pelo oq eu entendi desde script q você postou ai, ele esta criando um novo elemento e eu ñ quero q crie so q preencha os campos existentes com o valor do primeiro select. Tem como eu fazer isso utilizando o script q ja fiz?

will_pHp · Agosto 24, 2009

eai galera, será se naum tem ninguém aqui q pode me ajudar nisso?

klonder · Agosto 24, 2009

Cara, se você não está acostumado com AJAX, faz da maneira mais simples mesmo.

Uma coisa que você postou:

vamos lá na imagem abaixo mostra a tela q eu coloquei os select e os input, o campo em vermelho eu quero q seja outro select recebendo os dados vindo do primeiro select:

Na verdade, esse campo em vermelho não é um select, mas sim um input do tipo "text", ou seja, você seleciona um select e, de acordo com essa seleção, dois inputs do tipo texto irão receber determinados valores.

Copie e cole o código abaixo em seu editor HTML, sem alterar NENHUMA linha e sem misturar com outros códigos ou trechos HTML (Testado no IE7, FF e Chrome):

<html>
<head>
<script type="text/javascript">
//Esses dados serão preenchidos com um echo do PHP, por exemplo:
var valor = new Array();
var qtde = new Array();
valor[0] = ""; qtde[0] = "";
valor[1] = "145,00"; qtde[1] = "14";
valor[2] = "235,00"; qtde[2] = "23";
valor[3] = "545,00"; qtde[3] = "54";
valor[44] = "45,00"; qtde[4] = "9";

function preencher(v){
var objValor = document.getElementById("valor1");
var objQtde = document.getElementById("qtde1");

objValor.value = valor[eval(v)];
objQtde.value = qtde[eval(v)];

}
</script>

</head>
<body>
Produto: <select id="item1" onchange="preencher(this.value)">
<option value="0"></option>
<option value="1">Produto 1</option>
<option value="2">Produto 2</option>
<option value="3">Produto 3</option>
<option value="4">Produto 4</option>
</select>

Valor: R$ <input type="text" id="valor1">
Quantidade: <input type="text" id="qtde1"> unidades.
</body>
</html>

will_pHp · Agosto 24, 2009

Klonder obrigado por responder eu sei q o campo é um input text eu so coloquei p/ ilustrar, mais agora a pouco eu consegui resolver esta parte do meu problema tirei o dia p/ estudar um pouco d javascript e achei uma solução usando o script q ja fiz, agora estou com outro problema é numerar os resultados encontrados: segue oq eu fiz p/ alguém me da uma luz como eu faço para contar os campos corretamente:

function printProd(){
	var myString = document.formProd.produto.value  
	var myStringLength = myString.length
	var quebra = myString.split('::')
	
	document.formProd.valor.value='R$ '+quebra[4];
	
		for(i=1;i<=quebra[3];i++){
		document.formProd.quantidade.options[i] = new Option([i],[i]);
		}
}

eu quero q os resultados apareçam de forma crescente quando eu clicar em um produto, eles até q aparecem porém se eu resolver escolher outro o indice do anterior fica ativo, naum atualiza

will_pHp · Agosto 24, 2009

Klonder obrigado ai pela ajuda, apesar de naum ter resolvido meu problema me apontou um caminho, valeu pela força, consegui resolver tudo aqui.

moderador pode colocar este tópico como resolvido.

obrigado a todos.

klonder · Agosto 25, 2009

Que bom que conseguiu! JavaScript é uma mão na roda realmente, tornando o site muito mais rápido e funcional.

Apenas uma breve consideração:

Klonder obrigado ai pela ajuda, apesar de naum ter resolvido meu problema me apontou um caminho, valeu pela força, consegui resolver tudo aqui.

É realmente esse o objetivo do fórum: apontar caminhos, fornecer dicas, ilustrar situações com códigos-modelo e outros exemplos da web. Evitamos sempre a construção de sistemas prontos para os usuários, pois o fórum (que é de ajuda) perderia a sua essência, ou seja, perderíamos a essência do aprendizado e da busca pelo saber. De nada adiantaria

se fosse assim.

Que bom que conseguiu resolver seu problema. Qualquer dúvida estaremos aqui para te ajudar!

Vou colocar o tópico como resolvido.

Abraços!

Arquivado

[Resolvido] carregar input text com dados vindos do select

Recommended Posts

will_pHp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

will_pHp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webmind 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

will_pHp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

will_pHp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

will_pHp 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

will_pHp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

will_pHp 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

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