Resultaat AJAX request weergeven in tekstveld

Door Peter van den Dungen op 06-01-2013 15:11 gewijzigd op 06-01-2013 15:24

1.192 views

Ik gebruik onderstaand script om, afhankelijk van de keuze in een selectbox, een query samen te stellen. Als ik het resultaat weergeef in een divje gaat alles goed. Maar hoe kan ik een resultaat weergeven in een tekstveld? Ik wil bijvoorbeeld de achternaam opzoeken met de query en daarna weergeven in het tekstveld. Iemand die me verder kan helpen?


<form name="form1">
 <select name="users" onchange="showUser(this.value)">
 <option value="">Selecteer</option>
 <option value="100">Peter</option>
 <option value="101">Klaas</option>
 <option value="102">Jan</option>
 <option value="103">Piet</option>
 </select>
</form>


function showUser(str)
 {
 if (str=="")
   {
   document.getElementById("input1").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("input1").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","get_users.php?q="+str,true);
 xmlhttp.send();
 }

<<get_users.php>>


<?php
include("Includes/functions.php");
include("Includes/connection.php");

$q=$_GET["q"];

$query= mysql_query("
SELECT 
* 
FROM 
test_tabel
WHERE 
id = '".$q."'"
,$connection);
$row = mysql_fetch_assoc($query);
 
echo $row['achternaam'];

 
mysql_close($connection);
 ?>

Ger van Steenderen

06-01-2013 16:23

document.getElementById('input1').value = xmlhttp.responseText

Peter van den Dungen

06-01-2013 17:01

Dankjewel, het werkt goed zo.
Stel, ik wil niet alleen de achternaam ophalen, maar ook leeftijd, geslacht etc.
Zoewel achternaam, leeftijd en geslacht moeten in een apart tekstveld worden weergegeven. Is dit alleen te doen door 3 verschillende functies aan te roepen, of kan dit in 1 functie?

Ger van Steenderen

06-01-2013 18:39

Ja hoor dat kan in één functie:
In php:

<?php
echo json_encode(array('name' => 'Dungen', 'sex' => 'M', 'leeftijd' => 25);
?>

Binnen onreadystatechange


var data = JSON.parse(xmlhtpp.responseText);
document.getElementById('input1').value = data.name;

Peter van den Dungen

06-01-2013 20:14

Ik kom er nog niet helemaal uit.
De functie is als volgt:


function getR(str)
 {
   if (str=="")
    {
      document.getElementById('input1').value = xmlhttp.responseText
      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('input1').value=                 xmlhttp.responseText
	       
               var data = JSON.parse(xmlhtpp.responseText);
	       document.getElementById('input1').value = data.name;
   	    }
       }
	  
   xmlhttp.open("GET","ophalen.php?q="+str,true);
   xmlhttp.send();
 }

Het php-gedeelte zo:


<?php
include("Includes/functions.php");
include("Includes/connection.php");

$q=$_GET["q"];

$query= mysql_query("
SELECT 
* 
FROM 
test
WHERE 
id = '".$q."'"
,$connection);

$row = mysql_fetch_array($query);

echo json_encode(array('name' => 'Dungen', 'sex' => 'M', 'leeftijd' => 25));

mysql_close($connection);
 ?>

Ik heb de array nog niet gevuld met de query.
Moet de hele array wel op deze manier worden geëchood?
Het tekstveld blijft leeg of de hele array komt erin te staan {name ....}
En hoe echo ik leeftijd in het andere (2e) tekstveld?

Ger van Steenderen

06-01-2013 21:18

Een kleine maar desastreuze typo op regel 23 in het javascript: xmlhttp.responseText moet het zijn.
De andere velden kan je benaderen via data.leeftijd en data.sex

Reageren

Inloggen om te reageren