Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 50
Sexo: Masculino
Localização: Sampa/Itanhaem/Brasil
Contato:

Select dinamico de até 3(ou mais) escolhas. AJAX+PHP+MYSQL

11-11-2008 10:24

Opa Galera, como aqui ainda não encontrei um script de select dinamico com ajax, e algumas pessoas tem duvidas, resolvi colocar um script que fiz. Vamos lá:

Primeiro de tudo crie as Bases de dados:

CREATE TABLE `categorias_auto` (   `codigo` INT(3) UNSIGNED NOT NULL AUTO_INCREMENT,   `nome` VARCHAR(50) COLLATE latin1_general_ci NOT NULL,   PRIMARY KEY  (`codigo`) ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;   INSERT INTO `categorias_auto` (`codigo`,`nome`) VALUES  (1,'Carros'),  (2,'Motos'); /*!40000 ALTER TABLE `categorias_auto` ENABLE KEYS */;     -- -- Definition of table `categorias_carro` --   DROP TABLE IF EXISTS `categorias_carro`; CREATE TABLE `categorias_carro` (   `codigo` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,   `marca` VARCHAR(45) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,   PRIMARY KEY  (`codigo`) ) ENGINE=MyISAM AUTO_INCREMENT=217 DEFAULT CHARSET=utf8;   -- -- Dumping data for table `categorias_carro` --   /*!40000 ALTER TABLE `categorias_carro` DISABLE KEYS */; INSERT INTO `categorias_carro` (`codigo`,`marca`) VALUES  (1,'CHEVROLET'),  (2,'CITROËN'),  (3,'FIAT'),  (4,'FORD'),  (5,'HONDA'),  (6,'MITSUBISHI'),  (7,'PEUGEOT'),  (8,'RENAULT'),  (9,'TOYOTA'),   CREATE TABLE `subcategoria_carro` (   `codigo` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,   `categoria` INT(3) UNSIGNED NOT NULL DEFAULT '0',   `nome` VARCHAR(50) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,   PRIMARY KEY  (`codigo`) ) ENGINE=MyISAM AUTO_INCREMENT=982 DEFAULT CHARSET=utf8;   -- -- Dumping data for table `subcategoria_carro` --   /*!40000 ALTER TABLE `subcategoria_carro` DISABLE KEYS */; INSERT INTO `subcategoria_carro` (`codigo`,`categoria`,`nome`) VALUES  (1,1,'ZAFIRA'),  (2,1,'RAMONA'),  (3,1,'PRISMA'),  (4,1,'PICKUP'),  (5,1,'OPALA'),  (6,1,'OMEGA'),  (7,1,'MONZA'),  (8,1,'MONTANA'),  (9,1,'MERIVA'),

Pronto! Aqui criamos as tabelas dos 3 selects. A 1 Categorias auto, a 2 Categorias carro(que seria os modelos dos carros) e a 3 subcategoria_carro(que seriam os carros de acordo com o modelo.

A seguir a parte do AJAX:

biblioteca_ajax.js

  // JavaScript Document var ajax; var dadosUsuario;   function requisicaoHTTP(tipo,url,assinc,trata) {         if(window.XMLHttpRequest){         ajax = new XMLHttpRequest();         }         else if(window.ActiveXObject){         ajax = new ActiveXObject("Msxml2.XMLHTTP");                 if(!ajax){                 ajax = new ActiveXObject("Microsoft.XMLHTTP");                 }         }     if (ajax)   iniciaRequisicao(tipo,url,assinc,trata); else alert("Seu navegador não possui suporte a essa aplicação"); }   function iniciaRequisicao(tipo,url,bool,trata){                 ajax.onreadystatechange=trata;                 ajax.open(tipo,url,bool,trata);                 ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; Charset=UTF-8");                 //ajax.overrideMimeType("text/XML");                 ajax.send(dadosUsuario); }   function enviaDados(url){ criaQueryString(); requisicaoHTTP("POST",url,true); }   function criaQueryString(){         dadosUsuario="";         var frm = document.forms[0];         var numElementos = frm.elements.length;         for(var i=0; i < numElementos; i++){                 if(i < numElementos-1){                         dadosUsuario += frm.elements[i].name+"=" +                         encodeURIComponent(frm.elements[i].value)+"&";                         }else{                         dadosUsuario += frm.elements[i].name+"=" +                         encodeURIComponent(frm.elements[i].value);                                         }         } }      

Esse arquivo poderá usar para diversas aplicações AJAX. A seguir o código da função que trata os dados recebidos pela biblioteca:

funcoes_ajax.js

  function trataMarca() {   subcat = document.forms[0].marca;   subcat.options.length = 0;   subcat.options[0] = new Option("Carregando...","teste");   if (ajax.readyState == 4) {     subcat.options.length = 0;             results = ajax.responseText.split(",");     subcat.options[0] = new Option( "Selecione", "selecione" );         for( i = 0 ; i < results.length; i++)     {       string = results[i].split( "|" );       subcat.options[1+i] = new Option( string[0], string[1] );                         }   } }   function trataModelo() {   subcat = document.forms[0].modelo;   subcat.options.length = 0;   subcat.options[0] = new Option( "Carregando..", "selecione" );   if (ajax.readyState == 4) {     subcat.options.length = 0;     results = ajax.responseText.split(",");     subcat.options[0] = new Option( "Selecione", "selecione" );         for( i = 0 ; i < results.length; i++)     {       string = results[i].split( "|" );       subcat.options[1+i] = new Option( string[0], string[1] );                         }   } }  

Essas 3 funções são responsáveis por tratar os dados da chamada do AJAX. eles montam os selects com seus respectivos valores.

As querys PHP:
query_marcas.php

<?php include "../conexao/conexao_mysql.inc"; $categoria = addslashes($_GET["id"]); // pegamos o id passado pelo select if ($categoria == 1){ $consulta = mysql_query("SELECT * FROM  categorias_carro GROUP BY marca ASC") or die(mysql_error()); // selecionamos todas as subcategorias que pertencem à categoria selecionada while( $row = mysql_fetch_array($consulta) ) {   echo utf8_encode($row["marca"]) . "|" . $row["codigo"] . ","; // apresentamos cada subcategoria dessa forma "NOME|CODIGO,NOME|CODIGO,NOME|CODIGO,...", exatamente da maneira que iremos tratar no JavaScript } } ?>

Esta query é Responsável pelas marcas.

Ultima query:

query_modelo.php

<?php include "../conexao/conexao_mysql.inc"; $categoria = addslashes($_GET["cat"]); $subcategoria = addslashes($_GET["id"]); // pegamos o id passado pelo select if ($categoria == 1){ $consulta = mysql_query("SELECT * FROM  subcategoria_carro WHERE categoria = $subcategoria GROUP BY nome ASC") or die(mysql_error()); // selecionamos todas as subcategorias que pertencem à categoria selecionada while( $row = mysql_fetch_array($consulta) ) {   echo utf8_encode($row["nome"]) . "|" . $row["categoria"] . ","; // apresentamos cada subcategoria dessa forma "NOME|CODIGO,NOME|CODIGO,NOME|CODIGO,...", exatamente da maneira que iremos tratar no JavaScript } } ?>

Responsável pelos modelos.

A seguir os selects com as funções e a query do 1 select.

<table><form name="filtro" action="" method="get">    <tr>    <td width="63">Categorias:</td>    <td width="156"><select name="categoria" id="categorias" onchange="Javacript:requisicaoHTTP('GET','querys/query_marca.php?id=' + this.value + '&',true,trataMarca);">    <?php   include "conexao/conexao_mysql.inc";   $sql = "SELECT * FROM categorias_auto ORDER BY nome ASC";   $run_sql = mysql_query($sql);   echo "<option value=\"\" selected=\"selected\">Selecione</option>";    while($row = mysql_fetch_array($run_sql)){    echo "<option value=\"{$row['codigo']}\">{$row['nome']}</option>\n";      }                ?>    </select></td>    </tr>    <tr>    <td>Marca:</td>    <td><select id="marca" name="marca" onchange="Javacript:requisicaoHTTP('GET','querys/query_modelo.php?cat=' + document.filtro.categorias.value + '&id=' + this.value,true,trataModelo);">        </select></td>    </tr>    <tr>    <td>Modelo:</td>    <td><select name="modelo" id="modelo">        </select></td>    </tr>    <tr>    <td>Preço:</td>    <td colspan="3" rowspan="2"><select name="valor">      <option value="5000">R$ 5.000,00</option>      <option value="10000">R$ 10.000,00</option>      <option value="15000">R$ 15.000,00</option>      <option value="20000">R$ 20.000,00</option>      <option value="25000">R$ 25.000,00</option>      <option value="30000">R$ 30.000,00</option>      <option value="35000">R$ 35.000,00</option>      <option value="40000">R$ 40.000,00</option>      <option value="45000">R$ 45.000,00</option>      <option value="50000">R$ 50.000,00</option>      <option value="55000">R$ 55.000,00</option>      <option value="60000">R$ 60.000,00</option>      <option value="65000">R$ 65.000,00</option>      <option value="70000">R$ 70.000,00</option>      <option value="75000">R$ 75.000,00</option>      <option value="80000">R$ 80.000,00</option>      <option value="85000">R$ 85.000,00</option>      <option value="90000">R$ 90.000,00</option>      <option value="95000">R$ 95.000,00</option>      <option value="100000">R$ 100.000,00</option>        </select>      <select name="valor_ate">    <option value="5000">R$ 5.000,00</option>      <option value="10000">R$ 10.000,00</option>      <option value="15000">R$ 15.000,00</option>      <option value="20000">R$ 20.000,00</option>      <option value="25000">R$ 25.000,00</option>      <option value="30000">R$ 30.000,00</option>      <option value="35000">R$ 35.000,00</option>      <option value="40000">R$ 40.000,00</option>      <option value="45000">R$ 45.000,00</option>      <option value="50000">R$ 50.000,00</option>      <option value="55000">R$ 55.000,00</option>      <option value="60000">R$ 60.000,00</option>      <option value="65000">R$ 65.000,00</option>      <option value="70000">R$ 70.000,00</option>      <option value="75000">R$ 75.000,00</option>      <option value="80000">R$ 80.000,00</option>      <option value="85000">R$ 85.000,00</option>      <option value="90000">R$ 90.000,00</option>      <option value="95000">R$ 95.000,00</option>      <option value="100000">R$ 100.000,00</option>    </select></td>    </tr>    <tr>      <td>Até: </td>    </tr>     <tr>    <td>Ano:</td>    <td colspan="3"><select name="ano">         <option selected="selected" value=""></option>         <?php   $ano_atual = date("Y");   $ano_atual += 1; for($i = 1980; $i <= $ano_atual; $i++) { echo "<option value=\"$i\">$i</option>\n"; } ?>    </select>Até:    <select name="ano_ate">     <option selected="selected" value=""></option>         <?php   $ano_atual = date("Y");   $ano_atual += 1; for($i = 1980; $i <= $ano_atual; $i++) { echo "<option value=\"$i\">$i</option>\n"; } ?>    </select></td>    </tr>    <tr>    <td><input name="Buscar" type="submit" value="Buscar" /></td>    </tr>     </form>    </table>

Analizem os códigos, nos selects na propriedade onchange ele chama a biblioteca AJAX, a função requisicaoHTTP tem 4 parametros. a primeira é o metodo, a segunda a pagina a ser carregada, a terceira se o modo e assincronico ou sincronico, e a quarta e o nome da função que irá tratar os dados recebidos que por sua vez serão resposáveis pelas montagens dos select. Lembrando que poderá usar o requisicaoHTTP para qualquer tipo de chamada AJAX.
 
function trataModelotdoption value= /select
1
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Select dinamico de até 3(ou mais) escolhas. AJAX+PHP+MYSQL

11-11-2008 12:30

MOVIDO: de MySQL para Laboratório de scripts PHP / MySQL

Testei aqui e funciona blz, mas, vou dar umas dicas de alterações no script para facilitar.

- O novo SQL é esse, que foi indicado pelo postador desse post
sql aqui

- No arquivo principal, onde vai os selects option para escolher os modelos e tal, você não pode esquecer de chamar os js.

<script src="funcoes_ajax.js"></script> <script src="biblioteca_ajax.js"></script>

- No primeiro select option do arquivo tem esse trecho: TP('GET','query_marca.php?... O indicado é query_marcas.php, aí só adicionar o s

- No arquivo principal também, os arquivos de query estão setados para querys/, como eu joguei tudo no mesmo diretório, tirei as pastas das duas chamadas no arquivo principal, se for fazer o mesmo, faça a mesma alteração.

- É feito um include do arquivo de conexão, se não tiver, use o seguinte:

$conexao = mysql_connect("localhost", "seulogin", "suasenha") or die(mysql_error()); mysql_select_db("seubd"); 

0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 1
Sexo: Masculino
Localização: Portugal - Ilha da Madeira

Select dinamico de até 3(ou mais) escolhas. AJAX+PHP+MYSQL

13-11-2008 09:53

Olá bom dia
Seu post está altamente, estava com dificuldade em fazer um select assim.
Muito obrigado
0
 
Primeiras postagens
Primeiras postagens
Mensagens: 3
Sexo: Masculino
Localização: Portugal - Caldas da Rainha

Select dinamico de até 3(ou mais) escolhas. AJAX+PHP+MYSQL

30-11-2008 14:51

Olá boas a todos,
venho agradecer o seu Post, pois era isto que andava a procura. No entanto queria fazer uma pergunta:
Será possível apenas com o atributo "onchange" da 1ª tag Select carregar os options de dois selects da mesma form?

Um abraço e obrigado
0
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 50
Sexo: Masculino
Localização: Sampa/Itanhaem/Brasil
Contato:

Select dinamico de até 3(ou mais) escolhas. AJAX+PHP+MYSQL

01-12-2008 13:40

Sim é possivel, você terá que construir mais uma pagina em php que traz os dados e no mesmo onchange do select você terá que colocar mais uma chamada ajax.
e construir mais um tratamento ajax tb, que será responsável pela montagem do select. na verdade o mesmo select vai executar 2 funções.
0
 
Primeiras postagens
Primeiras postagens
Mensagens: 3
Sexo: Masculino
Localização: Portugal - Caldas da Rainha

Select dinamico de até 3(ou mais) escolhas. AJAX+PHP+MYSQL

01-12-2008 13:59

Sim foi o que eu pensei mas experimentei e apenas actualiza um select o outro fica "carregando..."
já agora o código que utilizei segundo o exemplo acima dado foi:
   <td width="63">Categorias:</td>    <td width="156"><select name="categoria" id="categorias" onchange="Javacript:requisicaoHTTP('GET','querys/query_marca.php?id=' + this.value + '&',true,trataMarca); requisicaoHTTP('GET','querys/query_marca2.php?id=' + this.value + '&',true,trataMarca2); ">  

ou seja, no atributo onchange coloquei as duas chamadas ajax - o que me parece é que a ultima bloquei a primeira terá de haver um temp de espera???

Um abraço
0
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 50
Sexo: Masculino
Localização: Sampa/Itanhaem/Brasil
Contato:

Select dinamico de até 3(ou mais) escolhas. AJAX+PHP+MYSQL

01-12-2008 21:55

hmmmm, nâo tinha pensado nisso.
Realmente não vai dar não. teria que usar um timer ou o que eu aconselho a você é com apenas 1 chamada ajax, chamar o arquivo php que traz os resultados, e no tratamento vc construir de um modo que jogue nos 2 selects.

exemplo ali esta sendo explodido quando encontra |

no arquivo php, você pode jogar os resultados dos selects um em cada linha. a 1 linha você mantém o | a cada resultado. e a segunda linha faça as quebras com ,. ai você terá 2 variaveis. ai e só jogar os resultado em seus respectivos selects.
0
 
Primeiras postagens
Primeiras postagens
Mensagens: 3
Sexo: Masculino
Localização: Portugal - Caldas da Rainha

Select dinamico de até 3(ou mais) escolhas. AJAX+PHP+MYSQL

06-12-2008 22:42

Obrigado pela dica.... valeu.

Um abraço
0
 
Primeiras postagens
Primeiras postagens
Mensagens: 6

Select dinamico de até 3(ou mais) escolhas. AJAX+PHP+MYSQL

17-03-2010 15:52

:help preciso munto de um select com as mesmas caracteristicas aqui apresentada, mas esse não funfa!!! não consigo faze-lo funcionar... alguém pode me ajudar e passar o script ou um outro???

email/MSN: contatos@casadossites.com.br

Até pago!!!!
0
 
Primeiras postagens
Primeiras postagens
Mensagens: 2

Select dinamico de até 3(ou mais) escolhas. AJAX+PHP+MYSQL

20-03-2010 23:58

Cara seu script esta muito bom só que não consegui fazer funcionar caso o visitante do site escolha moto será que alguem poderia me ajudar???

Desde já muito obrigado!
0
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 50
Sexo: Masculino
Localização: Sampa/Itanhaem/Brasil
Contato:

Select dinamico de até 3(ou mais) escolhas. AJAX+PHP+MYSQL

21-03-2010 01:35

Mas da para saber qual o erro que está dando? ou não tem erro?
0
 
Primeiras postagens
Primeiras postagens
Mensagens: 2

Select dinamico de até 3(ou mais) escolhas. AJAX+PHP+MYSQL

21-03-2010 11:56

Então pelo que entendi , no script não esta previsto a escolha da moto, posso estar errado , mas assim se vc ecolher carro é codigo 1 moto é codigo 2 quando escolhe carros ele abre normalmente as marcas e quando escolhe marcas ele mostra os modelos referente a aquela marca até ai perfeito 100% funcional, o problema é quando escolhe moto não achei aonde associa as marcas para as motos e depois os modelos para as marcas de motos... alguem pode me ajudar?
0
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 50
Sexo: Masculino
Localização: Sampa/Itanhaem/Brasil
Contato:

Select dinamico de até 3(ou mais) escolhas. AJAX+PHP+MYSQL

21-03-2010 13:32

Crie uma bd para as motos.

ai no arquivo query marcas acrescentar:

<?php include "../conexao/conexao_mysql.inc"; $categoria = addslashes($_GET["id"]); // pegamos o id passado pelo select if ($categoria == 1){ $consulta = mysql_query("SELECT * FROM  categorias_carro GROUP BY marca ASC") or die(mysql_error()); // selecionamos todas as subcategorias que pertencem à categoria selecionada while( $row = mysql_fetch_array($consulta) ) echo utf8_encode($row["marca"]) . "|" . $row["codigo"] . ","; // apresentamos cada subcategoria dessa forma "NOME|CODIGO,NOME|CODIGO,NOME|CODIGO,...", exatamente da maneira que iremos tratar no JavaScript }elseif($categoria ==2){ (Instrucoes do banco das motos) (Repita o while da condição acima porém para as motos com separação por | ) } } ?>

Pronto o sistema se encarregara de realizar o resto. Este sistema desenvolvi para um cliente que queria so carros, então seria bom utilizar nomes genéricos.
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado