Cum sa fac select tag-ul sa se actualizeze mereu din click

[Meckmaniack]

Salut. Am si eu o intrebare si nu i-am gasit inca raspuns, desi caut neincetat.
Cum sa fac un select dintr-un form php sa se actualizeze mereu cand dau click pe el? Mai precis, vreau sa imi interogheze baza de date de fiecare data cand il activez.
Multumesc anticipat.

[takedown]

Te ajut eu cu cea mai mare placere, trimite-mi pm cu o adresa de contact.(preferabil YM ).
In principiu ai nevoie de:

-o baza de date, care sa contina un tabel, pentru a putea face interogarea.
-script html pentru markup: select form etc;
-script php care sa faca interogarea in baza de date folosind MySQLi
-script javascript - ajax care sa fie folosit ca un trigger, in momentul in care se face click pe select( are loc un event), scriptul ajax foloseste scriptul php creat de noi pentru a afisa informatiile preluate din baza de date, sub forma unei liste.Totul se intampla automat, fara refresh la pagina, exact ceea ce cauti!

Sper ca ai inteles, daca nu, te pot ajuta eu.

[Meckmaniack]

Multumesc pt sprijin takedown, si daca esti de acord, hai sa rezolvam aici, poate vor mai fi utilizatori care vor avea nevoie.
conform cerintelor tale:
-o baza de date, care sa contina un tabel, pentru a putea face interogarea.

Cod: Selectaţi tot

CREATE TABLE `auto` (
`Idauto` BIGINT(20) NOT NULL AUTO_INCREMENT,
`year` INT(4) UNSIGNED NOT NULL,
`make` VARCHAR(255) NULL,
`model` VARCHAR(255) NOT NULL,
PRIMARY KEY (`Idauto`),
UNIQUE KEY `auto`(`year`,`make`,`model`)
);
CREATE TABLE `clientipf` (
`Idclpf` BIGINT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`numepren` VARCHAR(255) NOT NULL,
`telefon` VARCHAR(255) NOT NULL,
`data_nast` date,
`adresa` VARCHAR(255),
`email` VARCHAR(255)
);
CREATE TABLE `autoclpf` (
`Idautoclpf` BIGINT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`Idauto` BIGINT(20) NOT NULL,
`Idclpf` BIGINT(20) NOT NULL,
`nrinmatr` VARCHAR(255) NOT NULL,
`nrsasiu` VARCHAR(255) NOT NULL,
`capcldnr`BIGINT(20),
`pwrmotor` INT(5),
`dataintrare` date,
`kminceput`BIGINT(20) NOT NULL,
`kmultimi`BIGINT(20) NOT NULL,
`mz` FLOAT(6,2) NOT NULL,
CONSTRAINT fk_tblauto FOREIGN KEY (Idauto) REFERENCES auto(Idauto),
CONSTRAINT fk_tblclienti FOREIGN KEY (Idclpf) REFERENCES clientipf(Idclpf)
);

-script html pentru markup: select form etc;
-script php care sa faca interogarea in baza de date folosind MySQLi;

Cod: Selectaţi tot

<form action="" method="post">
   <table>
<tr><td>  <label>Alege clientul  </label> </td>
   <td><select name="clientpf" id="clientpf">
      <option value="" selected="selected" disabled="disabled">Selecteaza un client</option>
      <?php 
       $result1 = mysql_query("SELECT * FROM clientipf ORDER BY numepren")
      or die(mysql_error());
        while($row = mysql_fetch_array( $result1 ))
        {
           echo '<option value="'.$row['Idclpf'].'">'.$row['numepren'].' - Telefon: '.$row['telefon'].'</option>';
      }
      ?>
        </select></td>
</tr>
<tr><td colspan="2" align="center"><label>Alege tipul de autoturism<br /></label> </td></tr>
<tr><td align="right">Marca</td>
   <td> <select name="drop_1" id="drop_1">
          <option value="" selected="selected" disabled="disabled">Alege marca auto</option>
          <?php getTierOne(); ?>
         </select>
       <span id="wait_1" style="display: none;"><img alt="Please Wait" src="ajax-loader.gif"/></span>
       <span id="result_1" style="display: none;"></span>
          <span id="wait_2" style="display: none;"><img alt="Please Wait" src="ajax-loader.gif"/></span>
       <span id="result_2" style="display: none;"></span>
    </td>
</tr>
<tr><td><label>Numar inmatriculare</label></td>
   <td><input name="nrinmatr" id="nrinmatr" type="text" /></td>
</tr>
<tr><td><label>Numar sasiu </label></td>
   <td><input name="nrsasiu" id="nrsasiu" type="text" /></td>
</tr>
<tr><td><label>Capacitate cilindrica</label></td>
   <td><input name="capcldnr" id="capcldnr" type="text" /></td>
</tr>
<tr><td><label>Putere motor</label></td>
   <td><input name="pwrmotor" id="pwrmotor" type="text" /></br></td>
</tr>
<tr><td><label>Numar km bord</label></td>
   <td><input name="kminceput" id="kminceput" type="text" /></br></td>
</tr>
<tr><td><label>Km media zilnica</label></td>
   <td><input name="mz" id="mz" type="text" /></br></td>
</tr>
<tr><td colspan="2" align="right"><input type="submit" name="submit" value="Submit" /></td>
</tr>
</table>
</form>

Tot ce imi mai trebuie e scriptul ala de Ajax

[takedown]

Salut, eu ti-am refacut tot, atentie ca eu folosesc OOP MYSQLi, iti recomand sa inveti si tu.
Numai stau sa iti explic detaliat pas cu pas, sunt foarte obosit, daca doresti mai multe explicatii despre Ajax etc, imi trimiti pm cu o adresa.

Avem nevoie de urmatoarele fisiere:

Nume: db_connect.php

Cod: Selectaţi tot

<?php
$hostname = "localhost"; // host name
$db_username = "root"; // username baza de date
$db_password = ""; // parola baza de date ( empty in cazul meu, pe localhost )
$db_name = "test"; // nume baza de date

// conectare la baza de date
$db = new mysqli($hostname,$db_username,$db_password,$db_name);

// daca conectarea nu functioneaza
 if(!$db) {
     echo "No database connection...";
}

?>


Practic OOP MYSQLI, inseamna o clasa care contine toate functiile necesare.
$db = new mysqli();, se creeaza o instanta a clasei mysqli pentru a putea folosi functiile ( metodele ) acelei clase si apoi conectarea la baza de date, dupa cum observi, am scris toate datele necesare intr-o singura linie de cod.


NUME: index.html

Cod: Selectaţi tot

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="lib.js"></script>
</head>
<body>
<form action="" method="post">
   <table>
<tr><td>  <label>Alege clientul  </label> </td>
   <td><select id="clientpf" nume="clientpf" onfocus="ajax_loader();">
         <option value="" selected="selected" disabled="disabled">Selecteaza un client</option>
        </select></td>
</tr>
<tr><td colspan="2" align="center"><label>Alege tipul de autoturism<br /></label> </td></tr>
<tr><td align="right">Marca</td>
   <td> <select name="drop_1" id="drop_1">
          <option value="" selected="selected" disabled="disabled">Alege marca auto</option>
          <?php getTierOne(); ?>
         </select>
       <span id="wait_1" style="display: none;"><img alt="Please Wait" src="ajax-loader.gif"/></span>
       <span id="result_1" style="display: none;"></span>
          <span id="wait_2" style="display: none;"><img alt="Please Wait" src="ajax-loader.gif"/></span>
       <span id="result_2" style="display: none;"></span>
    </td>
</tr>
<tr><td><label>Numar inmatriculare</label></td>
   <td><input name="nrinmatr" id="nrinmatr" type="text" /></td>
</tr>
<tr><td><label>Numar sasiu </label></td>
   <td><input name="nrsasiu" id="nrsasiu" type="text" /></td>
</tr>
<tr><td><label>Capacitate cilindrica</label></td>
   <td><input name="capcldnr" id="capcldnr" type="text" /></td>
</tr>
<tr><td><label>Putere motor</label></td>
   <td><input name="pwrmotor" id="pwrmotor" type="text" /></br></td>
