AJAX Fonction pour remplir un champ dans un formulaire?

Question

Hey, je regardais le didacticiel de W3 sur AJAX et j'ai décidé de créer une fonction javascript qui peuplerait un champ de formulaire basé sur la réponse d'une page. J'ai pris toutes leurs fonctions et j'ai essayé de créer le dessous.

Quelqu'un peut-il voir pourquoi cela ne fonctionnera pas?

function populateForm(myForm,formField,PageFrom,infoToSend) 
{ 
var xmlHttp; 
try 
    { 
    xmlHttp=new XMLHttpRequest(); 
    } 
catch (e) 
    { 
    try 
    { 
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    catch (e) 
    { 
    try 
     { 
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    catch (e) 
     { 
     //alert("Your browser does not support AJAX!"); 
     return false; 
     } 
    } 
    } 
    xmlHttp.onreadystatechange=function() 
    { 
    if(xmlHttp.readyState==4) 
     { 
     document.myForm.formField.value=xmlHttp.responseText; 
     } 
    } 
var url=PageFrom; 
url=url+"?q="+infoToSend; 

    xmlHttp.open("GET",url,true); 
    xmlHttp.send(null); 
    } 

Voici comment je l'appelle:

<form id="qwert" name="qwert"> 

<input id="qwer" name="qwer" type="text" onkeyup="populateForm('qwert','qwerty','echo.php',this.value);"> 
<input id="qwerty" name="qwerty" type="text"> 

</form> 

Answer 1

Ceci est faux:

document.myForm.formField.value=xmlHttp.responseText; 

Vous pourriez vouloir essayer:

document.getElementById(formField).value = xmlHttp.responseText; 

Avec que vous avez gagné Ne même pas besoin de passer le nom du formulaire, juste l'id du champ vous voulez mettre à jour.

Answer 2

Cela pourrait être une réponse tardive, mais serait certainement utile pour les gens ayant une telle question plus tard.

---

La meilleure option est d'utiliser prototype.js disponibles à http://www.prototypejs.org/api/ajax/updater. Il serait aussi simple que

new Ajax.Updater('qwerty',url,{asynchronous:true}); 

Ceci prendra soin de ce que vous voulez faire. Pour toute exigence de gestion des erreurs, veuillez parcourir la documentation complète de l'API, qui est simple.

---

Espérons que cela aide!

Answer 3

J'ai fait ceci et cela fonctionne très bien ... espérons que cela vous aidera ..

<script> 
function CreateXmlHttpObject() { //function to return the xml http object 
    var xmlhttp=false; 
    try{ 
     xmlhttp=new XMLHttpRequest();//creates a new ajax object 
    } 
    catch(e) {  
     try{    
      xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");//this is for IE browser 
     } 
     catch(e){ 
      try{ 
      req = new ActiveXObject("Msxml2.XMLHTTP");//this is for IE browser 
      } 
      catch(e1){ 
       xmlhttp=false;//error creating object 
      } 
     } 
    } 

    return xmlhttp; 
} 
function getDataDB(brand_name) 
{ 
    var http = CreateXmlHttpObject(); // function to get xmlhttp object 
    var strURL = "ajax/get_brand_name_data.php?brand_name="+brand_name; 
    if (http){ 
     http.onreadystatechange = function(){ 
      if (http.readyState == 4) { //data is retrieved from server 
       if (http.status == 200) { // which reprents ok status      
        var results = http.responseText.split("|"); 
        document.getElementById('brand_name').value = results[0]; 
        document.getElementById('seq').value = results[1]; 
        if(results[2]=="Y") 
         document.getElementById('cstatus').checked = true; 
        else 
         document.getElementById('cstatus').checked = false; 
        document.getElementById('edate').value = results[3]; 
        document.getElementById('user_name').value = results[4]; 
        document.getElementById('details').value = results[5];  
       } 
       else 
       { 
        alert("There was a problem while using XMLHTTP:\n"); 
       } 
      }    
     }   
     http.open("GET", strURL, true); //open url using get method 
     http.send(null);//send the results 
    } 
}</script> 

<a href="#" onClick="$('#tabs').tabs('select', 0); getDataDB('<?=$row['brand_name'];?>'); return false;" class="red">EDIT </a> 

Php

<?php 
$dbhost = 'localhost'; 
$dbuser = 'username'; 
$dbpass = 'password'; 
$dbname = 'database'; 

$conn = mysql_connect($dbhost, $dbuser, $dbpass); 
mysql_select_db($dbname); 
$q = strtolower($_GET["brand_name"]); 
if (!$q) return; 

$sql = "SELECT * FROM setup_brand WHERE brand_name = '$q'"; 
$rw = mysql_fetch_array(mysql_query($sql)); 
$brand_name=($rw['brand_name']); 
$seq=($rw['seq']); 
$cstatus=($rw['cstatus']); 
$edate=($rw['edate']); 
$user_name=($rw['user_name']); 
$details=($rw['details']); 
echo "".$brand_name . "|" . $seq . "|" . $cstatus . "|" . $edate . "|" . $user_name . "|" . $details;?>