Duvida com ajax

candycane

Power Member
Boa noite comunidade!

Eu estou a tentar fazer com que ao seleccionar um um valor de uma combobox, os produtos que pertencem ao valor dessa combobox apareçam numa textbox...

Como é possível fazer isso com ajax?


meu form:

Código:
<form id="form1" name="form1" method="post" action="">
  
  <select name="list_produtos" id="list_produtos">
  <?php
          $sql = "SELECT *
                    FROM produtos
                    ORDER BY categoria ASC";
        
        $dados = mysql_query($sql, $ligacao);
        
        while($produtos = mysql_fetch_assoc($dados))
        {
            echo "<option value='".$produtos['id']."'>".$produtos['categoria']."</option>";
        }  
  ?>
  </select>
  
  
  <input type="text" name="txt_emails" id="txt_emails" />  
  
  <input type="submit" name="btn_ok" id="btn_ok" value="Submit" />

 
</form>
o meu resquest_subprodutos.php:

PHP:
<?php
    include("includes/database.php");
    
    $id = $_GET['id'];
    
    $sql = "SELECT *
            FROM produtos p
            INNER JOIN detalhes d ON p.id=d.id_produtos
            WHERE id_produtos='{$id}'
            ORDER BY nome ASC";
                        
    $resultado = mysql_query($sql, $ligacao);
    
    while ($dados = mysql_fetch_assoc($resultado))
    {
        echo "|".$dados['nome'];
    }

?>

o meu ajax.js esta mto probrezito... so fiz o request :\

Código:
var req = false;


if(window.XMLHttpRequest){
    req = new XMLHttpRequest;
}else{
    if(window.ActiveXObject){  
        try{
            req = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){}
        
        try{
            req = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(ex){ req = false; }
    }
}


if (!req && typeof XMLHttpRequest != 'undefined') {
req = new XMLHttpRequest();
}
não sei como fazer com que o texto da textbox seja relativo ao valor que escolhi da combobox :(
 
Vê se este exemplo te ajuda em alguma coisa.

ajax.js
PHP:
function CreateRequest(){
  var req = false;

  if (window.XMLHttpRequest){ // Mozilla, Safari,...
    req = new XMLHttpRequest();
    if (req.overrideMimeType){req.overrideMimeType('text/html');}
  }
  else if (window.ActiveXObject){ // IE
    try{req = new ActiveXObject("Msxml2.XMLHTTP");}
    catch (e){
      try{req = new ActiveXObject("Microsoft.XMLHTTP");}
      catch (e) {}
    }
  }
  if (!req){
    alert('Giving up :( Cannot create an XMLHTTP instance');
  }

  return req;
}

function UpdateTextbox(){
  var req=CreateRequest();

  req.onreadystatechange = function() {
    //pedido completo e com sucesso
    if(req.readyState==4 && req.status==200){
      //preencher textbox
      document.getElementById("txt_emails").value=req.responseText;
    }
  };

  //obter opção selecionada
  var option=document.getElementById("list_produtos").value;

  //efectuar pedido
  req.open("GET", "request_subprodutos.php?id="+option, true);
  req.send(null);
}

No controlo select adiciona o evento: onchange="UpdateTextbox();" ou seja fica algo deste tipo:
Código:
<select name="list_produtos" id="list_produtos" onchange="UpdateTextbox();">

No exemplo que deste o ficheiro php que vai responder aos pedidos é o "resquest_subprodutos.php", acredito que tenhas ali um typo e querias ter escrito "request_subprodutos.php" :) mas podes alterar o nome nesta linha, no ajax.js

PHP:
req.open("GET", "request_subprodutos.php?id="+option, true);
 
Back
Topo