</tr>
<tr><td><label>Numar km bord</label></td>
   <td><input name="kminceput" id="kminceput" type="text" /></br></td>
</tr>
<tr><td><label>Km media zilnica</label></td>
   <td><input name="mz" id="mz" type="text" /></br></td>
</tr>
<tr><td colspan="2" align="right"><input type="submit" name="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>


Cod: Selectaţi tot

<head>
  <meta charset="UTF-8">
  <script src="lib.js"></script>
</head


Aici am adaugat sursa externa a fisierului javascript care contine codul Ajax.Se poate adauga si in interiorul tagului <body>..</body>.

Cod: Selectaţi tot

<select id="clientpf" nume="clientpf" onfocus="ajax_loader();">
<option value="" selected="selected" disabled="disabled">Selecteaza un client</option>
</select>


Dupa cum observi am mai adugat la acest select "atributul" onfocus="ajax_loader()"; .In momentul in care dam click pe select, acolo este un event, care incarca functia necesara.Ca un event sa aiba loc, avem nevoie de un trigger: onfocus="", onclick="" etc.

Nume: lib.js

Cod: Selectaţi tot

function create_Obj() {
   var xhr = null;
   
   if(window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
       return xhr;
}

function ajax_loader() {
   var http = create_Obj();
   http.open("GET","get_list.php",true);
   http.send(null);

   http.onreadystatechange = function() {
      if(http.readyState == 4) {
         document.getElementById("clientpf").innerHTML = http.responseText;
      }
   }


}


Aceasta este scriptul AJAX care foloseste scriptul PHP pentru a interoga baza de date, iar apoi afiseaza rezultatul pe pagina fara refersh.

Cod: Selectaţi tot

http.open("GET","get_list.php");


Aceasta linie de cod creeaza cererea care va fi trimisa catre scriptul PHP, am folosit metoda GET ( pentru metoda POST este putin mai diferit), apoi urmeaza calea catre fisierul PHP.

Cod: Selectaţi tot

document.getElementById("clientpf").innerHTML = http.responseText;


Practic aceasta linie de cod, inlocuieste continutul elementului care are id "clientpf" cu raspunsul primit de la scriptul PHP.


Nume: get_list.php

Cod: Selectaţi tot

<?php
require_once "db_connect.php";
$sql = $db->query("SELECT * FROM clientipf ORDER BY numepren") or die("Error..");
    while($row = $sql->fetch_assoc()) {

      echo "<option value=".$row['Icdlpf'].">".$row['numepren']." - Telefon ".$row['telefon']."</option>";
   }
?>


In final fisierul PHP care face interogarea la baza de date, folosind acelasi OOP MYSQLI.

[Meckmaniack]

@takedown, multumesc mult. codul e super ok pt ceea ce aveam eu nevoie.
a mai ramas o singura mica problema, pe langa faptul ca php 5.5 ma pune sa lucrez cu mysqli:
pagina care contine form-ul este apelata in cadrul paginii principale intr-un div, cu urmatoarea functie:

Cod: Selectaţi tot

function detalii(str)
   {
   var xmlhttp;
   if (str=="")
        {
        document.getElementById("divdetalii").innerHTML="";
        return;
        }
   if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
   else
        {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
   xmlhttp.onreadystatechange=function()
   {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("divdetalii").innerHTML=xmlhttp.responseText;
    }
     }
   xmlhttp.open("GET","getdetdvclpf.php?q="+str,true);
   xmlhttp.send();
   }

ei, aplicand codul tau, eu practic, prin intermediul paginii principale incerc sa aplic o functie unei pagini apelate. ideea e ca nu vrea sa imi mearga, momentan. voi mai incerca o serie de chestii. daca reusesc,te anunt

[takedown]

Am inteles problema ta, imi pare bine ca am putut sa te ajut.Daca mai ai nevoie de ajutor, imi lasi mesaj si incerc sa te ajut.Iti recomand sa folosesti doar un fisier javascript care sa contina tot ce ai nevoie, sa afiseze continutul in div si sa actualizeze acel select.