Remplir dynamiquement les valeurs de formulaire avec jQuery

Question

Je sais comment faire cela avec du PHP pur mais je dois le faire sans recharger la page. Y at-il de toute façon avec jQuery pour retirer efficacement certains résultats de base de données (basé sur ce qu'un utilisateur a entré dans le premier champ de texte sur un formulaire) puis remplir certains des champs restants avec des données retirées d'une requête db? Essentiellement je voudrais voir l'utilisateur s'éloigner du champ de texte (soit par tabulation ou par un clic dans le champ suivant) et boom, la requête est soumise en utilisant la valeur entrée dans ce champ et les champs suivants sont puis peuplé w/oa recharger la page. Je connais les principes de base de jQuery mais je ne l'ai pas utilisé pour faire quelque chose comme ça dans lequel je retire des données du serveur et j'essaie de le peupler côté client.

Toutes les suggestions/exemples sur la meilleure façon de commencer avec ceci seraient très appréciés. Merci.

• Nicholas

Answer 1

En supposant cet exemple HTML:

<input type="text" name="email" id="email" /> 
<input type="text" name="first_name" id="first_name" /> 
<input type="text" name="last_name" id="last_name" /> 

Vous pourriez avoir ce javascript:

$("#email").bind("change", function(e){ 
    $.getJSON("http://yourwebsite.com/lokup.php?email=" + $("#email").val(), 
     function(data){ 
      $.each(data, function(i,item){ 
      if (item.field == "first_name") { 
       $("#first_name").val(item.value); 
      } else if (item.field == "last_name") { 
       $("#last_name").val(item.value); 
      } 
      }); 
     }); 
}); 

Ensuite, il suffit que vous avez un script PHP (dans ce lookup.php cas) qui prend un email chaîne de requête et renvoie un tableau au format JSON avec les valeurs auxquelles vous voulez accéder. Ceci est la partie qui frappe en fait la base de données pour rechercher les valeurs:

<?php 
//look up the record based on email and get the firstname and lastname 
... 

//build the JSON array for return 
$json = array(array('field' => 'first_name', 
        'value' => $firstName), 
       array('field' => 'last_name', 
        'value' => $last_name)); 
echo json_encode($json); 
?> 

Vous voulez faire d'autres choses comme désinfectez l'entrée e-mail, etc, mais si vous y aller dans la bonne direction.

Answer 2

Si vous avez besoin de frapper la base de données, vous avez besoin de frapper à nouveau le serveur Web (pour la plupart). Ce que vous pouvez faire est d'utiliser AJAX, qui fait une demande à un autre script sur votre site pour récupérer des données, obtient les données, puis met à jour les champs d'entrée que vous voulez.

appels AJAX peuvent être effectués en jquery avec l'appel de fonction .ajax $(), de sorte que cela se produira

navigateur de l'utilisateur entre l'entrée qui déclenche un déclencheur qui fait un appel AJAX

$('input .callAjax').bind('change', function() { 
    $.ajax({ url: 'script/ajax', 
      type: json 
      data: $foo, 
      success: function(data) { 
      $('input .targetAjax').val(data.newValue); 
      }); 
); 

maintenant vous devrez indiquer que l'appel AJAX au script (semble que vous travaillez PHP) qui fera la requête que vous voulez et renvoie des données.

Vous voudrez probablement utiliser l'appel d'objet JSON afin que vous puissiez passer de nouveau un objet javascript, qui sera plus facile à utiliser que XML de retour, etc.

La fonction php json_encode (phpobj de $); Sera utile.

Answer 3

remplir automatiquement tous les champs de formulaire à partir d'un tableau

http://jsfiddle.net/brynner/wf0rk7tz/2/

JS

function fill(a){ 
    for(var k in a){ 
     $('[name="'+k+'"]').val(a[k]); 
    } 
} 

array_example = {"God":"Jesus","Holy":"Spirit"}; 

fill(array_example); 

HTML

<form> 
<input name="God"> 
<input name="Holy"> 
</form>